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">
         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 = '';

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.


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 Antworten 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:

  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.