1

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!

Bojangles
  • 467
  • 1
  • 8
  • 21

2 Answers2

3

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.

John Naegle
  • 8,077
  • 3
  • 38
  • 47
0

Add link as option in plugins plugins: "link

Super Kai - Kazuya Ito
  • 22,221
  • 10
  • 124
  • 129
fatma zayed
  • 51
  • 1
  • 4
  • 3
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 30 '22 at 09:59