Experiencing Toolbar Icon Issues on CKEditor
I am encountering an issue with the toolbar icons not appearing on the CKEditor when using it on an iPad with Safari.
CKEditor Version: 4.3.2
Investigation
The CKEditor functions properly on all other browsers, including Safari on desktop Mac. However, when used on Safari iPad, the icons do not display correctly. To troubleshoot, I set up the CKEditor on a simple page in the same manner as the original page. Interestingly, the issue did not occur on the simplified page. Furthermore, after visiting the simplified page, returning to the original page caused the icons to appear, indicating a possible caching problem.
Clearing the cache and revisiting the original page without visiting the simplified page first still results in the icons not showing up.
The dynamic loading of ckeditor.js was tested by adding a reference to the header of the page, but this did not fix the issue.
Seeking Solutions
While I understand that offering all the code would facilitate diagnosis, I cannot provide all of it. Any suggestions or insights would be greatly appreciated.
Attempts at Implementation
I tried initializing the CKEditor in different ways, but none proved successful. Here is an example of how I attempted to instantiate 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;
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)
};