You have two options here. One is to create simple toggle button with this markup:
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="8DCC5B17-4B9E-41A7-BA51-65CBC6F8205D"
Location="CommandUI.Ribbon"
Sequence="10">
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.EditingTools.CPEditTab.Font.Controls._children">
<ToggleButton
Id="Ribbon.EditingTools.CPEditTab.Font.CustomRTEToggleButton"
Alt="My Custom Action"
Command="CustomRTEToggleButton.Action"
QueryCommand="CustomRTEToggleButton.Query"
Sequence="55"
TemplateAlias="o1"
Image16by16="/_layouts/1033/images/formatmap16x16.png" Image16by16Top="-112" Image16by16Left="-16"
ToolTipTitle="My Custom Action"
ToolTipDescription="My Custom Action."/>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
EnabledScript="return true;"
Command="CustomRTEToggleButton.Action"
CommandAction="javascript:alert('hello there');" />
<CommandUIHandler
EnabledScript="return true;"
Command="CustomRTEToggleButton.Query"
CommandAction="javascript:alert('query');" />
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>
alert with "query" will be shown every time when you click (or select text) in rte text editor (this event will be also fire when tab with button will be loaded). So, you can create js function (instead of alert) that will be analyze cursor position somehow (or selected text) and perform required actions. The only trouble is to find correct way to toggle display mode for button. Example of javascript for manipulating with selected text:
var selectedText = RTE.Cursor.get_range().get_text(); - returns selected text
var parentEl = RTE.Cursor.get_range().parentElement() - returns DOM element, which contains current cursor.
Another option is to create custom page component (here and here good explanation with examples). Using second approach your definition should look like this one:
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="8DCC5B17-4B9E-41A7-BA51-65CBC6F8205D"
Location="CommandUI.Ribbon"
Sequence="10">
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.EditingTools.CPEditTab.Font.Controls._children">
<ToggleButton
Id="Ribbon.EditingTools.CPEditTab.Font.CustomRTEToggleButton"
Alt="My Custom Action"
Command="CustomRTEToggleButton.Action"
QueryCommand="CustomRTEToggleButton.Query"
Sequence="55"
TemplateAlias="o1"
Image16by16="/_layouts/1033/images/formatmap16x16.png" Image16by16Top="-112" Image16by16Left="-16"
ToolTipTitle="My Custom Action"
ToolTipDescription="My Custom Action."/>
</CommandUIDefinition>
</CommandUIDefinitions>
</CommandUIExtension>
</CustomAction>
</Elements>
and code in you handleCommand in page component something like this:
handleCommand: function (commandId, properties, sequence) {
if (commandId === 'CustomRTEToggleButton.Query') {
var selectedText = RTE.Cursor.get_range().get_text();
if (/SP/gi.test(selectedText)) {
properties.On = true;
}
else {
properties.On = false;
}
}
},
properties.On controls if toggle button active or not.
Second approach is a little bit complected, but this is more sharepoint-like style plus you can automatically switch your toggle button using properties.On.
NOTE: QueryCommand attribute available only for several ribbon controls.
UPDATE:
I've created sample solution using second approach, it adds toggle button to the ribbon, the button become active, when we select word sharepoint in the rich text area. Currently it can be downloaded from here. The only problem - I can't figured out how to make button smaller, I've tried different TemplateAlias but with no luck, if you find correct option to make it smaller (as other buttons like bold, italic, etc) please comment. Currently it looks like on the screenshot:
