1

I would like to provide more ribbon options to content editors than are available out-of-the-box in a SharePoint 2013 publishing site. For example, I would like to allow editors to select a HTML snippet and be able to add a HTML class or ID attribute to that HTML. This may mean wrapping the whole highlighted section in a div and adding the attribute to the new div, or it might mean adding it directly to the element selected. That is just an example of the sort of thing I'd like to do but I've not seen anything on the internet about this. Does anyone have or know of any useful resources for this sort of thing - i.e. custom ribbon actions that interface with the SharePoint 2013 HTML editor?

Thanks.

1 Answer 1

1

you could add a custom action, maybe a checkbox.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
        Id="MyRibbons.RibbonScript"
        ScriptSrc="~SiteCollection/_layouts/MyRibbonsScript.js"
        Location="ScriptLink">
  </CustomAction>
  <CustomAction Id="MyRibbons.LinkBehavior" Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.Link.Link.Behavior.Controls._children">
          <CheckBox Command="MyRibbons.CheckBoxCommand" QueryCommand="MyRibbons.CheckBoxQueryCommand"
                    LabelText="Add a class"
                    Id="MyRibbons.AddClass"
                    Sequence="30"
                    Alt="Add class"
                    TemplateAlias="o1" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler Command="MyRibbons.CheckBoxCommand" 
                          CommandAction="javascript:handleCommand();" />
        <CommandUIHandler Command="MyRibbons.CheckBoxQueryCommand"
                          CommandAction="javascript:handleCommand();" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
</Elements>

In the executed javascript you can do following:

handleCommand: function (commandId, properties, sequence) {
    switch (commandId) {
        case 'MyRibbons.CheckBoxCommand':
            RTE.SnapshotManager.takeSnapshot(); // make a snapshot for the RTE history
            var range = RTE.Cursor.get_range(); // get the current selected range from RTE
            var $element = $(range.$3_0); // select the element
            if (properties.On) {
                $element.addClass('customclass'); // manipulate the element
            }
            range.deleteContent(); // delete the range content
            range.insertBefore($element[i]); // insert your new element
            RTE.Cursor.update(); // update RTE
            break;
        case 'MyRibbons.CheckBoxQueryCommand':
            if (!this.checkBoxDefaultSet) {
                properties.On = true;
                this.checkBoxDefaultSet = true;
            }
            break;
    }
},
checkBoxDefaultSet: false,

You're right, it's very bad documented by M$.

I got it from here: http://www.wictorwilen.se/post/sharepoint-2010-ribbon-controls-part-6-the-checkbox-control.aspx and here http://blog.andersdissing.com/2011/11/playing-with-sharepoint-rich-text.html

Good luck :)

2
  • Thanks for this, that's a great find. I'll definitely give it a go. Jan 30, 2014 at 14:22
  • Looks like the .$3_0 is not available in Sharepoint 2016. Got the same result with: RTE.Cursor.get_range().get_endMarker() Works in both 2013 and 2016 Oct 18, 2017 at 7:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.