jquery - TinyMCE show menu on focus

Question

I am tinyMCE in my project.

I have two text area. I need to only show the controls for the active one. I had two options:

1. Have a common control for both.
2. Hide the controls of the inactive editor.

I couldn't figure out the first option. I went with the second approach.

Now I am able to trigger events when the editor in on focus. I need help with removing the menu and tools from the editor when it goes out of focus.

Here is the code as to how I am approaching the second option:

setup : function(ed) {
            ed.on("focusout", function() {
                tinyMCE.activeEditor.execCommand('mceSetAttribute','toolbar','false');
           console.log(tinyMCE.activeEditor.execCommand('mceSetAttribute','toolbar','false'));
            });
            ed.on("focus", function() {

                });
        }

Answer 1

这适用于 tinyMCE 4（假设您使用的是 jQuery）：

setup: function(editor) {
    editor.on("init", function() {
        editor.contentParent = $(this.contentAreaContainer.parentElement);
        editor.contentParent.find("div.mce-toolbar-grp").hide();
    });
    editor.on('focus', function () {
        editor.contentParent.find("div.mce-toolbar-grp").show();
    });
    editor.on('blur', function () {
        editor.contentParent.find("div.mce-toolbar-grp").hide();
    });
}

小提示：如果使用 AngularJS ，您也可以使用angular.element(...)来代替。$(...)