Wednesday, 1 October 2014

BootstrapCK4 Skin for CKEditor

After the blog posts about using Select2, FileInput and the Bootstrap DateTimePicker in XPages the CKEditor (Rich Text Field) can not be missing.
In a later blog post all of these plugins will be used to create a new XPages application including the OpenNTF Bootstrap4XPages plugin.
On this topic are already written several blog post, among others, by Sven Hasselbach (Website/Blog) and Oliver Busse (Website/Blog).
This blog post is more or less a kind of summary of all these posts.

If you work with Bootstrap in XPages one of the first things you notice is that the CKEditor (Rich Text Field) doesn't have a nice Bootstrap look and feel.
In this blog post I will show how the BootstrapCK4 Skin for the CKEditor can be added in an XPages application.
This became especially interesting for me after installing Notes Domino 9.0.1 FP2.
The CKEditor is updated in Notes Domino 9.0.1 FP2 to 4.3.2 and Dojo is updated to 1.9.2.
So in this case I wanted a nice Bootstrap look and feel for the CKEditor in my XPages application and also I wanted to test if the BootstrapCK4-Skin for the CKEditor, combined with Notes Domino 9.0.1 FP2 and the OpenNTF Bootstrap4XPages plugin, is still working properly.

Standard when you use Bootstrap in an XPages application the CKEditor looks like this:


How to add a Skin to the CKEditor

1. Download the Bootstrap CK-Skin for CKEditor4
You can download the BootstrapCK4-Skin from the CKEditor website : CKEditor Skins


Download the files to your PC and extract the downloaded files.

2. Web-Content Folder
Add the extracted bootstrapck folder to the WebContent Folder in the Package Explorer.


3. Implement the Bootstrap CK-Skin
For the implementation see the Sven Hasselbach's blog post : Bootstrap Skin for CKEditor

First you need to declare an own xspCKEditor-instance on your XPage.
As mentioned by Sven Hasselach in his blog post this is required to remove an URL parameter, which is added automatically and will break the references.
I use a Custom Control for this and add this Custom Control to an XPage.

Sample Code Custom Control

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:scriptBlock id="scriptBlockCKEditor">
<xp:this.value>
      <![CDATA[
         require( ['dojo/_base/declare', 'ibm/xsp/widget/layout/xspCKEditor'], function( declare, xspCKEditor ){
            return declare( 'org.wavin.joldenburger.CKEDITOR', xspCKEditor, {
               constructor: function ckew_ctor(/*Object*/options){
                  CKEDITOR.timestamp = '';
               }
            });  
         });
      ]]>
</xp:this.value>
</xp:scriptBlock>
</xp:view>

4. Create a new XPage
Add a Rich Text Field to the XPage.
In the Rich Text Field 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:dojoAttribute name="skin">
<xp:this.value><![CDATA[#{javascript:return @ClientType().equals("Web") ? "bootstrapck,/"+database.getFilePath()+"/bootstrapck/" : ""}]]></xp:this.value>
</xp:dojoAttribute>

Further you have to set the default Dojo Type which should be used to create this control in the browser (this is your own xspCKEditor-instance).

<xp:this.dojoType><![CDATA[#{javascript:return @ClientType().equals("Web") ? "org.wavin.joldenburger.CKEDITOR" : ""}]]></xp:this.dojoType>

Remark
In Notes Domino 9.0.1 FP2 Dojo is updated to 1.9.2..
The Dojo Attribute toolbarType has been changed to toolbar.
If you updated to Notes Domino 9.0.1. FP1/FP2 and you are using Richt Text Fields with the Dojo Attribute toolbarType have a look at the XSnippet by Oliver Busse - Solving problems with CKEditor in 9.0.1FP1 and/or FP2 and his video Troubleshooting FP2's CKEditor issue .

Sample Code XPage with some additonal Dojo Attributes

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>
BootstrapCK-Skin
<xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>CKEditor4</small>
</h1>
</div>
<xp:br></xp:br>
<xp:inputRichText id="inputRichText1"
value="#{document1.Body}">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="extraPlugins"
value="autogrow">
</xp:dojoAttribute>
<xp:dojoAttribute name="skin">
<xp:this.value><![CDATA[#{javascript:return @ClientType().equals("Web") ? "bootstrapck,/"+database.getFilePath()+"/bootstrapck/" : ""}]]></xp:this.value>
</xp:dojoAttribute>
<xp:dojoAttribute name="width" value="100%">
</xp:dojoAttribute>
<xp:dojoAttribute value="Full" name="toolbar">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
<xp:this.dojoType><![CDATA[#{javascript:return @ClientType().equals("Web") ? "org.wavin.joldenburger.CKEDITOR" : ""}]]></xp:this.dojoType>
</xp:inputRichText>
<xp:br></xp:br>
<xc:ccBSCKE></xc:ccBSCKE>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

The final result:


We have now a nice Bootstrap look and feel CKEditor and it also works great in Notes Domino 9.0.1. FP2 combined with the OpenNTF Bootstrap4XPages plugin.

No comments:

Post a Comment