tinymce 使用四-为tinymce添加一个plugin

2012-11-19

tinymce 应用四---为tinymce添加一个plugin如何为TinyMce写一个插件1. 目录切换到tiny_mce\plugins，新建

tinymce 应用四---为tinymce添加一个plugin
如何为TinyMce写一个插件

1. 目录切换到tiny_mce\plugins，新建一个文件夹：myplugins

2. 目录切换到tiny_mce\plugins\myplugins

     a. 新建一个文件夹 img, 并在其目录下添加一个example.gif, 目录应为tiny_mce\plugins\myplugins\img\example.gif

     b. 在目录tiny_mce\plugins\myplugins下，新建editor_plugin.js

     c. 在目录tiny_mce\plugins\myplugins下，新建test.html

3. 目录切换到tiny_mce\langs，打开en.js, 添加
     myplugins:{
        image_desc:"test the plugin of mine"
     },

4. 打开刚刚添加的editor_plugin.js，

AdvancedMyPlugins: 和最后一行对应就行
myimage: 在工具栏上要显示的图标,以及点击它后执行什么命令
mceMyPlugins: 命令名,在ed.addCommand里定义执行什么动作

添加下面内容

(function() {tinymce.create('tinymce.plugins.AdvancedMyPlugins', {init : function(ed, url) {       ed.addCommand('mceMyPlugins', function() {if (ed.dom.getAttrib(ed.selection.getNode(), 'class').indexOf('mceItem') != -1)return;ed.windowManager.open({file : url + '/test.html',width : 590,height : 370,inline : 1}, {plugin_url : url});});ed.addButton('myimage', {title : 'myplugins.image_desc',cmd : 'mceMyPlugins',image : url + '/img/example.gif'});},getInfo : function() {return {longname : 'My Plugins',author : 'Moxiecode Systems AB',authorurl : 'http://tinymce.moxiecode.com',infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/advimage',version : tinymce.majorVersion + "." + tinymce.minorVersion};},createControl : function(n, cm) {return null;}});// Register plugintinymce.PluginManager.add('myplugins', tinymce.plugins.AdvancedMyPlugins);})();

5. 编辑html 页面, 添加myplugins and myimage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Simple theme example</title><!-- TinyMCE --><script type="text/javascript" src="tiny_mce/tiny_mce.js"></script><script type="text/javascript">tinyMCE.init({mode : "textareas",        theme : "advanced",        plugins: "safari,style,advimage,wbxadvimage,table,advlink,preview,searchreplace,paste,noneditable,contextmenu,inlinepopups,myplugins",        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,forecolor,backcolor,|,numlist,bullist,outdent,indent,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,image,myimage",        theme_advanced_buttons2 : "",        theme_advanced_toolbar_location : "top",         theme_advanced_toolbar_align : "left",        table_row_limit: 100,table_col_limit: 100,position : 'home' });</script><!-- /TinyMCE --></head><body><form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true"><textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"></textarea></form></body></html>

热点排行

Web前端

tinymce 使用四-为tinymce添加一个plugin