使用jQuery创建并注册TinyMCE插件

使用jQuery TinyMCE,我正在尝试注册一个自定义的“插件”(它实际上只是工具栏中的一个菜单)

我试图让这个注册,但我在http://www.tinymce.com/tryit/menu_button.php上找到的代码似乎不适用于TinyMCE的jquery版本。 理想情况下,我也希望将自定义插件代码放在单独的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('Click to view this email in a browser'); } }); } }); // 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); 

你的问题没有说明你是否真的试图从插件文件夹中加载这个插件 – 所以这个语句实际上可能不适用于你的问题,但我会添加完整性:

因为TinyMCE的Jquery版本改变了启动事物的顺序(例如:在你调用$('textarea').tinymce(...)之前你不能引用tinymce对象$('textarea').tinymce(...) ,你不能添加插件的方式与其网站上的简单插件示例相同。您必须创建一个独立的插件。

我将假设您已按照如何在此处创建TinyMCE插件的说明进行操作。

您遇到的问题是您正在加载插件: plugins: "marcusinserts,...但是在插件的底部,您正在使用参考注册插件

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

尝试将其更改为:

tinymce.PluginManager.add('marcusinserts', tinymce.plugins.MarcusInserts); (注意删除 – 马库斯和插入之间的单词。