Richtext/CK editor is not working on Android

Question

I recently noticed that the standard richtext editor in xpages is not working on Android devices.

I have made a simple xpage with a single richtext field. When I view the page in iPhone on safari it works fine and also in chrome on Pc. But if I look in the device emulation in chrome most of the devices using android do not render the CK editor. Just a simple text area field is displayed.

I am using 9.0.1 FP2.

What do I need to do to get the CK editor to work on Android?

Unready

Answer 1

This is an issue in CKeditor itself it seems. It runs some code to determine if the detected browser is compatible with CKEditor based on the detected user-agent String. If that code returns false, CKEditor isn't loaded. This appears to be happening for any Android device using v4.4 or later (including v5 and v6). There was a bug logged on their tracking site. It looks like a fix was delivered to CKEditor v4.5. Currently 9.0.1FP5 uses CKEditor v4.4.6, before that fix was put in.

After looking at this SQ question I've implemented a workaround to get around the bug. Add the following script to your XPage to force CKEditor to load no matter what browser it detects:

<script><![CDATA[
    XSP.addOnLoad(function(){
       if( typeof(CKEDITOR) !== "undefined" ){ 
           CKEDITOR.env.isCompatible = true;
       }
    });]]>
</script>

You could even add that as a CSJS script library, and add that library to your theme, to ensure all instances of CKEditor throughout your app load on Android.

(Note that the linked SO question suggests a check to ensure CKEditor stays disabled on IE7 and older).

Fenestrated

thanks Brian, that seem to work, but when I load the page in read mode I now get ReferenceError: CKEDITOR is not defined – Unready

I solved it: XSP.addOnLoad(function(){ if( typeof(CKEDITOR) !== "undefined" ){ CKEDITOR.env.isCompatible = true; } }) – Unready

thanks, will accept your answer as soon as my customer have verified that it is working – Unready