通过菜单项在TinyMCE中切换工具栏可见性

时间:2015-04-20 15:42:51

标签: tinymce tinymce-4

如何通过菜单项切换TinyMCE工具栏的可见性。菜单项的复选标记状态应对应于工具栏的可见性。请注意,我使用的是TinyMCE 4.1.9,它似乎不再具有controlManager属性。

这是我到目前为止所做的:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>  
  <script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
  <script type="text/javascript">
    tinymce.init({
        selector: "textarea",
        menu: {
            edit   : {title : 'Edit'  , items : 'undo redo'},
            view   : {title : 'View'  , items : 'visualaid secondarytoolbar'}
        },
        toolbar1: "undo redo", 
        toolbar2: "fontselect fontsizeselect",     
        setup: function(editor) {
          editor.addMenuItem('secondarytoolbar', {
              text: 'Secondary toolbar',
              selectable: true,
              context: 'view',
              onclick: function() {
                  // Toggle "toolbar2" on/off and set checkmark on menu item accordingly.
                  // ?
              }
          });
        }
     }); 
  </script>
</head>
<body>
  <textarea></textarea>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我一直在做类似的事情,但无法弄清楚如何显示复选标记。你的帖子清除了那部分给了我。以下是我显示/隐藏其他工具栏行的方法。你可以在这里找到更多信息: http://www.tinymce.com/forum/viewtopic.php?id=32854

editor.on("BeforeRenderUI", function (e) {
    editor.theme.panel.find("toolbar").slice(1).hide();
});

editor.addMenuItem("advancedToolbar", {
    text: "Show Advanced Toolbar",
    selectable: true,
    context: "tools",
    onclick: function () {
        if (!this.active()) {
            this.active(true);
            editor.theme.panel.find("toolbar").slice(1).show();
        } else {
            this.active(false);
            editor.theme.panel.find("toolbar").slice(1).hide();
        }
    }
});