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

隐形的翅膀

浏览: 498480 次
性别:
来自: 北京

最近访客更多访客>>

zdyujia

a1152339302

loginboot

zengmuansha

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

JavaScript

tinymce Safari JavaScript PHP HTML

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

添加下面内容


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

tinymceplugin.rar (7.1 KB)
下载次数: 77

分享到：

javascript 正则表达式应用两例 | CSS强制换行/不换行,自动换行

2010-04-21 16:33
浏览 7783
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Java Script 闭包

dojo 的压缩

JavaScript Compress

apply 使用的一个例子

Google 地图的一些资料

JQuery 对一些特殊HTML元素的操作

javascript compress

扩展Jquery

JavaScript 实现事件的广播,并让各个对象执行事件

在浏览器中使用flash 存储客户端数据

IE中使用firebug

javascript 正则表达式应用两例

tinymce 应用 三

tinymce 应用 二

tinymce 应用 一

不同浏览器的JavaScript 常见问题

JavaScript 对象实现继承的几种方式

JAVASCRIPT定义对象的四种方式

最近访客更多访客>>

tinymce 应用三

tinymce 应用二

tinymce 应用一