How to programatically remove focus from an inline tinyMCE instance?

Question

When editing a div using the inline mode of tinyMCE, clicking outside of the editor will deactivate it (hide the toolbar, and basically return the div to "normal"). This is good.

There are some cases when the editor stays where it is even after losing focus:

• Hitting tab will make the editor lose focus (and bring focus to the address bar, for example), but the editor and toolbar stay there.
• Clicking on an element whose click event is captured by another script (like a Jquery-UI-Sortable element) will take focus away from the editor but keep the editor there.

In both cases, I have to click the body of the editor and then click out of it to get it to deactivate and disappear.

Is there a way to tell the inline editor instance to deactivate?

Answer 1

For anyone looking for a solution, you can find the solution here

How do you clear the focus in javascript?

document.activeElement.blur()

Answer 2

This question is old, but I just have to answer for someone who might want to do the same thing.

in other to remove focus, you can add this line of CSS to your global CSS file

.mce-edit-focus { outline: none !important; }

That's all, hope it helps!

Answer 3

I can try below ways.

1. Remove class from tinymce editor. $(editor.bodyElement).removeClass("mce-edit-focus")

2. One can define dummy(no action) button in HTML page and call onclick of that button.

   document.getElementById("noAction").click();