TinyMCE 高级使用方法中的方法函数 - 文章教程

TinyMCE 高级使用方法中的方法函数

发布于 2019-10-23 字数 9145 浏览 4438 评论 0

TinyMCE 有一个全局实例,它能提供一些可从页面调用的公用函数。

triggerSave

语法: tinyMCE.triggerSave([skip_cleanup]);

描述:进行清除操作,并将编辑器内容移回到表单域中。tinyMCE通过向表单提交方法中增加触发器来自动调用此函数。

参数:[skip_cleanup] – 禁用保存触发器的清除功能,默认为false。(可选)

返回: 无

updateContent

语法: tinyMCE.updateContent(form_element_name);

描述:将表单组件的内容转移到编辑器中,此操作的功能跟triggerSave()正好相反。当你想动态改变编辑器内容时可以使用此方法。

参数:form_element_name – 要获取内容的组件所在表单的名称。

返回: 无

execInstanceCommand

语法: tinyMCE.execInstanceCommand(editor_id, command, [user_interface], [value]);

描述:此方法通过editor_id参数找到某个编辑器实例,在此编辑器上执行一个命令。

参数:

  • editor_id – 编辑器实例的ID或者被替换后的组件id/名称。
  • command – 要执行的命令。查看execCommand函数以获取更多细节。
  • [user_interface] – 是否使用用户界面。
  • [value] – 执行命令时要传递的参数,例如:一个URL。

返回: 无

execCommand

语法: tinyMCE.execCommand(command, [user_interface], [value]);

描述:此方法在选定编辑器中通过名称执行特定命令。

参数:

command – 要执行的命令,例如:”Bold” or “Italic”。但是tinyMCE也有自身一些特殊的命令如下表所示:

mceLink 打开插入链接对话框并插入链接。
mceImage 打开插入图像对话框并插入图像。
mceCleanup 从HTML代码中移除不需要的组件和属性。
mceHelp 打开文档页面。
mceInsertTable 在鼠标位置插入表格,默认尺寸为:2×2。如果execCommand函数中有指定value参数,它的格式必须为name/value形式的数 组,其中 name有以下选项:cols, rows, border, cellspacing, cellpadding。border(边框)的默认大小为:0。
mceTableInsertRowBefore 在当前鼠标所在位置之前插入一行。
mceTableInsertRowAfter 在当前鼠标所在位置之后插入一行。
mceTableDeleteRow 将当前鼠标所在行删除。
mceTableInsertColBefore 在当前鼠标所在位置之前插入一列。
mceTableInsertColAfter 在当前鼠标所在位置之后插入一列。
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’});

mceToggleVisualAid 是否开启视觉帮助模式
mceAnchor 插入名称锚点。value是锚点的名称。
mceResetDesignMode 重置所有编辑器实例的设计模式状态。在Firefox中,当编辑器被放在制表符中或者用style.display=”none/block”来控制隐显的时候,此命令非常有用。在编辑器重新显示时调用此命令。
mceSelectNode 选定value指定的节点/组件。同时此命令会使编辑器滚动到此组件所在位置。
mceSelectNodeDepth 从当前节点以深度关系选择指定的节点/组件。所以0值会选定当前聚焦的节点。同时此命令会使编辑器滚动到此组件所在位置。

user_interface – 申明某命令是否会显示用户界面。True/False选项。

value – 要传递给命令的值。例如,插入链接时,它就是链接的URL。

返回: 无

示例:

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

insertLink

语法: tinyMCE.insertLink(href, target);

描述:此方法在当前选定编辑器实例的鼠标位置插入一个链接,或者用新的数据来更新已有链接。当你创建自己的主题时,此方法应在插入链接的弹出窗口中的OK按钮按下时被调用。

参数:

  • href – 链接的地址/URL。
  • target – 链接的目标。

返回: 无

insertImage

语法: 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 – 图像在鼠标移开时的事件处理。

返回: 无

triggerNodeChange

语法: tinyMCE.triggerNodeChange();

描述:当编辑器发生外部变化时此方法被调用。然后此方法回调主题的”handleNodeChangeCallback”方法。

参数: None

返回: 无

getContent

语法: tinyMCE.getContent();

描述:此方法返回当前选定编辑器中的HTML内容。如果没有任何选定编辑器,该方法返回null。

参数: None

返回:当前选定编辑器中的HTML内容或者null。

setContent

语法: tinyMCE.setContent(html);

描述:此方法设定当前选定编辑器的HTML内容。

参数:html – 要设定的HTML源代码。

返回: None.

getEditorInstance

语法: tinyMCE.getEditorInstance(editor_id);

描述:此方法通过editor_id返回某个编辑器实例。

参数:editor_id – 要获取的编辑器实例。

返回:编辑器实例(TinyMCEControl)。

importThemeLanguagePack

语法: tinyMCE.importThemeLanguagePack([theme]);

描述:此方法导入主题中特定的语言包。自定义主题中可以调用此方法。

参数:[theme] – 当前主题名称。此选项可选,默认为全局的”theme”设定。此参数在主题插件中非常有用。

返回: None.

importPluginLanguagePack

语法: tinyMCE.importPluginLanguagePack(plugin, valid_languages);

描述:此方法导入插件中特定的语言包。自定义插件中可以调用此方法。

参数:

  • plugin – 当前插件的名称。
  • valid_languages – 以逗号分隔的所支持语言包列表。

返回: None.

applyTemplate

语法: tinyMCE.applyTemplate(html);

描述:此方法替换主题中的设置及语言变量。

参数:html – 要替换主题变量的HTML代码。

返回: 转换后的HTML代码。

openWindow

语法: tinyMCE.openWindow(template, [args]);

描述:此方法通过从指定的template参数中获取width, height及html数据来打开新窗口。数组参数args中包含要替换的变量名。

还有一些自定义的窗口参数:

  • 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.

getWindowArg

语法: tinyMCE.getWindowArg(name, [default_value]);

描述:此方法根据name返回窗口参数,它可以用在主题中的弹出窗口中,以获取对话框中的参数。

参数:

  • name – 要获取的窗口参数的名称。
  • [default_value] – 窗口参数丢失时返回的默认值。

返回: 窗口参数的值。

setWindowArg

语法: tinyMCE.setWindowArg(name, value);

描述:此方法根据name设定窗口参数,例如它在某插件调用其他插件时非常有用。

参数:

  • name – 要设置的窗口参数。
  • value – 窗口参数中要设置的值。

返回: 窗口参数值。

getParam

语法: tinyMCE.getParam(name, [default_value], [strip_whitespace]);

描述:此方法返回TinyMCE的配置参数。

参数:

  • name – 要获取的窗口参数名。
  • [default_value] – 窗口参数丢失时返回的默认值。
  • [strip_whitespace] – 如果为真,所有返回值中的空白字符将会被除去。默认:false。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论