javascript - TinyMCE 自定义“文件”菜单栏

Question

有没有办法在 TinyMCE 4.0 中自定义（添加和删除选项等）菜单栏？我无法找到有关编辑器特定部分的任何文档。下图展示了我正在谈论的部分。

Answer 1

第 4 版是一次重大改写，文档有一段时间不同步。

通过实验，我发现可以单独启用/禁用下拉菜单或禁用整个菜单栏。

仅启用特定的下拉菜单：

tinymce.init({
    selector: "textarea",
    menubar: "edit format"
});

禁用菜单栏：

tinymce.init({
    selector: "textarea",
    menubar: false
});

菜单栏配置文档现已添加到 TinyMCE 站点。

此外，如果您想完全自定义整个菜单，请查看菜单配置文档。

Answer 2

我最终通过调整传递给的设置对象中的menu和toolbar属性来自定义菜单栏和工具栏tinymce.init()：

// ...
  menu : {
    edit: { title: 'Edit', items: 'undo redo  | cut copy paste selectall | searchreplace' },
    insert: { title: 'Insert', items: 'link charmap' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | removeformat' },
    table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' }
  },
  toolbar: 'undo redo | bold italic underline | link hr | alignleft aligncenter alignright | blockquote bullist numlist outdent indent | code',
// ...

我通过在源代码中四处寻找.addMenuItem(和找到了每个菜单/按钮的术语.addButton(。

Answer 3

在TinyMCE 4.x版本中，“ code ”插件用于显示/编辑编辑器内容的 HTML 代码。

要控制工具栏，最高 4.0.6 版本，theme_advanced_button<1-n>使用选项，但高于 4.0.6 版本，toolbar或toolbar<1-N>使用选项。

通过将“ code”插件添加到工具栏选项，“工具”菜单将与“源代码”子菜单一起添加（作为按钮“ <>”（图标））。

tinyMCE.init({
    // ......
    // ......
    plugins: "searchreplace code",

    toolbar1: "separator forecolor backcolor code",
    toolbar2: "<<<some buttons list>>>",
    toolbar3: "<<<some buttons list>>>",
    toolbar4: "<<<some buttons list>>>",
});