CODEWITHSUNDEEP
jqueryjquery-uitinymcetinymce-4tinymce-3
Deepak Puthraya
Deepak Puthraya

Reputation: 1435

TinyMCE show menu on focus

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() {

                });
        }

Upvotes: 1

Views: 1198

Answers (1)

John Rix
John Rix

Reputation: 6693

This works for tinyMCE 4 (assuming you are using 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();
    });
}

Minor note: You can also use angular.element(...) in place of $(...) if using AngularJS.

Upvotes: -1

Related Questions