天天看点
返回

如何为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代码  

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

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

Html代码  

如何为TinyMce写一个插件
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>Simple theme example</title>  
  5. <!-- TinyMCE -->  
  6. <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>  
  7. <script type="text/javascript">  
  8.     tinyMCE.init({  
  9.         mode : "textareas",  
  10.             theme : "advanced",  
  11.             plugins: "safari,style,advimage,wbxadvimage,table,advlink,preview,searchreplace,paste,noneditable,contextmenu,inlinepopups,myplugins",  
  12.             theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,forecolor,backcolor,|,numlist,bullist,outdent,indent,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,image,myimage",  
  13.             theme_advanced_buttons2 : "",  
  14.             theme_advanced_toolbar_location : "top",   
  15.             theme_advanced_toolbar_align : "left",  
  16.             table_row_limit: 100,  
  17.         table_col_limit: 100,  
  18.         position : 'home'   
  19.     });  
  20. </script>  
  21. <!-- /TinyMCE -->  
  22. </head>  
  23. <body>  
  24. <form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">  
  25.     <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">     
  26.     </textarea>  
  27. </form>  
  28. </body>  
  29. </html> 
TinyMce编辑器
上一篇: c语言读取txt带逗号数据,怎么将txt中带逗号的数据导入定义好的数据结构中
下一篇: 这是什么大宝贝，中考数学二次函数破解16问，轻松搞定二次函数

继续阅读