I'm using the tinymce-rails gem which uses TinyMCE 4 and I'm loading the link plugin and all this is initiated after/in a colorbox popup.
TinyMCE editor is working perfectly but the link button brings up a dialog to add/edit a link, but none of the fields except the target are available for editing.
below is the related code:
setup_new_message: ->
tinyMCE.init
selector: '.tinymce'
plugins: "textcolor link"
menubar: false
toolbar: "formatselect | fontselect | bold italic underline | forecolor | alignleft aligncenter alignright | bullist numlist | link"
height: 250
$(document).on 'focusin', (e) ->
if $(e.target).closest(".mce-window").length
e.stopImmediatePropagation()
I found the $(document).on 'focusin' in other stackoverflow question/answers but this is not working for me. It does fire the e.stopImmediatePropagation() but it is not working as everyone said it would.
Any thoughts? Thanks in advance.
I found the answer once I narrowed down the actual issue was that I was loading the TinyMCE into a jquery.colorbox popup. Colorbox prevents any type of focus event/action to happen outside of its defined container. Where as TinyMCE pops its stuff up through iframes, not actually in the colorbox container.
the fix was simple: in colorbox options set trapFocus: false and all works as it should. Understand tho, this means the user can tab out of the focused colorbox to elements behind the overlay.