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

TinyMCE中文在线讨论区

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

【话题】如何再TinyMCE创建一个主题

2009-03-25 21:57:56 来自:人猿泰山 浏览数:53

创建你自己的主题

如果你懂得基本的 HTML、CSS 和 Javascript,那么创建你自己的 TinyMCE 主题是相当简单的。最简单的方法是复制 "simple" 或 "advanced" 主题目录,然后把它改成自己起的名字,例如:"mytheme",复制好模版之后你需要做的是将下面代码片段中被红色标记的部分修改成 "mytheme" ,这是必须的。还句话说这样可以使每个主题有自己独立的名字,不会互相覆盖。然后把 HTML 代码修改成你需要的。但是请注意有些元素使必须的,所以修改每个函数时都要查看其文档。另外,你定制的主题得放在 tiny_mce 的 "themes" 目录。如果你想给主题增加特别的选项和设置时,记得它们的命名应该遵循这样的格式:"theme_<your theme>_<option>"。

主题目录结构

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

主题源代码例子

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

 

var TinyMCE_SomeNameTheme = {
	getInfo : function() {
		return {
			longname : 'Your Theme',
			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 theme 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_sometheme_button_desc', '{$themeurl}/images/someimage.gif', 'mceSomeCommand');
		}

		return "";
	},

	getEditorTemplate : function(settings, editor_id) {
		var html = "";

		// Build toolbar and editor instance
		html += "..";

		return {
			html : html,
			delta_width : 0,
			delta_height : 0
		};
	},

	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 theme class to the list of available TinyMCE themes
tinyMCE.addTheme("sometheme", TinyMCE_SomeThemeTheme);

 

建立弹出窗口文件

创建弹出窗口时需要包含 "tiny_mce_popup.js",它使你可以在所有弹出窗口中获得 tinyMCE 的全局实例。所有变量和语言的定义在页面载入时被替换。所以语言变量,比如 {$lang_something} 可以被方法HTML代码里,如果你在 JavaScript 中要得到语言字符串, 只需简单地使用 tinyMCE.getLang 函数。

简单的弹出窗口文件例子

<html>
<head>
<title>{$lang_theme_sample_title}</title>
<script language="javascript" src="../../tiny_mce_popup.js"></script>
<script language="javascript">
     // getWindowArg returns any arguments passed to the window
     alert(tinyMCE.getWindowArg('some_arg'));
</script>
<body>
     <strong>{$lang_theme_sample_desc}</strong>
</body>
还没有人回复!我来回复
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号