TinyMce介绍、环境配置与使用心得

TinyMCE 是一个基于浏览器(例如MSIE或Mozilla)的强大的所见即所得的编辑器，它使用户可以方便的编辑HTML内容。它非常灵活并且是为系统集成而设计的，比如在Intranets、CMS、LMS等系统中应用。 　　特点 易于集成，只需要简短几行代码。 支持主题和模板。 易于使用自定义代码扩展(插件和回调) 可定制HTML输出。屏蔽元素和强制属性。 国际语言支持(通过语言包)。 支持多种浏览器, 目前有 Mozilla (PC/Mac/Linux), MSIE (PC) 和 FireFox (PC/Mac/Linux)。 　　下面是使用/集成TinyMCE的内容：（您也可以查看TinyMCE中文手册了解一下内容） 　　初始化 　　在初始化TinyMCE的时候，需要把以下代码加入到页面的HEAD标签中。按以下例子中的设置，所有的TEXTAREA文本域在页面加载时将被转换成编辑器。另外还有其他模块，我们将在后面详细讲述。 <!-- tinyMCE --> <script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript">     tinyMCE.init({        mode : "textareas"     }); </script> <!-- /tinyMCE --> <!-- tinyMCE --> <script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript">    tinyMCE.init({        mode : "textareas"     }); </script> <!-- /tinyMCE -->   初始化 注意以上红色部分是tiny_mce.js脚本文件的位置，该文件中包含了编辑器所需要的全部代码，主题及语言包将在初始化时被加载。蓝色部分是初始化调用，它生成TinyMCE的全局实例，其中的设置及名称－值属性将在以后描述。 设置 以名称－值属性方式传递给tinyMCE的init方法的设置控制着程序的全局行为。所有的键及可能的键值如下表所示。注意，用[]括起来的名称是可选的，不是必须的设置。 常规设置 mode Mode可以是以下几个值之一： textareas - 页面加载时把所有TEXTAREA组件转换成编辑器. specific_textareas - 将所有"mce_editable"属性值为true的TEXTAREA转换成编辑器. exact - 只转换在"elements"设置中指定的确切组件. [theme] 指定要使用的主题名称，主题将被放在TinyMCE的themes目录下，默认为default。TinyMCE自带三个内置的主题，它们是simple，default和advanced。 如果你想创建自己的主题，请仔细阅读文档的 主题 部分。 [plugins] 此选项是一系列以逗号分隔的主题插件列表（例如，可以只用来扩展图像对话框）。这些插件覆盖了主题模板中定义的功能。插件逻辑应该包含在一个叫"editor_plugin.js"的文件中，它是插件目录中唯一被包含进来的文件。 例如："my_image_dialog,my_link_dialog". 如果你想创建自己的插件，请仔细阅读文档的 主题 部分。 [language] TinyMCE中使用的语言包，这应该是像se,uk,us等诸如此类的FN代码，它被用来从"langs"目录中获取语言包，该设置的默认值为"uk". 中文用户建议您使用"zh-CN" [elements] 以逗号分隔的用来转换成编辑器的组件列表，该选项仅在"mode"选项被设置成"exact"时使用。该列表中的元素可以是任何有id或name属性的HTML组件。 [ask] 当"mode"被设置成"textareas"或"specific_textareas"的时候，该选项被应用，询问用户输入框是否将被转换成编辑器。 如果你想使用这个选项，将它设置为true. [textarea_trigger] textarea（文本域）触发器的属性，默认值为"mce_editable"。 该选项仅在"mode"被设置为"specific_textareas"时使用。 [valid_elements] 以逗号分隔开的组件转换部分的列表。 例如： a[href|target=_blank],strong/b,div[align],br. 以上例子告诉TinyMCE移除所有除了"a, strong, div"和"br"的组件，将元素b转换成strong，默认target设为"_blank"并保持href、target、align属性。在匹配组件及属性的名称时可以使用像*,+,?这样的通配符。 字符： , 各组件定义之间的分隔符。 / 两个同义组件之间的分隔符。第一个组件是会被用来输出的那个（即第二个组件被第一个替换）。 | 各属性定义之间的分隔符。 [ 定义某组件的属性列表的开始符号。 ] 定义某组件的属性列表的结束符号。 = 将属性的默认值设为特定值。例如："target=_blank" : 将属性的值强行设为特定值。例如："border:0" < 校验某个属性的值。例如："target<_blank?_self" ? 属性校验值之间的分隔符，见上。