积木首页 - 学院 - 软件测试 - 技术百科 - 问答 - 黄页 - 手册 - 站长工具 - 社区
登录 | 注册
    
群组 >> TinyMCE中文在线讨论区

TinyMCE中文在线讨论区

共有10位成员   人气指数 -   最新排名 -

【话题】在tinymce中自定制一个插件的方法

2009-03-25 21:55:46 来自:人猿泰山 浏览数:15

如果你懂得基本的 HTML、CSS 和 Javascript,那么创建你自己的 TinyMCE 插件是相当简单的。最简单的方法是复制 "_template" 目录(译者注:在\jscripts\tiny_mce\plugins目录下)或者其他独立插件的目录,然后以其为基础制作插件。 "_template" 目录里是一个展示如何创建插件的指导。复制好模版之后你需要做的是修改下面代码片段中被红色标记的部分,把它们改成你自己插件的名字,这样保证能有一个独立的名字,不会与其他插件重复。

如果你想给插件加上特别的选项和设置时,记得它们的命名应该遵循这样的格式: "<your plugin>_<option>" 。例如: "yourplugin_someoption"。

回调函数或者其他对你没用的代码可以去掉。

插件目录结构

文件/目录 描述
css 插件的 CSS 文件。
docs 插件的说明文档。
images 插件需要的图片。
jscripts 插件对话框需要的JS代码。
langs 插件需要的语言文件。
editor_plugin.js 编辑器插件的JS文件(压缩)。
editor_plugin_src.js 编辑器插件的JS文件(源代码)。
somedialog.htm 插件需要的 HTML 对话框文件。

插件源代码例子:

下面的例子展示了一个简单的空插件以及所有可能的回调函数。

 

var TinyMCE_SomeNamePlugin = {
	getInfo : function() {
		return {
			longname : 'Your plugin',
			author : 'Your name',
			authorurl : 'http://www.yoursite.com',
			infourl : 'http://www.yoursite.com/docs/template.html',
			version : "1.0"
		};
	},

	initInstance : function(inst) {
		// You can take out plugin specific parameters
		alert("Initialization parameter:" + tinyMCE.getParam("somename_someparam", false));

		// Register custom keyboard shortcut
		inst.addShortcut('ctrl', 't', 'lang_somename_desc', 'mceSomeCommand');
	},

	getControlHTML : function(cn) {
		switch (cn) {
			case "SomeControl":
				return tinyMCE.getButtonHTML(cn, 'lang_someplugin_button_desc', '{$pluginurl}/images/someimage.gif', 'mceSomeCommand');
		}

		return "";
	},

	getControlHTML : function(cn) {
		switch (cn) {
			case "advhr":
				return tinyMCE.getButtonHTML(cn, 'lang_insert_advhr_desc', '{$pluginurl}/images/advhr.gif', 'mceAdvancedHr');
		}

		return "";
	},


	execCommand : function(editor_id, element, command, user_interface, value) {
		// Handle commands
		switch (command) {
			// Remember to have the "mce" prefix for commands so they don't intersect with built in ones in the browser.
			case "mceSomeCommand":
				// Do your custom command logic here.

				return true;
		}

		// Pass to next handler in chain
		return false;
	},

	handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
	},

	setupContent : function(editor_id, body, doc) {
	},

	onChange : function(inst) {
	},

	handleEvent : function(e) {
		return true;
	},
	cleanup : function(type, content, inst) {
		return content;
	},

	_someInternalFunction : function(a, b) {
		return 1;
	}
};

// Adds the plugin class to the list of available TinyMCE plugins
tinyMCE.addPlugin("someplugin", TinyMCE_SomePluginPlugin);
还没有人回复!我来回复
TinyMCE中文在线讨论区的其他话题...

PHP: PHP技巧 - PHP基础 - PHP实例 - PHP错误代码 - 正则表达式 - 热门脚本语言: DOS命令 - vbs - CSS/HTML - python - perl - ruby - shell编程 - Powershell

JS: node.js - JS基础 - extjs - jQuery - JavaScript技巧

网址导航成语大全积木 TinyMCE 服务邮箱: Gimoohr(#)gmail.com
Copyright © 2008 Gimoo.Net  京ICP备05050695号