tinyMce：不顯示自己的格式

Question

我有一個tinyMCE和ich watn來制作自己的樣式格式，但是在我的tinymce中沒有顯示。 有人知道出什么事了嗎？ 我必須在哪里放置“格式”按鈕，才能選擇特殊的按鈕？

tinyMCE.init({
    mode: "exact",
    elements: "mytextarea",
    theme: "advanced",
    plugins: "table,paste,wordcount",
    width: "480",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    convert_newlines_to_brs: true,
    invalid_elements : "p",
    forced_root_block: false,
    force_br_newlines: true,
    force_p_newlines: false,
    theme_advanced_statusbar_location: "bottom",
    theme_advanced_buttons1: "forecolor,|,bold,|,pastetext,|,bullist",
    theme_advanced_buttons3: "",
    theme_advanced_buttons2: "",
    style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ],
    formats: {
        alignleft: {selector: 'h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left'},
        aligncenter: {selector: 'h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center'},
        alignright: {selector: 'h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right'},
        alignfull: {selector: 'h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full'},
        bold: {inline: 'span', 'classes': 'bold'},
        italic: {inline: 'span', 'classes': 'italic'},
        underline: {inline: 'span', 'classes': 'underline', exact: true},
        strikethrough: {inline: 'del'},
        customformat: {inline: 'span', styles: {color: '#00ff00', fontSize: '20px'}, attributes: {title: 'My custom format'}}
    }
});

Answer 1

使用tinymce類並更新您的css，不要忘了把重要

.mceLayout
{
width:100%!important;position:relative;

}
.mceListBoxMenu {width:90px!important; height:110px!important;}

Answer 2

如果您希望它們在編輯器之外，您要做的就是在文本區域下方添加一些按鈕：

 <button  onclick="tinymce.activeEditor.formatter.apply('customformat');return false;">Apply custom format</button>
 <button  onclick="tinymce.activeEditor.formatter.remove('customformat');return false;">Remove custom format</button>

或者，您可以編寫一個插件並將該功能集成到編輯器中。