Как сделать tinymce 4 панель инструментов внешней и всегда видимой?

У меня есть настройки для tinyMCE:

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

и это сработало, как и должно быть, но не удовлетворяет моим потребностям, то, что я хочу, это фиксированная внешняя панель инструментов для нескольких экземпляров редактора, которая не исчезнет когда фокус потерян (событие размытия), которое не соответствует этим настройкам.

Примечание:

удаление inline: true не имеет эффекта!?

Ответы

Ответ 1

Я ищу то же самое здесь. У меня есть несколько хакерский подход, который я обнаружил на форумах TinyMCE, и в настоящее время ищущий лучший подход.

Выбрасывая ошибку после запуска события размывания, она предотвращает удаление TinyMCE из редактора.

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

Ответ 2

Если вы хотите, чтобы панель инструментов была внешней, и вы не хотите ее автоматически фокусировать, вот что вы делаете:

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

Ответ 3

Мое понимание - у каждого редактора есть своя панель инструментов.

При использовании 'fixed_toolbar_container' он просто отображает текущую панель инструментов редактора в этом контейнере.

Если ни один редактор не выбран, он не может знать, какую панель инструментов редактора вы хотите отобразить - к сожалению, она еще не имеет возможностей для чтения разговора;)

Возможная обстановка для вас будет заключаться в том, чтобы как-то убедиться, что редактор всегда выбран, поэтому панель инструментов всегда будет отображаться. Извините, нет времени, чтобы выяснить, как, может быть, другие могут расширяться (возможно, blur()/focus()?).