tinyMCE 4 Pop-Up Tools Lose Focus in Colorbox Lightbox

I'm trying to move my website to tinyMCE 4, but I've run across a few stumbling blocks since version 4 is still in beta and the documentation on http://www.tinymce.com/ is pretty sparse at this point. I've been able to solve most of my issues, but this onea has me stumped and I'm not even sure how to determine where things are going wrong.

I set up a test site at http://ymsrunning.com/mce.php. You'll notice that using any of the toolbar buttons on the main page works fine. You can type in the input boxes and they start with focus.

The problem is when you click on the link to bring up a Colorbox, those same tools do not work. Even though the pop-up window will appear, the inputs do not have focus and you cannot click on them to input anything.

tinyMCE creates their own input box to match the theme, but I can't figure out what they do to the focus. Any thoughts on how I should proceed or, even better, what the problem is, would be much appreciated.

Answers


It turns out this wasn't an issue with tinyMCE, it was an issue with Colorbox. Colorbox prevents focus on anything outside of its container and tinyMCE creates its elements outside the Colorbox container. There is a function in the Colorbox code called "trapFocus" that creates this behavior. The code is below.

function trapFocus(e) {
if ('contains' in $box[0] && !$box[0].contains(e.target)) {
        e.stopPropagation();
        $box.focus();
    }
}

Commenting out the content inside the function, but not the function itself lets elements retain and accept focus and prevents Colorbox from messing with it. I hope this helps anyone else who runs into this issue.


Need Your Help

Enum's working with .setText in android/java

java android enums stub settext

I am building a Android app in Java, use a Enum variable in a .setText scenario for a XML TextView, i fully understand my Enum is in the wrong data type, but i need your help to work out a alternat...

Body onload handler in a content page

c# javascript master-pages

How do I call a Javascript function on the body load of a content page? As I can not use the body load of my master page's body onload in this.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.