如何使tinymce 4工具栏外部并始终可见？

Question

我有tinyMCE的这个设置:

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

我应该这样做,但不满足我的需求,我想要的是一个固定的外部工具栏,用于多个编辑器实例,当焦点丢失时(模糊事件)不会消失,这与此设置不同.

注意:

删除inline: true没有效果!？

Answer 1

我在这里寻找同样的事情.我在TinyMCE论坛上发现了一种有点hacky的方法,目前正在寻找更好的方法.

通过在模糊事件触发后抛出错误,它可以防止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');
        });
    }
});

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