創建和使用jQuery

Question

登記在TinyMCE插件使用jQuery TinyMCE的，我想註冊一個自定義的「插件」（它實際上只是在工具欄中的菜單）

我試圖讓這個註冊，但我在http://www.tinymce.com/tryit/menu_button.php上找到的代碼似乎無法與jQuery版本的TinyMCE一起使用。理想情況下，我希望我的自定義插件代碼也在一個單獨的js文件中。

TinyMCE的初始化腳本

// Start TinyMce Editor 
    $('#Template_Html').tinymce({ 
     // Location of TinyMCE script 
     script_url: '@Url.Content("~/Scripts/tinymce/tiny_mce.js")', 

     // General options 
     theme: "advanced", 
     plugins: "marcusinserts,autolink,lists,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,advlist", 

     // Theme options 
     theme_advanced_buttons1: "fullscreen,preview,code,|,cleanup,removeformat,|,undo,redo,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,justifyleft,justifycenter,justifyright,justifyfull,|,outdent,indent,blockquote,|,bullist,numlist,|,sub,sup,|,template,viewhtmlversion,taginserts", 
     theme_advanced_buttons2: "bold,italic,underline,strikethrough,|,formatselect,|,link,unlink,anchor,image,|,forecolor,backcolor,|,tablecontrols,|,charmap,iespell,advhr", 
     theme_advanced_buttons3: "", 
     //theme_advanced_buttons3: "tablecontrols,|,hr,visualaid,|,sub,sup,|,charmap,iespell,advhr", 
     //theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
     theme_advanced_toolbar_location: "top", 
     theme_advanced_toolbar_align: "left", 
     theme_advanced_statusbar_location: "bottom", 
     theme_advanced_resizing: false, 

     // Example content CSS (should be your site CSS) 
     //content_css:'/Portal/Content/admin.css', 

     // Drop lists for link/image/media/template dialogs 
     template_external_list_url: "lists/template_list.js", 
     external_link_list_url: "lists/link_list.js", 
     external_image_list_url: "lists/image_list.js", 
     media_external_list_url: "lists/media_list.js", 

     // Preview options 
     plugin_preview_width: "725", 
     plugin_preview_height: "600", 

     // Replace values for the template plugin 
     template_replace_values: { 
      username: "Some User", 
      staffid: "991234" 
     }, 

     // View HTML Version insert button 
     setup: function (ed) { 
      ed.addButton('viewhtmlversion', { 
       title: 'Insert View HTML version link', 
       image: '@Url.Content("~/Scripts/tinymce/themes/advanced/img/custom-icon-view-html.gif")', 
       onclick: function() { 
        ed.focus(); 
        ed.selection.setContent('<a href="{VR_HOSTED_LINK}">Click to view this email in a browser</a>'); 
       } 
      }); 
     } 
    }); 
    // End TinyMce Editor 

我試圖創建的插件和設置：

tinymce.create('tinymce.plugins.MarcusInserts', { 
createControl: function (n, cm) { 
    switch (n) { 
     case 'taginserts': 
      var c = cm.createMenuButton('taginserts', { 
       title: 'Tag Inserts', 
       image: '/Scripts/tinymce/themes/advanced/img/custom-icon-view-html.gif', 
       icons: false 
      }); 

      c.onRenderMenu.add(function (c, m) { 
       m.add({ title: 'View in Browser', onclick: function() { 
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 1'); 
       } 
       }); 

       m.add({ title: 'Forward Link', onclick: function() { 
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2'); 
       } 
       }); 

       m.add({ title: 'Social Media', onclick: function() { 
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2'); 
       } 
       }); 
      }); 

      // Return the new menu button instance 
      return c; 
    } 

    return null; 
} 
}); 

// Register plugin with a short name 
tinymce.PluginManager.add('marcus-inserts', tinymce.plugins.MarcusInserts); 

Answer 1

你的問題沒有說明無論是否實際上是試圖加載這個插件從插件文件夾 - 所以這個聲明可能並不適用於你的問題，但我會補充完整性：

因爲JQuery版本的TinyMCE變化（例如：在調用$('textarea').tinymce(...)之前，不能引用tinymce對象，因此無法以與其網站上的簡單插件示例相同的方式添加插件。你必須創建一個獨立的插件。

我會假設你已經跟着上How to create an TinyMCE plugin here.

你有問題的指示是，你加載插件：plugins: "marcusinserts,...，但在你的插件的底部，你「再與參考註冊插件

tinymce.PluginManager.add('marcus-inserts', tinymce.plugins.MarcusInserts);

嘗試改變，爲：

tinymce.PluginManager.add('marcusinserts', tinymce.plugins.MarcusInserts);（注意刪除單詞marcus和inserts之間的詞。