如何为TinyMce写一个插件

如何为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里定义执行什么动作



添加下面内容
Javascript代码   收藏代码
  1. (function() {  
  2.     tinymce.create('tinymce.plugins.AdvancedMyPlugins', {  
  3.         init : function(ed, url) {  
  4.                  
  5.               
  6.             ed.addCommand('mceMyPlugins'function() {  
  7.                   
  8.                   
  9.                 if (ed.dom.getAttrib(ed.selection.getNode(), 'class').indexOf('mceItem') != -1)  
  10.                     return;  
  11.   
  12.                 ed.windowManager.open({  
  13.                     file : url + '/test.html',  
  14.                     width : 590,  
  15.                     height : 370,  
  16.                     inline : 1  
  17.                 }, {  
  18.                     plugin_url : url  
  19.                 });  
  20.             });  
  21.   
  22.               
  23.               
  24.             ed.addButton('myimage', {  
  25.                 title : 'myplugins.image_desc',  
  26.                 cmd : 'mceMyPlugins',  
  27.                 image : url + '/img/example.gif'  
  28.             });  
  29.         },  
  30.   
  31.         getInfo : function() {  
  32.             return {  
  33.                 longname : 'My Plugins',  
  34.                 author : 'Moxiecode Systems AB',  
  35.                 authorurl : 'http://tinymce.moxiecode.com',  
  36.                 infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/advimage',  
  37.                 version : tinymce.majorVersion + "." + tinymce.minorVersion  
  38.             };  
  39.         },  
  40.         createControl : function(n, cm) {  
  41.               
  42.             return null;  
  43.         }  
  44.     });  
  45.     // Register plugin  
  46.     tinymce.PluginManager.add('myplugins', tinymce.plugins.AdvancedMyPlugins);  
  47. })();  


5. 编辑html 页面, 添加myplugins and myimage
Html代码   收藏代码
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>Simple theme exampletitle>  
  5.   
  6.   
  7. <script type="text/javascript" src="tiny_mce/tiny_mce.js">script>  
  8. <script type="text/javascript">  
  9.     tinyMCE.init({  
  10.         mode : "textareas",  
  11.             theme : "advanced",  
  12.             plugins: "safari,style,advimage,wbxadvimage,table,advlink,preview,searchreplace,paste,noneditable,contextmenu,inlinepopups,myplugins",  
  13.             theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,forecolor,backcolor,|,numlist,bullist,outdent,indent,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,image,myimage",  
  14.             theme_advanced_buttons2 : "",  
  15.             theme_advanced_toolbar_location : "top",   
  16.             theme_advanced_toolbar_align : "left",  
  17.             table_row_limit: 100,  
  18.         table_col_limit: 100,  
  19.         position : 'home'   
  20.   
  21.     });  
  22. script>  
  23.   
  24.   
  25. head>  
  26. <body>  
  27.   
  28. <form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">  
  29.     <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">     
  30.     textarea>  
  31. form>  
  32.   
  33. body>  
  34. html> 

你可能感兴趣的:(TinyMce编辑器)