XPages: A Bootstrap Skin for CKEditor

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>

EDIT:
Oliver Busse found a problem when using the style in an XPiNC application and added a hotfix for the issue on his blog: http://mardou.dyndns.org/hp.nsf/blogpost.xsp?documentId=BC2

Dieser Beitrag wurde unter Java Script, Web, XSP abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

4 Kommentare zu XPages: A Bootstrap Skin for CKEditor

  1. Oliver Busse sagt:

    Hi Sven!

    Thanks for sharing this! You can now even use this in an OpenNTF project (like I do now) as I asked the developer to add a license info – meanwhile he added it (MIT license). Looks great!

  2. Oliver Busse sagt:

    One caveat I just encountered: this skin does not work in XPiNC so you have to compute the Dojotype and the skin attribute value:

    • Oliver Busse sagt:

      Sorry, cannot paste code here. If you want to update your post feel free to contact me so I send you the code.

  3. daniele grillo sagt:

    I don’t know why..but the console of firebug show me
    “ CKEDITOR.skins is undefined“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.