初始化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。