Custom Ribbon Actions/Commands for SharePoint 2013 HTML Editor

Question

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.

Answer 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 :)