CKEditor IPAD icons not displaying

Question

The issue

I am having trouble getting the toolbar icons to appear on the ckeditor on the ipad (safari).

ckeditor Version 4.3.2

Diagnosis

The ckeditor works fine on all other browsers however on safari ipad it has issues. It even works on Safari on the desktop mac. In an attempt to diagnose the issue I implemented the ckeditor on a simple page in the exact same way as I did on the normal page. The normal page has a lot going on: loads of JavaScript some JavaScript libraries are loaded Dynamically, events all over the place etc. The issue did not manifest itself on the simplified page. Whats more when I go to the normal page after visiting the simplified page the icons appear. So it appears something is cached.

If I clear the cache and go back to the normal page first the icons do not appear.

The ckeditor.js was being loaded dynamically however I put a reference into the header of the page and this does not resolve the issue.

Any Ideas?

I realise that without all the code it is a little difficult to diagnose but everything ... I cannot give! However some ideas and pointers would be great.

Implementation

I have tried instantiating it couple of different ways however it did not have an affect. however here is one example of how I instantiated it.

CKEDITOR.replace($(this).attr('id'), { height: '200px', width: '100%', language: 'en-GB', customConfig: 'configIpad.js', resize_enabled: false });

configIpad.js:

CKEDITOR.editorConfig = function (config) {
config.htmlEncodeOutput = true;
config.disableNativeSpellChecker = false;
CKEDITOR.config.browserContextMenuOnCtrl = true;
config.allowedContent = true;

CKEDITOR.editorConfig = function (config) {
config.htmlEncodeOutput = true;
config.disableNativeSpellChecker = false;
CKEDITOR.config.browserContextMenuOnCtrl = true;
config.allowedContent = true;
config.toolbar = [
    { name: 'interact-clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText'] }
];
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address';
config.minimumChangeMilliseconds = 100; // 100 milliseconds (default value)

};

score 0 · Answer 1 · answered Mar 03 '14 at 10:39

My suggestion is that you should try to debug the page.

activate the web inspector in settings > safari > advanced
Connect the iPad to a mac and open safari in the mac.
In the 'development' menu in desktop safari, choose you ipad and select the page with your menu.

Now you can inspect the contents of the page and the network activity, so you can see if the icons are downloading, if they are on the page, whether they are on the page, and so on, to identify the problem. Then, if you still can't solve it, you'll have more info to give us.

CKEditor IPAD icons not displaying

1 Answers1