CKEditor does not focus on iOS when tapping in text area

6
votes

CKEditor 4.0.1 is failing to focus when tapping in the text area on iOS 6.1 Safari. This happens both on the iphone and ipad (both running iOS 6.1). I can eventually get it to focus by tapping it several times. Sometimes it takes 5 taps, sometimes it takes 10 or 15. If I click the bold button, it focuses right away. Any ideas? Is there a way for me to manually capture the tap event and then call something that will focus the editor? I'm using jquery.

2
iphoneipadios6ckeditormobile-safari
Ahh... I just inspected the contents iframe and found that the height is only 1 line tall... in other words, the iframe doesn't span the height of the content area. In order to focus, you need to make sure to tap at the very top of the content area. I wonder if there's an easy way to make the iframe height match the height of the content area. - Redtopia
I'm guessing that adding html{height:100%;} to the css for the ckeditor iframe might do the trick. But I'm not sure where I would make that change. - Redtopia
I was able to change the height of the html element from within my editor area css file, and verified that the height of the iframe does span the height of the content area. But this does not solve the problem. Setting the body to have a min-height of 100px does make it easier to focus the editor, but is obviously only a temporary fix that doesn't completely fix the problem. - Redtopia
Can you create a test case online? I tested Official CKEditor-4.0.1, it worked fine on IOS 6.1 - trkaplan
testing.musiclessons.com/forum/test.cfm - when I view it on my iphone or ipad, you have to click in the very top part of the editor content area. Thanks for taking a look! - Redtopia

2 Answers

2
votes

Adding height:100%; to HTML and BODY elements in editor-test.css will fix this issue. Final code will be like this:

html {height:100%;}
body {
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 12px; 
    line-height:1.4em;
    color: #333; 
    height:100%;
}
1
votes

I know this is an old question, but I ran up against this recently.

In the ckeditor folder I edited the contents.css file. (It styles the contents of the editor)

In the body section, I added:

body 
{
    /* [other code is left as found] */

    /* Add the line below  */
    min-height: calc( 100% - 40px );
}

This takes into account differing custom heights defined in config.js and the margin: 20px declaration (which seems to be default).