| Blog信息 |
|
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7600531
建立时间:2006年5月29日 |
| |
|
 [TinyMCE+FCKeditor]TinyMCE创建主题及插件
软件技术
lhwork 发表于 2006/8/8 10:57:39 |
| 创建你自己的主题与插件
如果你懂得HTML,CSS和Javascript的基础知识，为TinyMCE创建自己的主题是相当容易的事情。最简单的方法莫过于将"default"或者"advanced"模板拷贝，并将它重命名为你自己的主题名称，例如："mytheme"。然后你需要把以下片断中的红色标记更改为"mytheme"，这样各种主题就不会冲突。换句话说，给这个主题指定了唯一的名字。更改里面的HTML代码使之适合你的主题，但需要注意，某些组件是必须的，所以更改以下的每个函数时都请查看相应文档。此外，自定义主题必须做为子目录放在tiny_mce的"themes"目录下。如果需要，你完全可以为自己的主题增加特定的选项和设置，不过记得要用以下的命名规则："theme_<your theme>_<option>"。
以下示例有三个函数，下面会详细介绍。
function TinyMCE_default_getEditorTemplate(settings)
{
var template = new Array();
template['html'] = '<Some HTML>';
template['delta_width'] = 0;
template['delta_height'] = -40;
return template;
}
function TinyMCE_default_getInsertLinkTemplate(settings)
{
var template = new Array();
template['file'] = 'link.htm';
template['width'] = 320;
template['height'] = 130;
return template;
}
function TinyMCE_default_getInsertImageTemplate(settings)
{
var template = new Array();
template['file'] = 'image.htm';
template['width'] = 320;
template['height'] = 130;
return template;
}
function TinyMCE_default_handleNodeChange(editor_id,
node) {
// Check what happend
}
function TinyMCE_default_execCommand(editor_id, element, command, user_interface, value)
{
//
Your custom command logic
return false;
}
使用外部模板文件
当用下面所描述的"file"参数使用外部模板文件时，需要把"tiny_mce_popup.js"包含进来。为了跟TinyMCE通讯，此文件是必须的。所有的变量和语言定义在"html"属性中被替换。
外部模板文件示例：
<html>
<head>
<title>{$lang_theme_sample_title}</title>
<script language="javascript" src="../../tiny_mce_popup.js"></script>
<script language="javascript">
alert(tinyMCE.getWindowArg('some_arg'));
</script>
<body>
{$lang_theme_sample_desc}
</body>
函数 TinyMCE_<theme or plugin>_getEditorTemplate(settings)
此函数负责编辑器实例在页面中的布局，它返回包含特定名称的名称－值对的数组。解释如下，注意用[]括起来的名称是可选的。此函数的settings参数是一个包含了tinyMCE设置和选项的名称－值对的数组。
模板数据：
html
HTML模板数据，它的值是实现编辑器所需的全部HTML代码。注意：在使用时{$<variable>}会被实际的值替换。关于这些特定值的更详细说明见后面。
[delta_width]
Delta宽度，此值包含用户界面所需的相关宽度。例如，工具栏需要20象素，则此值为-20。
这也是为什么编辑器的尺寸跟它所替换的组件宽度一致的原因。
[delta_height]
Delta高度，此值包含用户界面所需的相关高度。例如，工具栏需要40象素，则此值为-40。
这也是为什么编辑器的尺寸跟它所替换的组件宽度一致的原因。
上述"html"中的变量被TinyMCE的内部值所替换。有两种不同类型的变量，一种是以"lang_"为前缀的，它们会被相应名称的语言包替
换。例如，<b>{$lang_test}</b>被语言变量"tinyMCELang['lang_test']"所替换，输
出就成了<b>Test</b>。另外的变量是所用模板直接传递的，列举如下。 注意用[]括起来的变量是可选的。
变量：
editor_id
此为编辑器实例的ID，它应当被放在模板必须包含的IFRAME组件的ID属性中。
[default_document]
为了解决MSIE的安全问题，增加了此设置，它会被替换成空白HTML页面。把它放在模板IFRAME组件的SRC属性中。
[area_width]
IFRAME区域的宽度，以象素为单位。
[area_height]
IFRAME区域的高度，以象素为单位。
[width]
整个编辑器区域的宽度，以象素为单位。
[height]
整个编辑器区域的高度，以象素为单位。
[themeurl]
主题所在位置的URL。
注意：从这个模板可以调用两个JavaScript函数，它们是：在当前选定编辑器区域中执行命令的tinyMCE.execCommand及切换特定组件CSS类的tinyMCE.switchClass。
欲了解execCommand中可以执行的更多命令细节，请查看 Mozilla midas specification 和 TinyMCE specific commands.
函数 TinyMCE_<theme or plugin>_getInsertLinkTemplate(settings)
此函数负责插入链接弹出窗口的布局，它返回包含特定名称的名称－值对的数组。解释如下，注意用[]括起来的名称是可选的。此函数的settings参数是一个包含了tinyMCE设置和选项的名称－值对的数组。
模板数据：
html
HTML模板数据，它的值是实现链接对话框所需的全部HTML代码。注意：在使用时{$<variable>}会被实际的值替换。关于这些特定值的更详细说明见后面。如果"file"参数有赋值，此参数不是必须的。
file
要使用的外部模板文件的名称，它可以是像.php,.asp,.jsp这样的动态页。
[width]
弹出窗口的宽度，以象素为单位，默认为320.
[height]
弹出窗口的高度，以象素为单位，默认为200.
上述"html"中的变量被TinyMCE的内部值所替换。有两种不同类型的变量，一种是以"lang_"为前缀的，它们会被相应名称的语言包替
换。例如，<b>{$lang_test}</b>被语言变量"tinyMCELang['lang_test']"所替换，输
出就成了<b>Test</b>。另外的变量是所用模板直接传递的，列举如下。 注意用[]括起来的变量是可选的。
变量/窗口 参数：
[href]
如果有选定一个链接，此变量被链接中的"href"属性值所替代。
[target]
如果有选定一个链接，此变量被链接中的"target"属性值所替代。
[css]
主题中弹出窗口CSS的位置。
注意：从这个模板中可以调用"window.opener.tinyMCE.insertLink(href, target)"这个javascript函数，它的作用是是在当前选定的编辑器中插入链接，并且应当在"插入"按钮按下时被调用。
函数 TinyMCE_<theme or plugin>_getInsertImageTemplate(settings)
此函数负责插入图像弹出窗口的布局，它返回包含特定名称的名称－值对的数组。解释如下，注意用[]括起来的名称是可选的。此函数的settings参数是一个包含了tinyMCE设置和选项的名称－值对的数组。
模板数据：
html
HTML模板数据，它的值是实现图像对话框所需的全部HTML代码。注意：在使用时{$<variable>}会被实际的值替换。关于这些特定值的更详细说明见后面。如果"file"参数有赋值，此参数不是必须的。
file
要使用的外部模板文件的名称，它可以是像.php,.asp,.jsp这样的动态页。
[width]
弹出窗口的宽度，以象素为单位，默认为320.
[height]
弹出窗口的高度，以象素为单位，默认为200.
上述"html"中的变量被TinyMCE的内部值所替换。有两种不同类型的变量，一种是以"lang_"为前缀的，它们会被相应名称的语言包替
换。例如，<b>{$lang_test}</b>被语言变量"tinyMCELang['lang_test']"所替换，输
出就成了<b>Test</b>。另外的变量是所用模板直接传递的，列举如下。 注意用[]括起来的变量是可选的。
变量/窗口 参数：
[src]
如果有选定一个图像，此变量被图像中的"src"属性值所替代。
[alt]
如果有选定一个图像，此变量被图像中的"alt"属性值所替代。
[border]
如果有选定一个图像，此变量被图像中的"border"属性值所替代。
[hspace]
如果有选定一个图像，此变量被图像中的"hspace"属性值所替代。
[vspace]
如果有选定一个图像，此变量被图像中的"vspace"属性值所替代。
[width]
如果有选定一个图像，此变量被图像中的"width"属性值所替代。
[height]
如果有选定一个图像，此变量被图像中的"height"属性值所替代。
[align]
如果有选定一个图像，此变量被图像中的"align"属性值所替代。
[css]
主题中弹出窗口CSS的位置。
注意：从这个模板中可以调用"window.opener.tinyMCE.insertImage(src, alt, border, hspace, vspace, width,
height, align)"这个javascript函数，它的作用是是在当前选定的编辑器中插入图像，并且应当在"插入"按钮按下时被调用。
函数 TinyMCE_<theme or plugin>_getInsertTableTemplate(settings)
（可选）
此函数负责插入表格弹出窗口的布局，它返回包含特定名称的名称－值对的数组。解释如下，注意用[]括起来的名称是可选的。此函数的settings参数是一个包含了tinyMCE设置和选项的名称－值对的数组。
模板数据：
html
HTML模板数据，它的值是实现表格对话框所需的全部HTML代码。注意：在使用时{$<variable>}会被实际的值替换。关于这些特定值的更详细说明见后面。如果"file"参数有赋值，此参数不是必须的。
file
要使用的外部模板文件的名称，它可以是像.php,.asp,.jsp这样的动态页。
[width]
弹出窗口的宽度，以象素为单位。
[height]
弹出窗口的高度，以象素为单位。
上述"html"中的变量被TinyMCE的内部值所替换。有两种不同类型的变量，一种是以"lang_"为前缀的，它们会被相应名称的语言包替
换。例如，<b>{$lang_test}</b>被语言变量"tinyMCELang['lang_test']"所替换，输
出就成了<b>Test</b>。另外的变量是所用模板直接传递的，列举如下。 注意用[]括起来的变量是可选的。
变量/窗口 参数：
[cols]
如果有选定一个表格，此变量会被表格的列数所替代。
[rows]
如果有选定一个表格，此变量会被表格的行数所替代。
[border]
如果有选定一个表格，此变量会被表格的"border"属性值所替代。
[cellpadding]
如果有选定一个表格，此变量会被表格的"cellpadding"属性值所替代。
[cellspacing]
如果有选定一个表格，此变量会被表格的"cellspacing"属性值所替代。
[width]
如果有选定一个表格，此变量会被表格的"width"属性值所替代。
[height]
如果有选定一个表格，此变量会被表格的"height"属性值所替代。
[align]
如果有选定一个表格，此变量会被表格的"align"属性值所替代。
[action]
根据用户是选择了一个表格还是创建一个新的表格来选择操作类型是"update"还是"insert"。
函数 TinyMCE_<theme or plugin>_handleNodeChange （可选）
此函数在某个编辑器实例的聚焦状态发生改变时被调用，当前新聚焦的节点被做为参数传递给此函数。这对于你需要根据用户的选择来改变用户界面非常有用。
参数：
editor_id
编辑器的唯一ID号，这跟getEditorTemplate中的$editor_id变量一致。
node
当前鼠标所在位置节点的引用。
undo_index
当前撤消索引，如果撤消/重做功能被禁用，其值为-1。
undo_levels
当前撤消层次的数目，如果撤消/重做功能被禁用，其值为-1。
visual_aid
视觉帮助模式的状态，True/false。
any_selection
是否选定任何文字或图像。
函数 TinyMCE_<theme or plugin>_execCommand （可选）
当执行像"bold"或"createlink"这样的命令时，此方法被调用。然后此 回调/主题/插件 函数回中断主题特定命令，并执行客户逻辑。如果此命令返回true，命令处理被终止，默认的tinyMCE命令处理永远不会被执行。
参数：
editor_id
编辑器的唯一ID号，这跟getEditorTemplate中的$editor_id变量一致。
element
对编辑器实例中文档DOM根组件的引用。
command
要执行的命令，例如："myCommand"。
user_interface
是否使用用户界面，true/false选项。
value
要传给命令的自定义数据值，可以是任何数据类型。
返回： true - 命令被终止，命令处理不再继续；false - 继续execCommand处理，冒泡的。
函数 TinyMCE_<theme or plugin>_getControlHTML(control_name) （可选）
当编辑器需要实现某个特定控制/按钮的时候此函数被调用，它返回的是那个控制的HTML模板，如果控制的名字不能被识别则返回空串。注意变量{$pluginurl}会被当前插件目录的URL前缀所替换。
参数：
control_name
要匹配的的控制的名称。例如，"iespell"代表的是iespell插件。
返回：返回的该控制的HTML模板，如果控制的名字不能被识别则返回空串。
函数 TinyMCE_<plugin>_cleanup(type, content) （可选）
当编辑器对内容进行清理时此函数被调用。
参数：
type
清理的类型，insert_to_editor或者get_from_editor。
当向编辑器中传递内容时使用insert_to_editor；当从编辑器中获取内容时使用get_from_editor。
content
要清理的HTML内容，该字符串包含了HTML代码。
返回：清理后的HTML代码。 |
|
|