Any way to prevent losing focus when clicking an input text out of tinymce container?

Question

I've made this tinymce fiddle to show what I say.

Highlight text in the editor, then click on the input text, highlight in tinyMCE is lost (obviously).

Now, I know it's not easy since both, the inline editor and the input text are in the same document, thus, the focus is only one. But is there any tinymce way to get like an "unfocused" highlight (gray color) whenever I click in an input text?

I'm saying this because I have a customized color picker, this color picker has an input where you can type in the HEX value, when clicking OK it would execCommand a color change on the selected text, but it looks ugly because the highlight is lost.

I don't want to use an iframe, I know that by using the non-inline editor (iframe) is one of the solutions, but for a few reasons, i can't use an iframe text editor.

Any suggestion here? Thanks.

P.S: Out of topic, does any of you guys know why I can't access to tinymce object in the tinyMCE Fiddle ? looks like the tinyMCE global var was overwritten by the tinymce select dom element of the page itself. I can't execute a tinyMCE command lol.

Answer 1

Another solution:

http://fiddle.tinymce.com/sBeaab/5

P.S: Out of topic, does any of you guys know why I can't access to tinymce object in the tinyMCE Fiddle ? looks like the tinyMCE global var was overwritten by the tinymce select dom element of the page itself. I can't execute a tinyMCE command lol.

Well, you can access the tinyMCE variable and even execute commands.

Answer 2

this line is wrong

var colorHex = document.getElementById("colorHex")

colorHex contains input element, not value.

var colorHex = document.getElementById("colorHex").value

now it works ( neolist couldn't load, so I removed it )

http://fiddle.tinymce.com/DBeaab/1