Quick-and-Dirty CKEditor Toolbar Setup for XPages
Tue Sep 04 19:35:00 EDT 2012
Update: Looks like I was late to the game on this as well: http://www.intec.co.uk/xpages-8-5-2-rich-text-extending-the-ckeditor/
A while back, I got annoyed by the lack of a "Source" button in the default rich text editor in XPages. After a bit of digging, I found that there is indeed one (not to mention a whole world of CKEditor toolbar plugins and enhancements) - just not by default. I think there's a way you can pick from a couple named "stock" toolbar layouts, but I ended up going the route of defining my own, naming each button in a group.
In CKEditor, at least pre-3.6 (and I guess it works later too), toolbars can be defined inline via a JSON array-of-arrays in the "toolbar" property of the editor. A hopelessly simple toolbar definition would look something like this:
[ ["Bold", "Italic", "Underline", "Strike", "-", "TextColor", "BGColor" ], ["Indent", "Outdent"] ]
That would define two button groups with the named controls present. The "-" is a way to manually place a separator - think of them like non-breaking spaces: they look the same as the divider between groups, but will not cause the group to be split onto a second line if the toolbar is too wide for a single row.
For my purposes, I went a bit nuts:
[ ["Format", "Font", "FontSize"], ["Bold", "Italic", "Underline", "Strike", "-", "TextColor", "BGColor", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "NumberedList", "-", "BulletedList"], ["Indent", "Outdent"], ["Subscript", "Superscript"], ["RemoveFormat", "-", "MenuPaste", "-", "Undo", "Redo", "Find", "LotusSpellChecker", "-", "Image", "Table", "Link", "Flash", "-", "PageBreak", "HorizontalRule", "SpecialChar", "Blockquote", "Smiley", "ShowBlocks"], ["Maximize", "Source"] ]
Inside an XPage, you can set this using the "attrs" property in 8.5.3 - though "dojoAttributes" would probably work fine in 8.5.3 and earlier as well:
<xp:inputRichText value="#{doc.Body}"> <xp:this.attrs> <xp:attr name="toolbar"><xp:this.value><![CDATA[ [ ["Format", "Font", "FontSize"], ["Bold", "Italic", "Underline", "Strike", "-", "TextColor", "BGColor", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "NumberedList", "-", "BulletedList"], ["Indent", "Outdent"], ["Subscript", "Superscript"], ["RemoveFormat", "-", "MenuPaste", "-", "Undo", "Redo", "Find", "LotusSpellChecker", "-", "Image", "Table", "Link", "Flash", "-", "PageBreak", "HorizontalRule", "SpecialChar", "Blockquote", "Smiley", "ShowBlocks"], ["Maximize", "Source"] ] ]]></xp:this.value></xp:attr> </xp:this.attrs> </xp:inputRichText>
It looks like the syntax changed for 3.6, but not too much.
If you want to look into more specifics, you can take a look at the examples and un-minified code in (data)/domino/html/ckeditor/_samples and _source.
Pablo Solano - Thu Sep 06 09:21:32 EDT 2012
Hi,
Just wondering what are you using behind "LotusSpellChecker", were you able to add spell checker to CKEditor without any additional license?
Thanks in advance.
Pablo
Jesse Gallagher - Thu Sep 06 10:59:44 EDT 2012
Hmm, looking at it now, that may be outdated. I got that from the default set of toolbar entries back in 8.5.2, but it looks like it doesn't show up anymore, so perhaps it's gone.