初始化tinymce时重新定义格式样式

Question

这是我添加 tinymce 初始化代码之前我的 tinymce 的样子

            tinymce.init({
              selector: 'textarea',  // change this value according to your html
              toolbar: "styleselect",
              style_formats: [
                {title: 'main title', inline: 'span', styles: {'text-decoration':'underline','text-decoration-color':'#f00', color: '#000','font-size': '26px','font-weight' : '700', 'display': 'inline-block', 'margin-bottom': '55px','text-align':'center','width':'100%'}},
                {title: 'Bold text', inline: 'b'},
                {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                {title: 'Cowanbanga', inline: 'span', classes: 'example1'},
                {title: 'Example 2', inline: 'span', classes: 'example2'},
                {title: 'Table styles'},
                {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
              ]
            });

这是上面代码之后的样子：

我该怎么做才能在不丢失所有界面按钮的情况下仍然保留 style_formats。我希望他们留下来/

谢谢

Answer 1

您在那里所做的是 - 您重新定义了工具栏属性，默认情况下类似于：undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent，只有一个 styleselect。考虑将 styleselect 插入默认值。

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",
  style_formats: [
 {title: 'main title', inline: 'span', styles: {'text-decoration':'underline','text-decoration-color':'#f00', color: '#000','font-size': '26px','font-weight' : '700', 'display': 'inline-block', 'margin-bottom': '55px','text-align':'center','width':'100%'}},
 {title: 'Bold text', inline: 'b'},
 {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
 {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
 {title: 'Cowanbanga', inline: 'span', classes: 'example1'},
 {title: 'Example 2', inline: 'span', classes: 'example2'},
 {title: 'Table styles'},
 {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
  ]
});

<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js"></script>
<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

您可以找到所有可能的按钮和其他控件的列表 here。

初始化tinymce时重新定义格式样式

redefining format style when initializing tinymce

tinymce

tinymce-4