Please forgive me if there is already a topic on this issue. I searched, and I could not find a topic that matched my problem. If there is a topic for this problem already, please direct me to it.
I am using a minimal setup for CKEditor 3.6.5. On my laptop, it works well. On my iPhone4 (iOS 6.0.1), the editor is not immediately resizing to the screen width. When I focus on it, or scroll the page, it resizes, but then it looses the content area. The entire background of the editor (content area, toolbar, everything) becomes gray. I can still see the toolbar icons, but if I touch them, they disappear as well.
Here is my configuration:
As you can see, I am using the jquery adapter, and I defined a couple custom plugins. Like I said earlier, it all works on my non-mobile devices (desktops and laptops), but no love on my iPhone.
It's also worth mentioning that this problem does not occur when I view the CKEditor demo page. The editor there behaves well, if a little sluggishly.
So, the question is, is this a bug, did I misconfigure the editor, or is it something else entirely?
Thank you in advance for all your help.
I am using a minimal setup for CKEditor 3.6.5. On my laptop, it works well. On my iPhone4 (iOS 6.0.1), the editor is not immediately resizing to the screen width. When I focus on it, or scroll the page, it resizes, but then it looses the content area. The entire background of the editor (content area, toolbar, everything) becomes gray. I can still see the toolbar icons, but if I touch them, they disappear as well.
Here is my configuration:
(function() {
$(function() {
var config;
config = {
contentsCss: "editor-content.css",
docType: "<!DOCTYPE html>",
extraPlugins: "curlyquotes,dashes",
removePlugins: "elementspath",
resize_dir: "vertical",
toolbarCanCollapse: false,
keystrokes: [[CKEDITOR.CTRL + 90, 'undo'], [CKEDITOR.CTRL + 89, 'redo'], [CKEDITOR.CTRL + CKEDITOR.SHIFT + 90, 'redo'], [CKEDITOR.CTRL + 73, 'italic'], [CKEDITOR.ALT + 173, 'endash'], [CKEDITOR.CTRL + CKEDITOR.ALT + 173, 'emdash'], [222, 'highsinglenine'], [CKEDITOR.ALT + 222, 'highsinglesix'], [CKEDITOR.SHIFT + 222, 'highdoublesix'], [CKEDITOR.SHIFT + CKEDITOR.CTRL + 222, 'highdoublenine']],
toolbar_Full: [
{
name: 'document',
items: ['Preview', 'Print']
}, {
name: 'clipboard',
items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']
}, {
name: 'editing',
items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt', '-', 'SpecialChar']
}, {
name: 'basicstyles',
items: ['Italic', 'Subscript', 'Superscript', '-', 'RemoveFormat']
}, {
name: 'paragraph',
items: ['Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter']
}
]
};
return $("textarea.editor").ckeditor(config);
});
}).call(this);
As you can see, I am using the jquery adapter, and I defined a couple custom plugins. Like I said earlier, it all works on my non-mobile devices (desktops and laptops), but no love on my iPhone.
It's also worth mentioning that this problem does not occur when I view the CKEditor demo page. The editor there behaves well, if a little sluggishly.
So, the question is, is this a bug, did I misconfigure the editor, or is it something else entirely?
Thank you in advance for all your help.
Re: 3.6.5 Content area disappears on resize.
My reset CSS has the following directive:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }This seems to be causing the problem. It's only an issue on mobile Safari, as far as I can tell. IE, FF, and Chrome all work fine on both Linux and Windows. So, I guess I will have to figure out a way to not use border-box on ckeditor enhanced textareas.
Re: 3.6.5 Content area disappears on resize.
/* CKEditor fix. */ [class^='cke_'], [class^='cke_'] * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;; }This must be after:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }so that the cke_ directive overrides the * directive.