Tuesday, 16 September 2014

CKEditor in Notes 9.0.1 FP2

After the installation of Domino 9.0.1. FP2 on our server I performed some test regarding the Rich Text Fields.
The tests have been performed in Internet Explorer and Firefox.
The main changes are the update of the CKEditor to 4.3.2 and de update of Dojo to version 1.9.2.

A. Test Rich Text Field in new created application
1. Create XPage with Rich Text Field
In a new XPages Application  a simple form has been created with a Rich Text Field.

The CKEditor is displayed correctly. All functionalities are working correct.

2. Test new functionality spellchecker















3. Test add image functionality















The uploaded image does not need to be sent to the server by the user anymore. This is now done automatically in the new CKEditor.

Result





















It is also possible to adjust the properties of the uploaded image within the CKEditor.





















4. Test add URL-Link functionality
















5. Test add Table functionality















The test was successful, no problems where detected.


B. Test Rich Text Field with Dojo Attributes
One of the problems after installing FP2 is the update of Dojo to version 1.9.2.
If in existing XPages applications Dojo attributes are used this can cause a problem because some attribute names are changed in Dojo 1.9.2.
For example the attribute name for toolbarType has been changed to toolbar.
This problem can be solved with a managed bean that checks the Dojo version (and select the correct Attribute Name).
This solution is provided by Oliver Busse ( http://openntf.org/XSnippets.nsf/snippet.xsp?id=solving-problems-with-ckeditor-in-9.0.1fp1-andor-fp2

‘The bean stores some values in a config map. The map value of "toolbartype" stores whether to use "toolbarType" or "toolbar" as attribute name for the control. So in this case it computes the attribute name and not it's value (in this case I use the "Full" toolbar with all options).’










































The same tests performed. The test was successful, no problems were detected.


C. Test CKEditor with Bootstrap / Skin
Test performed with XPages Application including Bootstrap, Font Awesome and a Skin for the CKEditor. Based on the BS3 Template by Oliver Busse ( https://github.com/zeromancer1972/Bootstrap-3-Template ).
In the WebContent Folder of the NSF added the Bootstrap 3.2.0 files, the Bootstrap Skin for CKEditor 4 (bootstapck) files ( http://ckeditor.com/addons/skins/all ), the Font Awesome 4.2.0 files and jQuery 1.11.0.

































Also added the provided solution for the CKEditor by Oliver Busse.

Rich Text Field (CKEditor)
<xp:inputRichText id="inputRichText1" value="#{document1.Body}">
 <xp:this.dojoAttributes>
 <xp:dojoAttribute value="Full">
 <xp:this.name><![CDATA[#{javascript:dojo.config.get("toolbartype")}]]></xp:this.name>
 </xp:dojoAttribute>
 <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:this.dojoAttributes>
 <xp:this.dojoType><![CDATA[#{javascript:return @ClientType().equals("Web") ? "org.wavin.joldenburger.CKEDITOR" :  ""}]]></xp:this.dojoType>
</xp:inputRichText>















The same tests performed. The test was successful, no problems were detected.

Conclusion.
The CKEditor is working after the update to Notes Domino 9.0.1 FP2. Special thanks to Oliver Busse for troubleshooting the FP2 issues and providing a solution. See also his video on YouTube http://youtu.be/3qZJqYHGPzo.

No comments:

Post a Comment