'TinyMCE and jquery.colorbox
I have TinyMCE opening in jquery.colorbox, everything is working, all the icons are clickable and I can update the textarea via the HTML icon but I can’t click into the actual editor box!
If I open TinyMCE outside Colorbox everything works fine.
Has anyone come across this before and if so how can I fix it?
Latest Edit, not getting any loving here!
I just worked out that this actually almost works perfectly in IE. In Chrome and FF I can’t type into the box but in IE I can, BUT only if I hit "THE ANY KEY" while my cursor has the focus of the box. The text then miraculously appears and I can type and update at will.
Anyone???
Old Edits Below
Could this be a z-index issue, I'm not sure because everything else opens on top of ColorBox, including Insert Image and my file browser. it's just the TextAera that I cant click into!
A More little more info
My website is MVC3 and i'm loading TinyMCE as done in this tutorial: http://www.tugberkugurlu.com/archive/tinymce-html-text-editior-and-asp-net-mvc-setting-it-up-has-become-easy-with-nuget
Anything I can find regarding this problem is loading tinyMCE at the same time as jQuery ColorBox or jQuery Dialog, which yields the same result.
People doing this in PHP and other tech have been having more trouble, in my case everything works but I cant type into the testArea/EditorFor.
I now think z-index has nothing to do with it so i'm going to try and make sure TinyMCE is loaded after ColorBox has completed loading!
Solution 1:[1]
I believe this is because colorbox traps the focus and prevents focus on anything outside the colorbox bounds. TinyMCE creates an iFrame outside the colorbox and you can't click on it.
Try setting trapFocus to false in the colorbox options.
Solution 2:[2]
Add link as option in plugins plugins: "link
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | John Naegle |
| Solution 2 | Kai - Kazuya Ito |