天天看點
傳回

如何為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問，輕松搞定二次函數

繼續閱讀