how to make tinymce 4 toolbar external and always visible?

javascript, tinymce, tinymce-4

Solution

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

Problem

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

Original source