tinyMCE应用方式与心得详解

tinyMCE应用详解

原始化

在原始化TinyMCE的情况下，必须把下列编码添加到网页页面的HEAD标识中。按下列事例中的设定，全部的TEXTAREA文字域在网页页面载入时将被变换成编写器。此外也有别的控制模块，大家将在后边详尽讲述。

留意以上鲜红色一部分是tiny_mce.js脚本制作文档的部位，该文档中包括了编写器所必须的所有编码，主题及語言包将在原始化时被载入。
蓝色一部分是原始化启用，它转化成TinyMCE的全局性案例，在其中的设定及名字－值特性将在之后叙述。

设定

以名字－值特性方法传送给tinyMCE的init方式的设定操纵着程序流程的全局性个人行为。全部的键及将会的键值以下表所示。留意，用[]括起来的名字是可选的，并不是务必的设定。

基本设定 mode Mode能够是下列几个值之1：



textareas - 网页页面载入时把全部TEXTAREA组件变换成编写器.

specific_textareas - 将全部"mce_editable"特性值为true的TEXTAREA变换成编写器.

exact - 只变换在"elements"设定中特定确实切组件. [theme] 特定要应用的主题名字，主题将被放在TinyMCE的themes文件目录下，默认设置为default。TinyMCE自带3个内嵌的主题，它们是simple，default和advanced。

假如你想建立自身的主题，请细心阅读文章文本文档的 主题 一部分。 [plugins] 此选项是1系列以逗号隔开的主题软件目录（比如，能够只用来拓展图象会话框）。这些软件遮盖了主题模版中界定的作用。软件逻辑性应当包括在1个叫"editor_plugin.js"的文档中，它是软件文件目录中唯1被包括进来的文档。

比如："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特性。在配对组件及特性的名字时可使用像*,+,?这样的通配符。



标识符：

, 各组件界定之间的隔开符。 / 两个同义组件之间的隔开符。第1个组件是会被用来輸出的那个（即第2个组件被第1个更换）。 | 各特性界定之间的隔开符。 [ 界定某组件的特性目录的刚开始标记。 ] 界定某组件的特性目录的完毕标记。 = 将特性的默认设置值设为特殊值。比如："target=_blank" : 将特性的值强行设为特殊值。比如："border:0" < 校检某个特性的值。比如："target<_blank?_self" ? 特性校检值之间的隔开符，见上。

独特自变量：

{$uid} - 造成1个唯1ID号。 比如："p[id:{$uid}]".



此选项的默认设置值是下列方式：

"a[href|target],strong/b[class],em/i[class],strike[class],u[class],p[class|align],ol,ul,li,br,

img[class|src|border=0|alt|hspace|vspace|width|height|align],sub,sup,blockquote[dir|style],

table[border=0|cellspacing|cellpadding|width|height|class|align],tr[rowspan],

td[colspan|rowspan|width|height],div[class|align],span[class|align],pre[class|align],

address[class|align],h1[class|align],h2[class|align],h3[class|align],

h4[class|align],h5[class|align],h6[class|align],hr".



要包括全部组件及特性，请应用 *[*] ，这在应用invalid_elements选项时非常有效。 [extended_valid_elements] 向"valid_elements"目录结尾加上能用组件。此选项在你仅仅想往默认设置目录中增加一部分组件时非常有效。

文件格式与"valid_elements"1致。 [invalid_elements] 輸出时必须清除出外的组件名字目录，以逗号隔开开。 [trim_span_elements] True/False选项。假如设定为true，不必须的组件将被移除。默认设置值即为true。 [verify_css_classes] True/False选项。假如设定为true，可能校检CSS的class特性。默认设置值即为true。 [verify_html] True/False选项。意味着着HTML內容是不是必须校检。默认设置值为true。 [urlconvertor_callback] 当清除过程解决URL的情况下启用的涵数名。此涵数务必遵循下列的文件格式：func(url, node, on_save) ，回到变换后的URL。此设定专为集成化目地而设。主要参数url意味着要变换的详细地址，node意味着包括URL的那个连接点，on_save是1个布尔运算值（在客户递交表单时为真）。 [preformatted] True/False选项。假如设定为true，编写器将把制表符（TAB）变换成缩进，除另外维持别的whitespace（空白标识符、换行等）标识符，就好似HTML标识中的PRE的实际效果。默认设置值为false。 [insertlink_callback] 当实行"insertlink"指令时启用的涵数名。此涵数获得选定连接的详细地址和总体目标，回到1个以"href", "target"和 "title"为collection名字的数字能量数组。当应用新对话框时，以便适配Mozilla，会在window.opener（弹出对话框的母对话框，译者注）上启用tinyMCE.insertLink。 [insertimage_callback] 当实行"insertimage"指令时启用的涵数名。此涵数获得选定图象的url并回到1个以src和alt为collection名字的数字能量数组。当应用新对话框时，以便适配Mozilla，会在window.opener上启用tinyMCE.insertImage。

涵数文件格式：insertimage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action). [setupcontent_callback] 当编写器原始化时启用的涵数名。涵数文件格式：setupContentCallback(editor_id, node)，在其中editor_id是编写器的id，node是编写器所属的body组件连接点。 [save_callback] 当实行triggerSave（开启储存）指令被启用时启用的涵数名。涵数文件格式：save(id, content, node)，假如有特殊回到值，其值可能被加到HTML表单组件上。因此能够根据此涵数来自定客户变换逻辑性。 [docs_language] TinyMCE文本文档中应用的語言，这应当是像se,uk,us等诸这般类的FN编码，它被用来从"<theme>/docs/<lang>"文件目录中获得文本文档。 该选项的默认设置值跟language选项1致。 [width] 编写器的宽度，它默认设置的宽度是本来被更换的组件宽度。 [height] 编写器的高宽比，它默认设置的高宽比是本来被更换的组件高宽比。 [content_css] 编写对话框中要应用的CSS文档，其相对路径应当跟网页页面有关。 [popups_css] 像插进连接和照片时的弹出对话框中应用的CSS文档，其相对路径应当跟网页页面有关。 [editor_css] 编写器应用的CSS文档，其相对路径应当跟网页页面有关。 [encoding] 编写器的輸出编号，此选新项目前只能为"html"或空。假如设定为"html"，编写器的輸出将历经HTML编号解决。

比如：<可能变为&lt;，依此类推。默认设置值是空。 [debug] True/False选项。假如设定成true，像css文档相对路径等调节信息内容可能被显示信息。 [visual] True/False选项。假如设定成true，当边框设定成0的情况下，为做到更好的视觉效果实际效果在编写器中报表会有虚线出現。

默认设置值为true。 [visual_table_style] 客户可自定报表的款式，默认设置值为："border: 1px dashed #BBBBBB"。 [add_form_submit_trigger] True/False选项。假如设定成true，将强制性开展全部表单的"onsubmit"恶性事件解决并引起储存。此选项默认设置值为true。 [add_unload_trigger] True/False选项。假如设定成true，在"onunload"恶性事件产生时，当今对话框会引起1个triggerSave启用。此triggerSave启用不容易做任何清除工作中，由于它是用来解决 前行/后退 按钮的。此选项默认设置值为true。 [force_br_newlines] True/False选项。此选项强制性编写器将段落标记(P)更换成换行符(BR)。此选项默认设置值为false。（试验环节） [force_p_newlines] True/False选项。假如开启此选项，在按下次车键（Enter）时Mozilla/Firefox访问器会转化成段落标记(P)，在按下Shift+Enter时会转化成换行符(BR)。此选项默认设置为true。 [relative_urls] True/False选项。假如设定成true，肯定相对路径将被变换成相对性相对路径。默认设置值为true。 [remove_script_host] True/False选项。在设定成true的状况下，假如URL中的主机名、端口号号跟编写器当今所属1致，它们会被移除。

比如：编写器所属站点为 http://www.somesite.com ，那末下列连接 http://www.somesite.com/somedir/somepage.html 可能被变换成 /somedir/somepage.html 。

假如relative_urls被设定成false，此选项默认设置为true。 [focus_alert] True/False选项。假如设定成true，编写器在丧失聚焦点的情况下就会出現1个烦人的警示框。默认设置值为true。 [document_base_url] 在将肯定相对路径变换成相对性相对路径的情况下会用到此文本文档的URL。这个选项特定了编写器当今的默认设置文本文档。

留意假如此选项特定到1个网站域名，请加上协议书前缀，并以斜杠末尾。比如：http://www.somehost.com/mydir/ [custom_undo_redo] True/False选项。此选项可使 注销/重做 作用更为健全。默认设置值为true。 [custom_undo_redo_levels] 自定数最多可注销实际操作的次数，默认设置是无尽制。 [custom_undo_redo_keyboard_shortcuts] 假如应用，编写器可使用Ctrl+Z和Ctrl+Y便捷键来完成注销和重做。默认设置容许。 [fix_content_duplication] True/False选项。此选项调整了MSIE中1个內容反复的bug。默认设置开启，可是以便适配性还可以禁用(false)。 [directionality] 此选项能够设定像阿拉伯语等語言的文本方位。将会的值为：ltr, rtl。默认设置值: ltr（从左到右）。 [auto_cleanup_word] 假如开启，从MS office/Word粘贴的HTML可能全自动被清除。此选项默认设置值为false。

留意：此实际操作当今仅适用MSIE。 [cleanup_on_startup] 假如开启，在编写器原始化时文字域及组件可能被清除。默认设置值为false。 [inline_styles] 假如开启，像width,height,vspace,hspace和align等特性可能被设计风格特性取代。默认设置值为false。

在应用此选项时记得要把设计风格特性运用在正确的组件上。 [convert_newlines_to_brs] 假如开启，全部的\n(新行)可能在编写器起动时被变换成<br />组件。此选项默认设置值为false。 [auto_reset_designmode] 由于在启用style.display的none/block方式来显示信息/掩藏某个TinyMCE编写器的情况下有bug，设计方案方式必须被重设。此选项1旦开启，当编写器聚焦时，将全自动重设。默认设置值为false。 [entities] 1张以标识符编码来搜索名字的表，该表格中元素是以逗号隔开开的实体线目录。该目录以单数项、偶数项区别，在其中单数项是被用来变换的标识符编码，偶数项是意味着那个标识符编码的实体线名字。比如："8205,zwj,8206,lrm,8207,rlm,173,shy"。 [cleanup_callback] 自定清除涵数。此选项能让客户在默认设置的清除基本上有一定的拓展。此涵数启用跟默认设置的启用是分开的，它其实不更换默认设置的清除涵数，而仅仅是拓展。点一下 软件清除 查询更多细节。 主题的高級特殊设定 [theme_advanced_toolbar_location] 此选项用来更改专用工具栏的默认设置部位。将会的值为："top"和"bottom"。默认设置值是"bottom"。 [theme_advanced_toolbar_align] 此选项用来设定专用工具栏的对齐方法是left, center還是right。默认设置值是center。 [theme_advanced_styles] 此选项能够用来提升设计风格往下拉框中的CSS类和名字。文件格式以下："<title>=<class>;.."。

假如沒有特定此选项，主內容一部分的CSS类可能被全自动导入。

比如："Header 1=header1;Header 2=header2;Header 3=header3" [theme_advanced_buttons1] 专用工具栏上第1行要包括的按钮目录，以逗号隔开开。比如："bold,italic,underline"。



容许的按钮名字以下：

bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, styleselect, bullist, numlist, outdent, indent, undo,redo, link, unlink, image, cleanup, help, code, table, row_before, row_after, delete_row, separator, rowseparator, col_before, col_after, delete_col, hr, removeformat, sub, sup, formatselect, fontselect, fontsizeselect, forecolor,charmap,visualaid,spacer,cut,copy,paste [theme_advanced_buttons2] 同上，区别在于特定的是专用工具栏第2行。 [theme_advanced_buttons3] 同上，区别在于特定的是专用工具栏第3行。 [theme_advanced_buttons<N>_add] 向专用工具栏上特殊的第N行中提升附加的操纵/按钮。比如：theme_advaned_buttons3_add : "iespell". [theme_advanced_buttons<N>_add_before] 向专用工具栏上特殊的第N行的默认设置按钮前面提升附加的操纵/按钮。比如：theme_advaned_buttons3_add_before : "iespell"。 [theme_advanced_disable] 要禁用的按钮/组件的目录，以逗号隔开。比如："formatselect". [theme_advanced_source_editor_width] 源文档编写器对话框的宽度。 [theme_advanced_source_editor_height] 源文档编写器对话框的高宽比。 [theme_advanced_path_location] 组件相对路径目录的部位，将会的值为："top"或"bottom"。默认设置值为："none" [theme_advanced_blockformats] formatselect目录要屏蔽的文件格式目录，以逗号隔开开。默认设置值：p,address,pre,h1,h2,h3,h4,h5,h6。
下列是1个较为繁杂的原始化事例：
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "exact",
theme : "mytheme",
language : "se",
elements : "elm1,elm2"
});
</script>
<!-- /tinyMCE -->

涵数 （供高級应用）

TinyMCE有1个全局性案例，它能出示1些可从网页页面启用的公共涵数。

--------------------------------------------------------------------------------
英语的语法： tinyMCE.triggerSave([skip_cleanup]);
叙述：开展消除实际操作，并将编写器內容移返回表单域中。tinyMCE根据向表单递交方式中提升开启器来全自动启用此涵数。
主要参数：
[skip_cleanup] - 禁用储存开启器的消除作用，默认设置为false。(可选)

回到： 无

--------------------------------------------------------------------------------
英语的语法： tinyMCE.updateContent(form_element_name);
叙述：将表单组件的內容迁移到编写器中，此实际操作的作用跟triggerSave()恰好相反。当你想动态性更改编写器內容时可使用此方式。
主要参数：
form_element_name - 要获得內容的组件所属表单的名字。
回到： 无

--------------------------------------------------------------------------------
英语的语法： tinyMCE.execInstanceCommand(editor_id, command, [user_interface], [value]);
叙述：此方式根据editor_id主要参数寻找某个编写器案例，在此编写器上实行1个指令。
主要参数：
editor_id - 编写器案例的ID或被更换后的组件id/名字。
command - 要实行的指令。查询execCommand涵数以获得更多细节。
[user_interface] - 是不是应用客户页面。
[value] - 实行指令时要传送的主要参数，比如：1个URL。
回到： 无

--------------------------------------------------------------------------------
英语的语法： tinyMCE.execCommand(command, [user_interface], [value]);
叙述：此方式在选核编辑器中根据名字实行特殊指令。
主要参数：
command - 要实行的指令，比如："Bold" or "Italic"。你能够根据此联接来查询Mozilla Midas spec。可是tinyMCE也是有本身1些独特的指令以下表所示：
mceLink 开启插进连接会话框并插进连接。 mceImage 开启插进图象会话框并插进图象。 mceCleanup 从HTML编码中移除不必须的组件和特性。 mceHelp 开启文本文档网页页面。 mceInsertTable 在电脑鼠标部位插进报表，默认设置规格为：2×2。假如execCommand涵数中有特定value主要参数，它的文件格式务必为name/value方式的数字能量数组，在其中 name有下列选项：cols, rows, border, cellspacing, cellpadding。border（边框）的默认设置尺寸为：0。 mceTableInsertRowBefore 在当今电脑鼠标所属部位以前插进1行。 mceTableInsertRowAfter 在当今电脑鼠标所属部位以后插进1行。 mceTableDeleteRow 将当今电脑鼠标所属行删掉。 mceTableInsertColBefore 在当今电脑鼠标所属部位以前插进1列。 mceTableInsertColAfter 在当今电脑鼠标所属部位以后插进1列。 mceTableDeleteCol 将当今电脑鼠标所属列删掉。 mceAddControl 向编写器加上组件操纵，此编写器的id/name由value特定。 mceRemoveControl 根据editor_id名字来移除特殊操纵。value是要移除的editor_id（编写器ID），编写器ID文件格式以下："mce_editor_<index>"。

还可以应用DOM组件的ID和表单名。 mceFocus 使以value的值为ID的编写器得到聚焦点。编写器ID文件格式以下："mce_editor_<index>"。还可以应用DOM组件的ID和表单名。 mceSetCSSClass 设定CSS类特性，或在挑选框中建立新的span。value的值是要给选定组件分派的css类名或要新建立的span组件名字。 mceInsertContent 在当今电脑鼠标所属部位插进value的內容。 mceReplaceContent 将当今选定一部分更换为value中的HTML编码。{$selection}自变量由当今选定一部分的文本內容更换。 mceSetAttribute

为当今选定组件设定特性。此指令的value应当是name/value数字能量数组，其主要参数以下：



name - 要设定的特性名。

value - 要设定的特性值。

[targets] - 要提升特性的总体目标组件，默认设置为：p,img,span,div,td,h1,h2,h3,h4,h5,h6,pre,address。



应用示例：

tinyMCE.execCommand('mceSetAttribute',false,{name:'align',value:'right'});

是不是打开视觉效果协助方式

插进名字锚点。value是锚点的名字。

重设全部编写器案例的设计方案方式情况。在Firefox中，当编写器被放在制表符中或用style.display="none/block"来操纵隐显的情况下，此指令十分有效。在编写赏识新显示信息时启用此指令。

选定value特定的连接点/组件。另外此指令会使编写器翻转到此组件所属部位。

从当今连接点以深层关联挑选特定的连接点/组件。因此0值会选定当今聚焦的连接点。另外此指令会使编写器翻转到此组件所属部位。

user_interface - 声明某指令是不是会显示信息客户页面。True/False选项。

value - 要传送给指令的值。比如，插进连接时，它便是连接的URL。



回到： 无



示例： <a href="javascript :tinymce.execCommand('Bold');">[Do bold]</a>

英语的语法： tinyMCE.insertLink(href, target);

叙述：此方式在当今选核编辑器案例的电脑鼠标部位插进1个连接，或用新的数据信息来升级已有连接。当你建立自身的主题时，此方式应在插进连接的弹出对话框中的OK按钮按下时被启用。

主要参数：

href - 连接的详细地址/URL。

target - 连接的总体目标。

回到： 无

英语的语法： tinyMCE.insertImage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout);

叙述：此方式在当今选核编辑器案例的电脑鼠标部位插进图象，或用新的数据信息来升级已有图象。当你建立自身的主题时，此方式应在插进图象的弹出对话框中的OK按钮按下时被启用。

主要参数：

src - 图象详细地址。

alt - 照片的取代文本。

border - 图象边框。

hspace - 图象水平间隔。

vspace - 图象竖直间隔。

width - 图象宽。

height - 图象高。

align - 图象对齐方法。

title - 图象连接的题目。

onmouseover - 图象在电脑鼠标放上去时的恶性事件解决。

onmouseout - 图象在电脑鼠标移开时的恶性事件解决。

回到： 无

英语的语法： tinyMCE.triggerNodeChange();

叙述：当编写器产生外界转变时此方式被启用。随后此方式回调函数主题的"handleNodeChangeCallback"方式。

主要参数： None

回到： 无

英语的语法： tinyMCE.getContent();

叙述：此方式回到当今选核编辑器中的HTML內容。假如沒有任何选核编辑器，该方式回到null。

主要参数： None

回到：当今选核编辑器中的HTML內容或null。

英语的语法： tinyMCE.setContent(html);

叙述：此方式设置当今选核编辑器的HTML內容。

主要参数：

html - 要设置的HTML源码。

回到： None.

英语的语法： tinyMCE.getEditorInstance(editor_id);

叙述：此方式根据editor_id回到某个编写器案例。



主要参数：

editor_id - 要获得的编写器案例。

回到：编写器案例(TinyMCEControl)。

英语的语法： tinyMCE.importThemeLanguagePack([theme]);

叙述：此方式导入主题中特殊的語言包。自定主题中能够启用此方式。

主要参数：

[theme] - 当今主题名字。此选项可选，默认设置为全局性的"theme"设置。此主要参数在主题软件中十分有效。

回到： None.

英语的语法： tinyMCE.importPluginLanguagePack(plugin, valid_languages);

叙述：此方式导入软件中特殊的語言包。自定软件中能够启用此方式。

主要参数：

plugin - 当今软件的名字。

valid_languages - 以逗号隔开的所适用語言包目录。

回到： None.

英语的语法： tinyMCE.applyTemplate(html);

叙述：此方式更换主题中的设定及語言自变量。

主要参数：

html - 要更换主题自变量的HTML编码。

回到： 变换后的HTML编码。

英语的语法： tinyMCE.openWindow(template, [args]);

叙述：此方式根据从特定的template主要参数中获得width, height及html数据信息来开启新对话框。数字能量数组主要参数args中包括要更换的自变量名。

也有1些自定的对话框主要参数：

mce_replacevariables - 开启/禁用HTML文本文档中的語言/自变量更换。默认设置开启。

mce_windowresize - 开启/禁用弹出对话框的全自动resize特点，默认设置开启。

主要参数：

template - Name/Value数字能量数组，以width, height, html和file为键。

[args] - 包括要更换自变量名的Name/Value数字能量数组。模版文档中的键值自变量被主要参数目录所更换。

比如：image.php?src={$src}被更换为：image.php?src=image.gif。

回到： None.

英语的语法： tinyMCE.getWindowArg(name, [default_value]);

叙述：此方式依据name回到对话框主要参数，它能够用在主题中的弹出对话框中，以获得会话框中的主要参数。

主要参数：

name - 要获得的对话框主要参数的名字。

[default_value] - 对话框主要参数遗失时回到的默认设置值。

回到： 对话框主要参数的值。

英语的语法： tinyMCE.setWindowArg(name, value);

叙述：此方式依据name设置对话框主要参数，比如它在某软件启用别的软件时十分有效。

主要参数：

name - 要设定的对话框主要参数。

value - 对话框主要参数中要设定的值。

回到： 对话框主要参数值。

英语的语法： tinyMCE.getParam(name, [default_value], [strip_whitespace]);

叙述：此方式回到TinyMCE的配备主要参数。

主要参数：

name - 要获得的对话框主要参数名。

[default_value] - 对话框主要参数遗失时回到的默认设置值。

[strip_whitespace] - 假如为真，全部回到值中的空白标识符可能被去除。默认设置：false。

tinyMce应用心得

tinyMce是1款作用强劲的根据js的富文字编写器.
官方首页：http://www.tinymce.com/
如今全新的版本号是3.4.7了
这款编写器的作用基本上能够跟微软的office有的1比，绝不稍逊。编写器里边的各项编写专用工具都可以以订制，绝大多数高級作用全是以软件的方式加上进来，开发设计应用者能够依据必须加上/删掉自身的作用。
最先免费下载tinyMce的开发设计包(提议免费下载dev版本号，里边有很多的案例，还能够查询源码)
免费下载连接：https://www.jb51.net/codes/44180.html http://www.tinymce.com/download/download.php
随后在必须应用的Web网页页面加上tinyMce文档
<script type="text/javascript" src="common/tiny_mce/tiny_mce_src.js"></script>
只必须加上1个js文档便可，别的tinyMce必须的css和js它会自身载入。
随后在网页页面的<body>中放1个<textarea id="myRTE"></textarea>
最终应用tinyMce的init方式，在方式的配备里关联那个textarea便可以了。
 
jsp网页页面编码