Keystone-classic: Small bug in Tinymce clicking the textarea don't show the caret text cursor

Created on 17 Dec 2014 · 14Comments · Source: keystonejs/keystone-classic

It is just an annoying thing when clicking a text area in the admin UI the cursor don't appear so it looks like that the text area it is no active but if you type text appear, maybe a tinymce integration bug?

I've tried to search but seems no one spotted this so no issue on github
tested in chrome

bug

Source

piermariacosina

All 14 comments

please provide reproducible code. A repo with a project that can be cloned would be excellent

morenoh149 on 7 Jan 2015

I've reproduced this. It's a bit jarring actually.

morenoh149 on 15 Jan 2015

sorry for the late reply actually this was the first time I've setup keystone with default yo generator configuration viewing it on mac osx yosemite with chrome

piermariacosina on 15 Jan 2015

@piermariacosina wait so are you still seeing this? because I am as well. Did you accidentally close it?

morenoh149 on 15 Jan 2015

I've don npm update and now I see the carret thanks
ᐧ

On Thu, Jan 15, 2015 at 10:19 PM, Harry Moreno [email protected]
wrote:

@piermariacosina https://github.com/piermariacosina wait so are you
still seeing this? because I am as well. Did you accidentally close it?

—
Reply to this email directly or view it on GitHub
https://github.com/keystonejs/keystone/issues/791#issuecomment-70163775.

PIERMARIA COSINA
User Experience Designer | Product Developer

+39 392 4822 633 http://assets.belafonte.co/signature.html#
www.belafonte.co
http://www.belafonte.co/?utm_source=signature&utm_medium=email&utm_campaign=signature

piermariacosina on 15 Jan 2015

I must be seeing something else then.

morenoh149 on 15 Jan 2015

i see what's the issue if you click on the first line of the text area the
carret appear, if you click only on the textarea you don't see it but it is
there if you write it works so the bug is still there you should reopen it
ᐧ

On Thu, Jan 15, 2015 at 10:55 PM, Harry Moreno [email protected]
wrote:

I must be seeing something else then.

—
Reply to this email directly or view it on GitHub
https://github.com/keystonejs/keystone/issues/791#issuecomment-70169596.

PIERMARIA COSINA
User Experience Designer | Product Developer

+39 392 4822 633 http://assets.belafonte.co/signature.html#
www.belafonte.co
http://www.belafonte.co/?utm_source=signature&utm_medium=email&utm_campaign=signature

piermariacosina on 15 Jan 2015

I opened the other one already. Thanks for the update though.

morenoh149 on 15 Jan 2015

The problem here in most cases is that the tinymce editing space does not fill up the space reserved for the the editor box. This is how it looks like:

<iframe id="body_ifr">
    <html>
        <head></head>
        <body id="tinymce">
        <p>your content here</p>
        </body>
    </html>
</iframe>

So the editor box here is the iframe and the body element does not fill up 100% height of the iframe. So when click into the iframe you do not always click into the body and hence you do not activate the cursor.

So the solution is to maximize the height of the html element and the body so as to always show the cursor when you click into the tinymce editor.

<iframe id="body_ifr" src='javascript:""'>
    <html style="height: 100%;">
        <head></head>
        <body id="tinymce" style="height: 100%;">
        <p>your content here</p>
        </body>
    </html>
</iframe>

How to achieve that:

setTimeout(function(){ //wait for tinymce to load
    var body = tinymce.get('body').getBody(); //use your textarea id for 'body'
    var html  = $(editor).parent();
    html.css('height', '100%');
    $(body).css('height', '100%');
}, 1000);

Happy coding!

FrontendLead on 19 Mar 2015

Or just use this for your editor css:

html{
    height: 100%;
}
body{
    height: 100%;
}

FrontendLead on 19 Mar 2015

@TechyTimo are you running latest keystone? I believe this was solved https://github.com/keystonejs/keystone/issues/739

morenoh149 on 19 Mar 2015

2 years after, again same problem...
even if I give it a min_height, it have the parent height. So the cursor don't working -_-

tavax on 20 Apr 2017

👍1

For everyone who is still looking for the solution - there is a simple fix for this bug:

Most of text editors when we enter the mouse cursor in any part of the text area it always shows a text cursor, but TinyMCE behaves differently when the text area is not full or when it's blank. TinyMCE only shows the text cursor in the first line or in the part that there's some text. I'm not sure if it's the best way, but manage to fix by putting this CSS rule in the beginning of 'content.css' and 'content.min.css':

html,body{height:100%};

https://community.tinymce.com/communityIdeaDetail?id=08761000000N1lkAAC

If you see a scrollbar in text area, you can easily fix by:

html{height:100%;margin-top:-30px;}body{padding-top:14px;height:100%;overflow:auto;}

That's it :)