TinyMCE добавить формат

Question

Я бы хотел добавить пользовательские форматы в мой плагин TinyMCE.Я использую JQuery-версию плагина.

Я выяснил, что, добавив к editor_template.js в моей теме карту следующего кода:

_createBlockFormats : function() {
                        var k, i = {
                            p : "advanced.paragraph",
                            address : "advanced.address",
                            pre : "advanced.pre",
                            h1 : "advanced.h1",
                            h2 : "advanced.h2",
                            h3 : "advanced.h3",
                            h4 : "advanced.h4",
                            h5 : "advanced.h5",
                            h6 : "advanced.h6",
                            div : "advanced.div",
                            blockquote : "advanced.blockquote",
                            code : "advanced.code",
                            dt : "advanced.dt",
                            dd : "advanced.dd",
                            samp : "advanced.samp",
                            **custom_format: "Custom Format"** THIS IS ADDED                        }

и в файле вя установил для textarea значение TinyMCE. Я использовал следующий код.

$('textarea.tinymce').tinymce({

    script_url : '<?=website_url.cmmdir?>js/tinymce/jscripts/tiny_mce/tiny_mce.js',

    //language: "nl",
    // General options
    mode : "exact",
    //elements : "ta_intro, ta_content",
    theme : "advanced",
    //plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
    plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template, imagemanager",

    theme_advanced_toolbar_align : "left",
    theme_advanced_toolbar_location : "top",        
    theme_advanced_resizing : false,

    // Theme options
    //plugins : "imagemanager,advimage,table,paste,media",
    content_css : "<?php echo website_url.cmmdir ?>tools/tinymce/style.css",

    theme_advanced_disable: "sup, sub, help, cleanup, anchor",
    theme_advanced_buttons1 : "bold,italic,underline,forecolor<?php if($RBAC->getCurrentRoleId() == super_user_id || $_SESSION['usr']->role_id == 4) { echo ",code"; } ?>,formatselect,removeformat",
    theme_advanced_buttons2 : "copy,|,bullist,numlist,|,undo,redo,|,link,unlink,anchor,cleanup,help,",
    theme_advanced_buttons3 : "cleanup,|,visualaid,tablecontrols",
    theme_advanced_blockformats : "p,h1,h2,h3,h4,custom_format",
    forced_root_block : false,
    force_br_newlines : true,
    force_p_newlines : false,
    paste_create_paragraphs : false,
    paste_create_linebreaks : false,
    paste_use_dialog : false,
    paste_auto_cleanup_on_paste : true,
    paste_convert_middot_lists : false,
    paste_unindented_list_class : "unindentedList",
    paste_convert_headers_to_strong : true,
    paste_insert_word_content_callback : "convertWord",
    relative_urls : false,
    width : "802px",

        // THIS IS THE PART WHERE I DECLARE A STYLE CLASS TO THE JUST CREATED FORMATS
    formats : {
        custom_format: {inline : 'span', 'classes' : 'custom_format'}
        }   
});

Теперь я хотел бы избавиться от первой части (редактирование editor_template.js), есть ли какое-то решение для этогоА так во второй части кода?

Answer 1

Вы можете добавить пользовательские стили, используя tinymce init и параметр настройки

    // styles
    style_formats_paragraph: [
    {
        title: 'Royal Blue Text1',
        block: 'p',
        classes: 'royalbluetext',
        exact: true
    }, {
        title: 'Blue Text',
        block: 'p',
        classes: 'bluetext',
        exact: true
    }
    ],

    setup : function(ed) {


    // register styles (add them to the formatter)
    ed.onInit.add(function(ed, e) {
        ed.formatter.register(fmt.title, fmt);

        // registriere Absatzstile
        formats = ed.getParam('style_formats_paragraph');
        if (formats) {
            tinymce.each(formats, function(fmt) {
                ed.formatter.register(fmt.title, fmt);
            });
        }
    });
});