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

Question

在添加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。