I have found a very nice skin for CKEditor, the “BootstrapCK-Skin”. It gives a bootstrap look and feel to the Editor:
The dialogs are also skinned:
You can find and download the skin here http://kunstmaan.github.io/BootstrapCK-Skin/
To use the skin in one of your applications, you have to import the unzipped files into your NSF…
… and add your “own” declaration of a xspCKEditor instance:
<xp:scriptBlock id="scriptBlockCKEditor">
<xp:this.value>
<![CDATA[
require( ['dojo/_base/declare', 'ibm/xsp/widget/layout/xspCKEditor'], function( declare, xspCKEditor ){
return declare( 'ch.hasselba.xpages.CKEDITOR', xspCKEditor, {
constructor: function ckew_ctor(/*Object*/options){
CKEDITOR.timestamp = '';
}
});
});
]]>
</xp:this.value>
</xp:scriptBlock>
This is required to remove an URL parameter, which is added automatically and will break the references. Then you have to overwrite the dojoType of your RichText control and add a dojoAttribute for the Skin. The path has to be appended after the name of the skin.
<xp:inputRichText
id="inputRichTextBody"
value="#{documentInfo.Body}"
dojoType="ch.hasselba.xpages.CKEDITOR">
<xp:this.dojoAttributes>
<xp:dojoAttribute
name="skin"
value="BootstrapCK-Skin,/path/to/your/db.nsf/BootstrapCK-Skin/">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
</xp:inputRichText>
