TinyMCE add格式

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）的，有莫名其妙的解決方案中的代碼的第二部分要做到這一點ALS呢？

Answer 1

你可以使用TinyMCE的初始化和設置PARAM添加自定義樣式

// 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); 
      }); 
     } 
    }); 
});