Блог

У меня есть TinyMCE и я хочу создать собственный формат стиля, но он не отображается в моем 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'}}
    }
});
  

используйте класс tinymce и обновите свой css и не забудьте указать важные

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

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

Если вы хотите, чтобы они находились вне редактора, все, что вам нужно сделать, это добавить несколько кнопок под вашей текстовой областью:

  <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>
  

В качестве альтернативы вы можете написать плагин и интегрировать функцию в свой редактор.