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

最新推荐文章于 2024-03-07 20:29:33 发布

xpmwgcwm

最新推荐文章于 2024-03-07 20:29:33 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： tinymce Safari JavaScript PHP HTML ViewUI

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

如何为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，

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

添加下面内容



(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


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

xpmwgcwm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tinymce 应用四---为tinymce添加一个plugin

如何为TinyMce写一个插件1. 目录切换到tiny_mce\plugins，新建一个文件夹：myplugins2. 目录切换到tiny_mce\plugins\myplugins a. 新建一个文件夹 img, 并在其目录下添加一个example.gif, 目录应为tiny_mce\plugins\myplugins\img\example.gif ...
复制链接

扫一扫

专栏目录