创建和使用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之间的词。