`
隐形的翅膀
  • 浏览: 486512 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

tinymceSafariJavaScriptPHPHTML 
阅读更多
如何为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>
分享到：
| CSS强制换行/不换行,自动换行
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics