Question

I am developing a custom plugin for the new TinyMCE 4. This plugin utilizes a modal screen. Because I want to use a modal screen/JS service I already developed I chose not to use TinyMce's Window manager.

The problem is that TinyMCE looses its focus as soon as I open my open modal screen. I want TinyMce to keep the toolbars opened, because otherwise I cannot interact with the editor. TinyMCe closes because it receives a blur event (and most likely because it does not know about any opened windows).

An minified problem showing the problem can be found in the following Fiddle. The problem occurs as soon as the Example button is clicked. http://fiddle.tinymce.com/pudaab/1

The shortened code is attached below:

tinymce.PluginManager.add('example', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('example', {
        text: 'My button',
        icon: false,
        onclick: function() {
            var selection = editor.selection,
                dom = editor.dom,
                selectedElm,
                anchorElm;

            // Focus the editor since selection is lost on WebKit in inline mode
            editor.focus();

           // Open a modal screen using bootstrap
            $('#elem').modal();

            // Note: As soon as modal opens TinyMce receives a blur event and disables the toolbar
        }
    });
});
Was it helpful?

Solution

I finally managed to solve it myself. The trick is to call editor.nodeChanged() before calling the modal screen. Then when you close your modal screen you call editor.focus().

Thanks for the help though!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top