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

Answer 3

我的理解是每个编辑都拥有它自己的工具栏。

使用＆＃39; fixed_toolbar_container＆＃39;它只是在该容器中显示当前编辑器的工具栏。

如果没有选择任何编辑器，它就无法知道您想要显示哪个编辑器的工具栏 - 遗憾的是它还没有阅读能力;）

可能的解决方法是以某种方式确保始终选择编辑器，因此将始终显示工具栏。对不起，没有时间弄清楚如何，但也许其他人可以扩展（模糊（）/焦点（）可能？）。

Answer 4

使用auto_focus：true初始化编辑器，css中的以下内容将强制工具栏始终可见。虽然在编辑器上进行聚焦之前工具栏不存在。

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

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

注意：

4 个答案: