jquery - Tinymce如何减少多个实例的选项

Question

正如您从下面的代码中看到的，我们在 CMS 的管理区域中大量使用 TinyMce，并具有不同的选项。我想我可以通过首先用 $.fn.tinymce.defaults = { 覆盖默认选项来使用代码。

• 我是不是完全错了，这永远不会起作用？

• 或者这是这些tinymce限制中的另一个并且应该有效 与其他 jquery 插件一起使用吗？

  $(文档).ready(function() {

  // Location of TinyMCE script
  var script_url = HOME + "/webapp/shared/javascript/tiny_mce/tiny_mce_src.js";
  
  // plugin's default options
  $.fn.tinymce.defaults = {
      // Location of TinyMCE script
      script_url : script_url,
  
      // General options
      theme : "advanced",
      skin: "cirkuit",
      width: "100%",
      height: "500",
      plugins : "advhr,advimage,advlink,advlist,autolink,autosave,contextmenu,directionality,emotions,fullscreen,iespell,inlinepopups,insertdatetime,layer,lists,noneditable,nonbreaking,pagebreak,paste,preview,print,save,searchreplace,style,spellchecker,tabfocus,table,template,wordcount,visualchars,xhtmlxtras,codemagic,media",
  
      // Theme options
      body_class : "content",
      theme_advanced_buttons3 : "",
      theme_advanced_buttons4 : "",
      theme_advanced_blockformats : "p,h2,h3,h4,h5,h6",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",
      theme_advanced_statusbar_location : "bottom",
      theme_advanced_resizing : true,
  
      forced_root_block : "p",
      force_br_newlines : false,
      force_p_newlines : true,
  
      plugin_insertdate_dateFormat : "%d/%m/%Y",
      plugin_insertdate_timeFormat : "%H:%M",
      paste_auto_cleanup_on_paste : true,
      convert_urls: false,
      relative_urls: false,
  
      // Example content CSS (should be your site CSS)
      content_css : HOME+TEMPLATE_HOME+"/css/tinymce.css", //?" + new Date().getTime(),
  
      // File and Image Manager
      file_browser_callback : "openSwampyBrowser"
  }
  
  $('textarea.tinymce').tinymce({
      theme_advanced_buttons1 : "styleselect,formatselect,|,bold,italic,underline,|,bullist,numlist,|,table,|,link,unlink,|,media,image,|,template",
      theme_advanced_buttons2 : ",cut,copy,paste,pastetext,pasteword,|,selectall,undo,redo,|,hr,acronym,charmap,blockquote,|,insertdate,inserttime,|,search,|,cleanup,removeformat,|,codemagic",
  
      valid_elements : "span[class|id],br[class|id],a[href|target|title|class|id],img[src|id|width|height|class|alt],i,"+
      "li[class|id],ul[class|id],ol[class|id],p[class|id],"+
      "table[class|id],th[class|id],tr[class|id],td[class|id],thead,tbody,"+
      "h1[class|id],h2[class|id],h3[class|id],h4[class|id],h5[class|id],h6[class|id],strong[class|id],"+
      "div[class|id]",
  
      template_templates : [
        {
            title : "Paragraph Text",
            src : HOME + "/webapp/shared/javascript/tiny_mce/layouts/paragraph.tpl",
            description : "Adds HTML Paragraph Layout"
        }, {
            title : "Bullet Point List",
            src : HOME + "/webapp/shared/javascript/tiny_mce/layouts/list.tpl",
            description : "Adds HTML Paragraph Layout"
        }, {
            title : "Attribute Column",
            src : HOME + "/webapp/shared/javascript/tiny_mce/layouts/attributes.tpl",
            description : "Adds HTML Paragraph Layout, its easier to delete than add extra code."
        }
       ]
  });
  
  $('textarea.tinymce_list').tinymce({
      theme_advanced_buttons1 : "bullist,|,bold,italic,underline,|,link,unlink,|,cut,copy,paste,pastetext,pasteword,|,selectall,undo,redo,|,codemagic",
      theme_advanced_buttons2 : "",
      valid_elements : "br[class|id],a[href|target|title|class|id],i,li[class|id],ul[class|id],strong[class|id]"
  });
  
  $('textarea.tinymce_simple').tinymce({
      width: "auto",
      height: "auto",
  
      theme_advanced_buttons1 : "bold,italic,underline,|,link,unlink,|,cut,copy,paste,pastetext,pasteword,|,selectall,undo,redo",
      theme_advanced_buttons2 : "",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "center",
      theme_advanced_statusbar_location : "none",
      valid_elements : "br[class|id],a[href|target|title|class|id],i,strong[class|id]",
  
      // Overwrite force <p> with <br /> for new lines
      force_br_newlines : true,
      force_p_newlines : false,
      forced_root_block : ''
  });
  

  });

原文:

$(document).ready(function() {

    // Location of TinyMCE script
    var script_url = HOME + "/webapp/shared/javascript/tiny_mce/tiny_mce_src.js";

    $('textarea.tinymce').tinymce({
        // Location of TinyMCE script
        script_url : script_url,

        // General options
        theme : "advanced",
        skin: "cirkuit",
        width: "100%",
        height: "500",
        plugins : "advhr,advimage,advlink,advlist,autolink,autosave,contextmenu,directionality,emotions,fullscreen,iespell,inlinepopups,insertdatetime,layer,lists,noneditable,nonbreaking,pagebreak,paste,preview,print,save,searchreplace,style,spellchecker,tabfocus,table,template,wordcount,visualchars,xhtmlxtras,codemagic,media",

        // Theme options
        body_class : "content",
        theme_advanced_buttons1 : "styleselect,formatselect,|,bold,italic,underline,|,bullist,numlist,|,table,|,link,unlink,|,media,image,|,template",
        theme_advanced_buttons2 : ",cut,copy,paste,pastetext,pasteword,|,selectall,undo,redo,|,hr,acronym,charmap,blockquote,|,insertdate,inserttime,|,search,|,cleanup,removeformat,|,codemagic",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_blockformats : "p,h2,h3,h4,h5,h6",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        forced_root_block : "p",
        force_br_newlines : false,
        force_p_newlines : true,
        valid_elements : "span[class|id],br[class|id],a[href|target|title|class|id],img[src|id|width|height|class|alt],i,"+
        "li[class|id],ul[class|id],ol[class|id],p[class|id],"+
        "table[class|id],th[class|id],tr[class|id],td[class|id],thead,tbody,"+
        "h1[class|id],h2[class|id],h3[class|id],h4[class|id],h5[class|id],h6[class|id],strong[class|id],"+
        "div[class|id]",

        plugin_insertdate_dateFormat : "%d/%m/%Y",
        plugin_insertdate_timeFormat : "%H:%M",
        paste_auto_cleanup_on_paste : true,
        convert_urls: false,
        relative_urls: false,

        // Example content CSS (should be your site CSS)
        content_css : HOME+TEMPLATE_HOME+"/css/tinymce.css", //?" + new Date().getTime(),

        // File and Image Manager
        file_browser_callback : "openSwampyBrowser",

        template_templates : [
          {
              title : "Paragraph Text",
              src : HOME + "/webapp/shared/javascript/tiny_mce/layouts/paragraph.tpl",
              description : "Adds HTML Paragraph Layout"
          }, {
              title : "Bullet Point List",
              src : HOME + "/webapp/shared/javascript/tiny_mce/layouts/list.tpl",
              description : "Adds HTML Paragraph Layout"
          }, {
              title : "Attribute Column",
              src : HOME + "/webapp/shared/javascript/tiny_mce/layouts/attributes.tpl",
              description : "Adds HTML Paragraph Layout, its easier to delete than add extra code."
          }
         ]
    });

    $('textarea.tinymce_list').tinymce({
        // Location of TinyMCE script
        script_url : script_url,

        // General options
        theme : "advanced",
        skin: "cirkuit",
        width: "100%",
        plugins : "advhr,advimage,advlink,advlist,autolink,autosave,contextmenu,directionality,emotions,fullscreen,iespell,inlinepopups,insertdatetime,layer,lists,noneditable,nonbreaking,pagebreak,paste,preview,print,save,searchreplace,style,spellchecker,tabfocus,table,template,wordcount,visualchars,xhtmlxtras,codemagic,media",

        // Theme options
        theme_advanced_buttons1 : "bullist,|,bold,italic,underline,|,link,unlink,|,cut,copy,paste,pastetext,pasteword,|,selectall,undo,redo,|,codemagic",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        valid_elements : "br[class|id],a[href|target|title|class|id],i,li[class|id],ul[class|id],strong[class|id]",

        paste_auto_cleanup_on_paste : true,
        convert_urls: false,
        relative_urls: false,

        // Example content CSS (should be your site CSS)
        content_css : HOME+TEMPLATE_HOME+"/css/tinymce.css"
    });

    $('textarea.tinymce_simple').tinymce({
        script_url : script_url,

        // General options
        theme : "advanced",
        plugins : "advhr,advimage,advlink,advlist,autolink,autosave,contextmenu,directionality,emotions,fullscreen,iespell,inlinepopups,insertdatetime,layer,lists,noneditable,nonbreaking,pagebreak,paste,preview,print,save,searchreplace,style,spellchecker,tabfocus,table,template,wordcount,visualchars,xhtmlxtras,codemagic,media",

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,|,link,unlink,|,cut,copy,paste,pastetext,pasteword,|,selectall,undo,redo",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "center",
        theme_advanced_statusbar_location : "none",
        theme_advanced_resizing : false,
        valid_elements : "br[class|id],a[href|target|title|class|id],i,strong[class|id]",

        // Force <br /> new lines
        force_br_newlines : true,
        force_p_newlines : false,
        forced_root_block : '',

        paste_auto_cleanup_on_paste : true,
        convert_urls: false,
        relative_urls: false,

        // Example content CSS (should be your site CSS)
        content_css : HOME+TEMPLATE_HOME+"/css/tinymce.css"
    });
});

Answer 1

我的解决方案使用基本的tinymce配置对象，每个实例都向其中添加其特殊设置。这样我只需要为每个实例定义附加设置，而不是所有设置:

var tiny_mce_global_config = {

script_url : '/js/tiny_mce/tiny_mce.js',

// General options
theme : "advanced",
plugins : "contextmenu, nonbreaking, advlist, searchreplace, tabfocus, wordcount",
dialog_type : "modal", 

// Theme options
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,

gecko_spellcheck: true,

button_tile_map: true,
...
};

var config_tinymce_dynamic1 = {
    language : 'de',
    content_css : "mycontent.css",
        editor_css : 'editor.css',

    width: "800",
    height: "40",

    theme_advanced_buttons1 : "code",
    theme_advanced_buttons2 : "",
...
};

$(document).ready(function(){

        init_obj = {element_id:'dynamic1', window: window};
        $.extend(true, config_tinymce_dynamic1, tiny_mce_global_config);
        $.extend(true, init_obj, config_tinymce_dynamic1);
        tinyMCE.execCommand('mceAddFrameControl',false, init_obj); 

});