如何直接在tinymce 4的工具栏上取标题(h1,h2,h3)

sau*_*_90 22 tinymce-4

我想直接在工具栏上更改标题(h1,h2,h3)(比如tinymce版本3)因为我在创建新的艺术品时非常使用它.我正在尝试在互联网上搜索,但我没有找到任何答案.请帮我.非常感谢 在此输入图像描述

小智 33

这个答案肯定迟到了,但也许它可以帮助像我这样的人,人们如何寻找同一个问题的答案.我在这里阅读:http://blog.ionelmc.ro/2013/10/17/tinymce-formatting-toolbar-buttons/

首先,您必须创建插件:

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);
         }
     })
  });
});
Run Code Online (Sandbox Code Playgroud)

然后在工具栏中使用它:

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

  • 非常感谢.你让我开心 (2认同)

小智 13

        tinymce.init({
            toolbar: 'undo redo | alignleft aligncenter alignright alignjustify | formatselect fontselect fontsizeselect | bullist numlist | outdent indent',
         });
Run Code Online (Sandbox Code Playgroud)

这是在TinyMCE 4中向工具栏添加H1,Paragraph和其他选项的更快捷方式.

有关完整列表,请参阅:http: //www.tinymce.com/wiki.php/Controls 特别是"核心"部分.这显示了最常用的工具.

  • 据我了解,问题是如何将标题按钮直接放在工具栏上,这意味着对于每种类型的标题都应该有一个单独的按钮。从这个意义上说,答案并不能解决问题。 (2认同)

ato*_*oms 8

使用以下工作对我有用

tinymce.init({
    toolbar: 'formatselect',
    block_formats: 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;',
});
Run Code Online (Sandbox Code Playgroud)