如何为TinyMce写一个插件

来源：互联网发布：软件测试量化考核编辑：程序博客网时间：2024/06/06 02:27

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

(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 plugin
tinymce.PluginManager.add('myplugins', tinymce.plugins.AdvancedMyPlugins);
})();

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

Html代码

<!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>
<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>
</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>

0 0