TinyMCE 4 can't type in provided plugin text fields

Question

Using TinyMCE 4.1.5 under JS (w/ JQuery 1.11.1 and several JQuery plugins like form and ui). The TinyMCE version I'm using is not the one with embedded JQuery.

The editor comes up fine and I can type directly in it without issue. Using only the tinymce-provided plugins, all functions that use buttons or non-text field controls work fine.

However, the text fields in the plugins (such as in link or insert video) won't let me type into the fields or select other text fields (so it seems like a focus issue).

There's a fiddle at http://fiddle.tinymce.com/bzeaab/16, and here's a more specific init code from in the application:

var _clear_css_cache;
_clear_css_cache = '/javascripts/canonical/tinymce/skins/lightgray/' +
                   'content.min.css?' +
                   new Date().getTime();

var _toolbar_1, _toolbar_2;
_toolbar_1 = 'formatselect, |, ' +
             'bold, italic, underline, strikethrough, ' +
                'subscript, superscript, |,' +
             'outdent, indent, blockquote, |,' +
             'alignleft, aligncenter, alignright, alignjustify';

_toolbar_2 = 'bullist, numlist, table, charmap, emoticons |,' +
             'link, unlink, |,' +
             'image, media, |,' +
             'code, preview |,' +
             'pasteword, print |,' +
             'undo, redo,';

var _contextmenu;
_contextmenu = 'link image inserttable | ' +
               'cell row column deletetable';

tinymce.init({
  selector: 'textarea.tinymce',
  toolbar: [_toolbar_1, _toolbar_2],
  plugins: [
    'advlist autolink autosave code charmap contextmenu emoticons image', 
    'lists link media paste preview print table'
  ],
  contextmenu: _contextmenu,
  theme: 'modern',
  content_css: _clear_css_cache,
  menubar: false,
  statusbar: false,
  convert_urls: false,
  relative_urls: false,
  invalid_elements: 'script'
});

And to insert into target div (with a child of 'textarea.tinymce'), I use a pretty standard call:

function do_wysiwyg(_div) {
  tinymce.execCommand('mceAddEditor', true, $(_div).attr('id'));
});

I've tried several browsers local and in BrowserStack and none of the plugin text fields work in any of them, even though the editor does.

See also using tinymce with blockui.

Thoughts? Thanks in advance.

UPDATE (10/7/2014): Was wondering if a z-index is interfering but so far no luck during experimentation. This is an upgrade from a very old tinymce install and the plugins worked fine there, so was expecting no conversion outside of tinymce code/invocation itself.

UPDATE 2 (10/7/2014): have a fiddle now: http://fiddle.tinymce.com/bzeaab/16. Appears to only occur when using BlockUI ! Am betting that there's a focus trap from BlockUI now.

Cower

Answer 1

One solution that seems to work is to pass bindEvents = false in the .blockUI call as an option (along with msg, etc. See http://fiddle.tinymce.com/bzeaab/17 for how original fiddle (http://fiddle.tinymce.com/bzeaab/16) was amended to allow the plug in to work.

My concern is that this approach unbinds everything in the blockUI overlay, not just tinymce plugins, so may be too overreaching.

Please comment or post a different answer if you have better advice than this. I won't accept this as the answer until others have a chance to weigh in. Thanks!

Cower

If someone else has a better answer, I'm happy to reassign the answer approval. – Cower

This seems like a better solution. – Nw

Tried you fiddle and it works -- with one problem: the text you type in the first field appears in the second field. Tested in chrome and opera. – Absorbing