how to make tinymce 4 toolbar external and always visible?

Question

I have this settings for tinyMCE:

tinymceOptions = {
  inline: true,
  resize: false,
  plugins: "textcolor",
  selector: "div.editing",
  toolbar: "forecolor backcolor",
  fixed_toolbar_container: ".my-toolbar"
}

and that worked as I it should be, but doesn't satisfy my needs, what I want is a fixed external toolbar for multiple editor instances that will not disappear when focus is lost (blur event) which not the case with this settings.

Note:

removing the inline: true has no effect!?

score 9 · Answer 1 · answered Jan 10 '17 at 00:26

9

If you want the toolbar to be external, and you don't want to auto-focus it, here's what you do:

tinymceOptions = {
  inline: true,
  resize: false,
  plugins: "textcolor",
  selector: "div.editing",
  toolbar: "forecolor backcolor",
  fixed_toolbar_container: ".my-toolbar",
  init_instance_callback: function (editor) {
    // This will trick the editor into thinking it was focused
    // without actually focusing it (causing the toolbar to appear)
    editor.fire('focus');
  },
  setup: function (editor) {
    // This prevents the blur event from hiding the toolbar
    editor.on('blur', function () {
        return false;
    });
  }
}

answered Jan 10 '17 at 00:26

cdmckay

31,832
25
83
114

1

Nice trick. I don't know what consequences `return false;` in `blur` event callback may have on TinyMCE behavior. But setting `.my-toolbar>.mce-panel{display:block !important;}` in CSS seems like a safer option. `editor.fire('focus');` is still needed though. – Slava Mar 21 '17 at 13:32
Yeah, I ended up writing my own toolbar in Angular that just made calls to TinyMCE via `execCommand` because I wasn't comfortable with this hack. It also let me style the toolbar to match my app and use Angular components in it. – cdmckay Mar 21 '17 at 17:01

score 7 · Accepted Answer · answered Oct 05 '15 at 17:22

I'm looking for the same thing here. I have a somewhat hacky approach that I discovered on the TinyMCE forums and am currently looking for a better approach.

By throwing an error after the blur event is fired it prevents TinyMCE's cleanup from removing the editor.

tinymce.init({
    menubar: false,
    plugins: "advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media textcolor table contextmenu paste wordcount",
    toolbar: [
    "undo redo removeformat searchreplace code",
    "styleselect fontsizeselect forecolor",
    "bold italic underline strikethrough superscript subscript",
    "alignleft aligncenter alignright alignjustify | outdent indent blockquote",
    "bullist numlist table | link image media"
    ],
    selector: '.selected .inline-preview',
    inline: true,
    autofocus: true,
    fixed_toolbar_container: 'section[data-sidebar-text-controls] > div',
    init_instance_callback: function () {
        tinymce.activeEditor.focus();
    },
    setup: function (editor) {
        editor.on('blur', function () {
            throw new Error('tiny mce hack workaround');
        });
    }
});

Nice workaround! Just replace "throw new Error('tiny mce hack workaround');" to "return false;" to avoid console error output. — Robertas Uldukis, Dec 03 '15 at 14:53
Seems like `e.stopImmediatePropagation()` will work as well. — Azmisov, Jan 08 '17 at 06:23
The first parameter to the `init_instance_callback` is the editor, so you don't need to use the `tinymce.activeEditor` global. Also, if you call focus it will literally focus on the editor, which may not be what you want. — cdmckay, Jan 09 '17 at 23:53

score 0 · Answer 3 · answered Oct 28 '14 at 00:44

My understanding is each editor has it's own toolbar.

When using 'fixed_toolbar_container' it simply displays the current editor's toolbar in that container.

If no editor is selected it can't know which editor's toolbar you want displayed - sadly it doesn't yet have mind reading capabilities ;)

A possible work-around for you would be to somehow make sure an editor is always selected, therefore a toolbar will always be displayed. Sorry, no time to figure out how but maybe others can expand (blur()/focus() maybe?).

score 0 · Answer 4 · answered Mar 26 '18 at 02:01

With an editor initialized with auto_focus: true, and the following in the css will force the tool bar to always be visible. Though the toolbar does not exist until focus is made on the editor.

.mce-tinymce.mce-tinymce-inline.mce-container.mce-panel {
    display: block !important;
}

how to make tinymce 4 toolbar external and always visible?

Note:

4 Answers4