Question

我有一个小小的MCE和ich watn来制作一个自己的风格格式，但它没有显示在我的tinymce中。有人知道出了什么问题？我在哪里可以按下“Formats”按钮，我可以选择一个特殊的按钮吗？

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>

或者你可以编写一个插件并将该功能集成到你的编辑器中。

tinyMce：未显示自己的格式

2 个答案: