如何在TinyMCE 4 的工具栏上增加标题选项(H1,H2,H3...)

发布于 2019年06月29日 01:52:12 - 技术分享 - Web - TinyMCE

创建插件

tinyMCE.PluginManager.add('stylebuttons', function(editor, url) { 
    ['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){ 
    editor.addButton("style-" + name, { 
     tooltip: "Toggle " + name, 
     text: name.toUpperCase(), 
     onClick: function() { editor.execCommand('mceToggleFormat', false, name); }, 
     onPostRender: function() { 
      var self = this, setup = function() { 
       editor.formatter.formatChanged(name, function(state) { 
        self.active(state); 
       }); 
      }; 
      editor.formatter ? setup() : editor.on('init', setup); 
     } 
    }) 
    }); 
}); 

工具栏调用

tinyMCE.init({ 
    selector: '#id', 
    toolbar: "undo redo | style-p style-h1 style-h2 style-h3 style-pre style-code", 
    plugins: "stylebuttons", 
}); 

感谢:https://stackoverrun.com/cn/q/5395366

转载声明:本站文章无特别说明,皆为原创,版权所有,转载请注明:Dy大叔的日常

转载自 如何在TinyMCE 4 的工具栏上增加标题选项(H1,H2,H3...) | XDY.ME@Dy大叔的日常

XDY.ME@Dy大叔的日常