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!?

Answer 1

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');
        });
    }
});

Answer 2

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;
    });
  }
}

Answer 3

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?).

Answer 4

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;
}