制作TinyMCE的“上下文工具栏”可定制

Question

我想自定义背景，工具栏，其现有的在编辑区：

• 我想“内容”到editible像其他的元素，但TinyMCE的我总是向我显示“编辑/删除”上下文工具栏，
• 我想将该“编辑”功能分配给另一个将显示我的自定义弹出式菜单的元素，

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

如何自定义该工具栏？

Answer 1

在TinyMCE的初始化函数，添加一个关联工具栏到所需的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. 
       } 
      }); 
     } 
    });