使TinyMCE“Context-Toolbar”可自定义

Question

我正在尝试自定义编辑区域中存在的上下文工具栏：

• 我希望“内容”可以像其他元素一样进行编辑，但是TinyMCE不允许我这样做，它总是向我显示“编辑/删除”上下文工具栏，
• 我想将“编辑”功能分配给另一个将显示我的自定义弹出菜单的元素，

即使在TinyMCE网站上也没有关于它的信息，

如何自定义该工具栏？

Answer 1

在Tinymce Init功能中，将上下文工具栏添加到所需的dom元素并添加自定义按钮，如下所示：

tinymce.init({
         selector: '#main'
         , setup: function (main) {                
            main.addContextToolbar('span#content', 'editContent | deleteContent');//first parameter is the selector and second is a list of custom buttons list separated by pipe
            main.addButton('editContent', {
               icon: 'fa fa-pencil' //using font-awesome icons
               , tooltip: "Edit"
               , onclick: function (e) {
                  //Logic to make the content editable.
               }
            });
            main.addButton('deleteContent', {
               icon: 'fa fa-close' //using font-awesome icons
               , tooltip: "Delete"
               , onclick: function (e) {
                  //Logic to delete the content.
               }
            });
        }
    });