概述
可执行命令
列出核心和插件编辑器命令
核心编辑器命令
插件命令
编辑器管理命令
查询命令状态
列出核心和插件查询命令状态
可用的查询命令状态
查询命令值
列出核心和插件的查询命令值
可用的查询命令值
可执行命令
下表展示了现有的编辑器命令。这些命令由 tinymce 提供,而非浏览器内置命令。这些命令可以通过 execCommand 函数执行。
列出核心和插件编辑器命令
要从活动编辑器获取可用命令列表,请在浏览器控制台中运行以下命令:
tinymce.activeEditor.editorCommands.commands.exec;
核心编辑器命令
支持的浏览器原生命令
下表中的命令由 TinyMCE 编辑器提供,并提供与 原生浏览器命令相同或相似的功能。
| 命令 | 描述 |
|---|---|
Bold | 切换选中文本的粗体格式。 |
Italic | 切换选中文本的斜体格式。 |
Underline | 切换选中文本的下划线格式。 |
Strikethrough | 切换选中文本的删除线格式。 |
Superscript | 切换选中文本的上标格式。 |
Subscript | 切换选中文本的下标格式。 |
Cut | 剪切选中内容并将其放入用户剪贴板。 |
Copy | 复制选中内容并将其放入用户剪贴板。 |
Paste | 将当前剪贴板内容粘贴到编辑器中。 |
ForeColor | 更改文本的颜色。传入的值应为颜色值。 |
BackColor | 更改文本的背景颜色。传入的值应为颜色值。 |
JustifyLeft | 将当前文本块/图像左对齐。 |
JustifyCenter | 将当前文本块/图像居中对齐。 |
JustifyRight | 将当前文本块/图像右对齐。 |
JustifyFull | 将当前文本块/图像两端对齐。 |
FontName | 应用于文本的字体名称。传入的值应为字体族名称。 |
FontSize | 文本的字体大小。传入的值应为有效的 CSS 字体大小。 |
FormatBlock | 切换当前选中内容的格式。传入的值应为格式名称。如果未指定格式,则会切换段落( |
RemoveFormat | 移除当前选中内容的任何格式。 |
Indent | 缩进当前选中内容。 |
Outdent | 减少当前选中内容的缩进。 |
CreateLink | 在当前选中内容处插入链接。值为要添加到链接的 URL。 |
Unlink | 移除当前选中内容的所有链接。 |
InsertHorizontalRule | 在光标位置或当前选中内容处插入水平线。 |
InsertParagraph | 在当前光标或选中内容处插入新段落或新行。 |
InsertText | 将传入的值作为纯文本插入到当前光标或选中内容处。 |
InsertHTML | 将传入的值作为 HTML 插入到当前光标或选中内容处。 |
InsertImage | 在当前光标或选中内容处添加图像 |
SelectAll | 选择编辑器中的所有内容。 |
Delete | 删除编辑器中当前选中的内容。 |
ForwardDelete | 删除当前选中的内容,对于折叠选中内容,则删除光标右侧的字符。 |
Redo | 重做对编辑器的上一次更改。 |
Undo | 撤销对编辑器的上一次更改。 |
tinymce.activeEditor.execCommand('Bold');
tinymce.activeEditor.execCommand('Italic');
tinymce.activeEditor.execCommand('Underline');
tinymce.activeEditor.execCommand('Strikethrough');
tinymce.activeEditor.execCommand('Superscript');
tinymce.activeEditor.execCommand('Subscript');
tinymce.activeEditor.execCommand('Cut');
tinymce.activeEditor.execCommand('Copy');
tinymce.activeEditor.execCommand('Paste');
tinymce.activeEditor.execCommand('JustifyLeft');
tinymce.activeEditor.execCommand('JustifyCenter');
tinymce.activeEditor.execCommand('JustifyRight');
tinymce.activeEditor.execCommand('JustifyFull');
tinymce.activeEditor.execCommand('ForeColor', false, '#FF0000');
tinymce.activeEditor.execCommand('BackColor', false, '#FF0000');
tinymce.activeEditor.execCommand('FontName', false, 'courier new');
tinymce.activeEditor.execCommand('FontSize', false, '30px');
tinymce.activeEditor.execCommand('FormatBlock', false, 'bold');
tinymce.activeEditor.execCommand('RemoveFormat');
tinymce.activeEditor.execCommand('Indent');
tinymce.activeEditor.execCommand('Outdent');
tinymce.activeEditor.execCommand('CreateLink', false, 'https://www.tiny.cloud');
tinymce.activeEditor.execCommand('Unlink');
tinymce.activeEditor.execCommand('InsertHorizontalRule');
tinymce.activeEditor.execCommand('InsertParagraph');
tinymce.activeEditor.execCommand('InsertText', false, 'My text content');
tinymce.activeEditor.execCommand('InsertHTML', false, 'My HTML content');
tinymce.activeEditor.execCommand('InsertImage', false, 'https://www.example.com/image.png');
tinymce.activeEditor.execCommand('SelectAll');
tinymce.activeEditor.execCommand('Delete');
tinymce.activeEditor.execCommand('ForwardDelete');
tinymce.activeEditor.execCommand('Redo');
tinymce.activeEditor.execCommand('Undo');其他核心命令
下表中的命令由 TinyMCE 编辑器提供,提供不需要启用任何插件的附加功能。
| 命令 | 描述 |
|---|---|
HiliteColor | 更改文本的背景颜色。传入的值应为颜色。注意:这是 |
InsertLineBreak | 在当前光标或选区处添加一个换行符 |
InsertNewBlockAfter | 在包含当前选区的块之后立即在当前 TinyMCE 文档的根级别插入一个空块。 |
InsertNewBlockBefore | 在包含当前选区的块之前立即在当前 TinyMCE 文档的根级别插入一个空块。 |
JustifyNone | 移除所选文本的任何对齐方式。 |
Lang | 设置当前选区的语言。传入的值应为 内容外观选项 - |
LineHeight | 设置文本的行高。传入的值应为有效的 CSS 行高。 |
mceAddUndoLevel | 添加一个撤销级别。 |
mceApplyTextcolor | 将文本颜色或背景颜色应用于当前选区。需要一个 |
mceAutocompleterClose | 关闭任何活动的自动补全菜单。 |
mceAutocompleterReload | 使用新项重新加载自动补全菜单。有关提供的数据,请参阅 Autocompleter reload API。 |
mceBlockQuote | 将选中的文本块包装到块引用中。 |
mceCleanup | 复制当前编辑器内容并使用副本设置内容。 |
mceEndUndoLevel | 添加一个撤销级别。 |
mceFocus | 聚焦并激活编辑器。将 DOM 焦点放在编辑器内,并将编辑器设置为页面上的活动编辑器实例。 |
mceInsertClipboardContent | 在光标位置或当前选区上触发粘贴事件。该命令需要一个对象,其中包含: |
mceInsertContent | 在当前选区插入内容。传入的值应为要插入的内容。 |
mceInsertLink | 在当前选区插入链接。值为要添加到链接中的 URL。注意:这是 |
mceInsertNewLine | 在当前光标或选区处添加一个新行,例如拆分当前段落元素。可以使用 newline_behavior 选项控制此设置的行为。 |
mceNewDocument | 移除编辑器的所有内容。 |
mcePrint | 打开当前页面的浏览器打印对话框。 |
mceRemoveNode | 移除当前节点或作为值传递的目标节点( |
mceRemoveTextcolor | 移除当前选区的文本颜色或背景颜色。需要传入参数 |
mceReplaceContent | 替换当前选区内容。传入的值应该是新的内容。 |
mceSelectNode | 选中编辑器中的一个节点。目标节点作为值传入( |
mceSelectNodeDepth | 选中当前节点上方 'n' 个层级的父 DOM 节点。 |
mceSetContent | 设置编辑器的内容。传入的值将作为编辑器内容进行设置。 |
mceToggleFormat | 按名称切换指定的格式。传入的值是要切换的格式名称。查看选项列表:内容格式选项 - 内置格式。 |
mceTogglePlainTextPaste | 切换纯文本粘贴模式。 |
mceToggleVisualAid | 切换以下元素的可视化辅助显示:无边框表格和锚点。 |
ToggleSidebar | 关闭当前侧边栏,或者如果提供了侧边栏名称作为值( |
ToggleToolbarDrawer | 切换工具栏抽屉。可以配合 |
tinymce.activeEditor.execCommand('HiliteColor', false, '#FF0000');
tinymce.activeEditor.execCommand('InsertLineBreak');
tinymce.activeEditor.execCommand('InsertNewBlockAfter')
tinymce.activeEditor.execCommand('InsertNewBlockBefore')
tinymce.activeEditor.execCommand('JustifyNone');
tinymce.activeEditor.execCommand('Lang', false, { code: 'en_US' }); /* 或者 */
tinymce.activeEditor.execCommand('Lang', false, { code: 'en_US', customCode: 'en-us-medical' });
tinymce.activeEditor.execCommand('LineHeight', false, '1.4');
tinymce.activeEditor.execCommand('mceAddUndoLevel');
tinymce.activeEditor.execCommand('mceApplyTextcolor', 'hilitecolor', '#FF0000');
tinymce.activeEditor.execCommand('mceAutocompleterClose');
tinymce.activeEditor.execCommand('mceAutocompleterReload', false, {
fetchOptions: {}
});
tinymce.activeEditor.execCommand('mceBlockQuote');
tinymce.activeEditor.execCommand('mceCleanup');
tinymce.activeEditor.execCommand('mceEndUndoLevel');
tinymce.activeEditor.execCommand('mceFocus');
tinymce.activeEditor.execCommand('mceInsertClipboardContent', false, {
html: '<p>Hello, World!</p>'
});
tinymce.activeEditor.execCommand('mceInsertContent', false, 'My new content');
tinymce.activeEditor.execCommand('mceInsertLink', false, 'https://www.tiny.cloud');
tinymce.activeEditor.execCommand('mceInsertNewLine');
tinymce.activeEditor.execCommand('mceNewDocument');
tinymce.activeEditor.execCommand('mcePrint');
tinymce.activeEditor.execCommand('mceRemoveNode'); /* 或者 */
tinymce.activeEditor.execCommand('mceRemoveNode', false, '<DOM_node>');
tinymce.activeEditor.execCommand('mceSelectNode', false, '<DOM_node>');
tinymce.activeEditor.execCommand('mceSelectNodeDepth', false, 2); // 向上选择两个节点。
tinymce.activeEditor.execCommand('mceSetContent', false, 'My content');
tinymce.activeEditor.execCommand('mceRemoveTextcolor', 'hilitecolor');
tinymce.activeEditor.execCommand('mceReplaceContent', false, 'My replacement content');
tinymce.activeEditor.execCommand('mceToggleFormat', false, 'bold');
tinymce.activeEditor.execCommand('mceTogglePlainTextPaste');
tinymce.activeEditor.execCommand('mceToggleVisualAid');
tinymce.activeEditor.execCommand('ToggleSidebar'); /* 或者 */
tinymce.activeEditor.execCommand('ToggleSidebar', false, '<sidebar-name>');
tinymce.activeEditor.execCommand('ToggleToolbarDrawer', false, null, { skip_focus: true });核心表格命令
以下命令提供了在编辑器内与表格进行交互的功能。这些命令不需要 table 插件 即可使用。
表格行和表格列的剪切、复制和粘贴命令使用的是 TinyMCE 的内部表格剪贴板,而不是用户的系统剪贴板。
| 命令 | 描述 |
|---|---|
mceTableSizingMode | 当 |
mceTableApplyCellStyle | 将指定的样式应用于选中的单元格。可以通过此命令更改以下样式: |
mceTableSplitCells | 拆分当前合并的表格单元格。 |
mceTableMergeCells | 合并选中的单元格。 |
mceTableInsertRowBefore | 在当前行之前插入一行。 |
mceTableInsertRowAfter | 在当前行之后插入一行。 |
mceTableInsertColBefore | 在当前列之前插入一列。 |
mceTableInsertColAfter | 在当前列之后插入一列。 |
mceTableDeleteCol | 删除当前列。 |
mceTableDeleteRow | 删除当前行。 |
mceTableCutRow | 将当前行剪切到TinyMCE剪贴板。 |
mceTableCutCol | 将当前列剪切到TinyMCE剪贴板。 |
mceTableCopyRow | 将当前行复制到TinyMCE剪贴板。 |
mceTableCopyCol | 将当前列复制到TinyMCE剪贴板。 |
mceTablePasteRowBefore | 在当前行之前粘贴TinyMCE剪贴板中的行。 |
mceTablePasteRowAfter | 在当前行之后粘贴TinyMCE剪贴板中的行。 |
mceTablePasteColBefore | 在当前行之前粘贴TinyMCE剪贴板中的列。 |
mceTablePasteColAfter | 在当前行之后粘贴TinyMCE剪贴板中的列。 |
mceTableDelete | 删除当前表格。 |
mceTableCellToggleClass | 为所有未添加该类的选定单元格添加该类,若所有单元格都已添加则移除该类。 |
mceTableToggleClass | 为选定表格添加类,若该类已存在则移除。 |
mceTableToggleCaption | 为选定表格添加标题,若标题已存在则移除。 |
mceInsertTable | 插入指定行数和列数的表格。 |
mceTableRowType | 将当前行或多行更改为指定类型,包括: |
mceTableColType | 将当前列或多列中的所有单元格更改为指定类型,包括: |
mceTableCellType | 将当前单元格或多个单元格更改为指定类型,包括: |
tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'fixed');
tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'relative');
tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'responsive');
tinymce.activeEditor.execCommand('mceTableApplyCellStyle', false, { 'background-color': 'red', 'border-color': 'blue' });
tinymce.activeEditor.execCommand('mceTableApplyCellStyle', false, { 'background-color': '' }); // removes the current background-color
tinymce.activeEditor.execCommand('mceTableSplitCells');
tinymce.activeEditor.execCommand('mceTableMergeCells');
tinymce.activeEditor.execCommand('mceTableInsertRowBefore');
tinymce.activeEditor.execCommand('mceTableInsertRowAfter');
tinymce.activeEditor.execCommand('mceTableInsertColBefore');
tinymce.activeEditor.execCommand('mceTableInsertColAfter');
tinymce.activeEditor.execCommand('mceTableDeleteCol');
tinymce.activeEditor.execCommand('mceTableDeleteRow');
tinymce.activeEditor.execCommand('mceTableCutRow');
tinymce.activeEditor.execCommand('mceTableCutCol');
tinymce.activeEditor.execCommand('mceTableCopyRow');
tinymce.activeEditor.execCommand('mceTableCopyCol');
tinymce.activeEditor.execCommand('mceTablePasteRowBefore');
tinymce.activeEditor.execCommand('mceTablePasteRowAfter');
tinymce.activeEditor.execCommand('mceTablePasteColBefore');
tinymce.activeEditor.execCommand('mceTablePasteColAfter');
tinymce.activeEditor.execCommand('mceTableDelete');
tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 2, columns: 2 });
tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 3, columns: 2, options: { headerRows: 1 } });
tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 3, columns: 2, options: { headerRows: 1, headerColumns: 1 } });
tinymce.activeEditor.execCommand('mceTableToggleClass', false, 'myclass');
tinymce.activeEditor.execCommand('mceTableCellToggleClass', false, 'mycellclass');
tinymce.activeEditor.execCommand('mceTableToggleCaption');
tinymce.activeEditor.execCommand('mceTableRowType', false, { type: 'header' });
tinymce.activeEditor.execCommand('mceTableColType', false, { type: 'th' });
tinymce.activeEditor.execCommand('mceTableCellType', false, { type: 'th' });插件命令
以下插件可用命令:
Advanced Lists
Enhanced Tables
Anchor
TinyMCE AI
Autoresize
Case Change
Character Map
Code
Code Sample
Comments
Directionality
Enhanced Code Editor
Emoticons
Export to PDF
Export to Word
Footnotes
Format Painter
Full Screen
Help
Image
Import from Word
Image Editing
Insert Date/Time
Link
Lists
List Styles
Math
Media
Nonbreaking Space
Page Break
Permanent Pen
PowerPaste
Preview
Revision History
Save
Search and Replace
Spell Checker
Table
Table of Content
Templates
Visual Blocks
视觉字符
字数统计
高级列表
以下命令需要高级列表 (advlist) 插件。
| 命令 | 描述 |
|---|---|
ApplyOrderedListStyle | 将当前选择转换为有序列表。接受一个指定列表类型的对象。 |
ApplyUnorderedListStyle | 将当前选择转换为无序列表。接受一个指定列表类型的对象。 |
有关可用列表类型的信息,请参阅:MDN web docs - list-style-type。
示例tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, {
'list-style-type': 'decimal'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
'list-style-type': 'disc'
});增强表格
以下命令需要增强表格 (advtable) 插件。
| 命令 | 描述 |
|---|---|
mceAdvancedTableSort | 为当前选择或光标位置打开增强表格排序对话框。 |
mceSortTableAdvanced | 执行增强表格排序。详情请参阅使用 |
mceSortTableByColumnAsc | 根据当前光标位置或选择按列升序排序当前表格。 |
mceSortTableByColumnDesc | 根据当前光标位置或选择按列降序排序当前表格。 |
mceSortTableByRowAsc | 根据当前光标位置或选择按行升序排序当前表格。 |
mceSortTableByRowDesc | 根据当前光标位置或选择按行降序排序当前表格。 |
mceTableToggleSeries | 在所选表格中切换系列列。详情请参阅使用 |
tinymce.activeEditor.execCommand('mceAdvancedTableSort');
tinymce.activeEditor.execCommand('mceSortTableAdvanced', false, { sortby: 'row', roworcol: '2', sort: 'table', order: 'ascending' });
tinymce.activeEditor.execCommand('mceSortTableByColumnAsc');
tinymce.activeEditor.execCommand('mceSortTableByColumnDesc');
tinymce.activeEditor.execCommand('mceSortTableByRowAsc');
tinymce.activeEditor.execCommand('mceSortTableByRowDesc');
tinymce.activeEditor.execCommand('mceTableToggleSeries', false, { name: 'numeric' });使用 mceSortTableAdvanced
mceSortTableAdvanced 接受具有以下键值对的对象:
| 名称 | 值 | 要求 | 描述 |
|---|---|---|---|
sortby |
| 必填 | |
roworcol |
| 必填 | 一个从零开始的整数字符串,表示从表格顶部开始的行或从表格左侧开始的列。 |
sort |
| 必填 | |
order |
| 必填 |
使用 mceTableToggleSeries
mceTableToggleSeries 接受具有以下键值对的对象:
| 名称 | 值 | 要求 | 描述 |
|---|---|---|---|
name |
| 必填 | 指定要切换的系列。系列及其关联名称使用 |
如果表格已经有一个使用 name 中指定系列的系列列,则该系列列将从表格中移除。否则,将创建一个新的系列列,替换表格中可能已经存在的任何其他系列列。
锚点
以下命令需要锚点 (anchor) 插件。
| 命令 | 描述 |
|---|---|
mceAnchor | 打开插入/编辑锚点对话框。 |
tinymce.activeEditor.execCommand('mceAnchor');自动调整大小
以下命令需要自动调整大小 (autoresize) 插件。
| 命令 | 描述 |
|---|---|
mceAutoResize | 自动调整编辑器大小以适应当前内容。 |
手动自动调整大小触发器
mceAutoResize 命令可用于手动触发自动调整大小功能。这在以下情况下非常有用:
内容是动态添加或通过编程方式删除的
外部更改后需要调整编辑器大小
您想确保编辑器大小在特定时刻与其内容匹配
// 调整活动编辑器的大小
tinymce.activeEditor.execCommand('mceAutoResize');
// 按 ID 调整特定编辑器的大小
tinymce.get('my-editor-id').execCommand('mceAutoResize');大小写转换
以下命令需要大小写转换(casechange)插件。
| 命令 | 描述 |
|---|---|
mceLowerCase | 将选中文本转换为小写。 |
mceTitleCase | 将选中文本转换为标题大写。 |
mceUpperCase | 将选中文本转换为大写。 |
tinymce.activeEditor.execCommand('mceLowerCase');
tinymce.activeEditor.execCommand('mceTitleCase');
tinymce.activeEditor.execCommand('mceUpperCase');字符映射表
以下命令需要字符映射表(charmap)插件。
| 命令 | 描述 |
|---|---|
mceShowCharmap | 打开字符映射表对话框。 |
tinymce.activeEditor.execCommand('mceShowCharmap');代码
以下命令需要代码(code)插件。
| 命令 | 描述 |
|---|---|
mceCodeEditor | 打开代码编辑器对话框。 |
tinymce.activeEditor.execCommand('mceCodeEditor');代码示例
以下命令需要代码示例(codesample)插件。
| 命令 | 描述 |
|---|---|
CodeSample | 在光标位置打开代码示例对话框,或将当前选择内容转换为 |
tinymce.activeEditor.execCommand('CodeSample');评论
以下命令需要评论(tinycomments)插件。
| 命令 | 描述 |
|---|---|
tc-delete-conversation-at-cursor | 尝试删除光标位置处的评论。删除前会显示确认对话框。 |
tc-try-delete-all-conversations | 尝试删除编辑器中的所有评论。删除前会显示确认对话框。 |
ToggleSidebar | 切换指定侧边栏的打开或关闭状态。当与 'showcomments' 参数一起使用时,会打开评论侧边栏。 |
tinymce.activeEditor.execCommand('tc-delete-conversation-at-cursor');
tinymce.activeEditor.execCommand('tc-try-delete-all-conversations');
tinymce.activeEditor.execCommand('ToggleSidebar', false, 'showcomments');文字方向
以下命令需要文字方向(directionality)插件。
| 命令 | 描述 |
|---|---|
mceDirectionLTR | 将文字方向更改为从左到右(LTR)。 |
mceDirectionRTL | 将文字方向更改为从右到左(RTL)。 |
tinymce.activeEditor.execCommand('mceDirectionLTR');
tinymce.activeEditor.execCommand('mceDirectionRTL');增强型代码编辑器
以下命令需要增强型代码编辑器(advcode)插件。
| 命令 | 描述 |
|---|---|
mceCodeEditor | 打开代码编辑器对话框。 |
tinymce.activeEditor.execCommand('mceCodeEditor');表情符号
以下命令需要表情符号(emoticons)插件。
| 命令 | 描述 |
|---|---|
mceEmoticons | 打开表情符号对话框。 |
tinymce.activeEditor.execCommand('mceEmoticons');导出为 PDF
以下命令需要导出为 PDF(exportpdf)插件。
| 命令 | 描述 |
|---|---|
ExportPDF | 直接从编辑器生成 PDF 文件,文件名为 |
tinymce.activeEditor.execCommand('ExportPDF');导出为 Word
以下命令需要导出为 Word(exportword)插件。
| 命令 | 描述 |
|---|---|
ExportWord | 使用 |
tinymce.activeEditor.execCommand('ExportWord');脚注
以下命令需要脚注 (footnotes)插件。
| 命令 | 描述 |
|---|---|
mceInsertFootnote | 在编辑器中的选区插入上标脚注编号,并在脚注部分创建一个新的条目,该条目链接到该脚注。 |
mceUpdateFootnotes | 手动更新 TinyMCE 文档中所有脚注的状态。 |
tinymce.activeEditor.execCommand('mceInsertFootnote');
tinymce.activeEditor.execCommand('mceUpdateFootnotes');格式刷
以下命令需要格式刷 (formatpainter)插件。
| 命令 | 描述 |
|---|---|
mceRetrieveFormats | 检索当前选区的格式。 |
mcePaintFormats | 将使用 |
mceToggleFormatPainter | 切换格式刷。 |
tinymce.activeEditor.execCommand('mceRetrieveFormats');
tinymce.activeEditor.execCommand('mcePaintFormats');
tinymce.activeEditor.execCommand('mceToggleFormatPainter');全屏
以下命令需要全屏 (fullscreen)插件,且仅在编辑器处于经典模式时适用。
| 命令 | 描述 |
|---|---|
mceFullScreen | 切换全屏模式。 |
tinymce.activeEditor.execCommand('mceFullScreen');帮助
以下命令需要帮助 (help)插件。
| 命令 | 描述 |
|---|---|
mceHelp | 打开编辑器帮助对话框。 |
tinymce.activeEditor.execCommand('mceHelp');图片
以下命令需要图片 (image)插件。
| 命令 | 描述 |
|---|---|
mceImage | 打开插入/编辑图片对话框。 |
tinymce.activeEditor.execCommand('mceImage');从 Word 导入
以下命令需要从 Word 导入 (importword)插件。
| 命令 | 描述 |
|---|---|
ImportWord | 打开文件选择器,允许将 |
document.querySelector('button').addEventListener('click',
() => tinymce.activeEditor.execCommand('ImportWord')
);ImportWord 命令不能直接通过脚本在顶层或浏览器控制台中调用。相反,它需要在用户界面中进行特定的用户操作,例如点击工具栏按钮。为了确保正确执行,该命令应在与特定用户交互相关的事件处理程序的作用域内调用,如示例所示。图片编辑
以下命令需要图片编辑 (editimage)插件。
| 命令 | 描述 |
|---|---|
mceEditImage | 打开图片编辑对话框。 |
mceImageRotateRight | 顺时针旋转所选图片 90 度。 |
mceImageRotateLeft | 逆时针旋转所选图片 90 度。 |
mceImageFlipVertical | 垂直翻转所选图片。 |
mceImageFlipHorizontal | 水平翻转所选图片。 |
tinymce.activeEditor.execCommand('mceEditImage');
tinymce.activeEditor.execCommand('mceImageRotateRight');
tinymce.activeEditor.execCommand('mceImageRotateLeft');
tinymce.activeEditor.execCommand('mceImageFlipVertical');
tinymce.activeEditor.execCommand('mceImageFlipHorizontal');插入日期/时间
以下命令需要插入日期/时间 (insertdatetime)插件。
| 命令 | 描述 |
|---|---|
mceInsertDate | 插入当前日期,以人类可读的字符串形式显示。 |
mceInsertTime | 插入当前时间,以人类可读的字符串形式显示。 |
tinymce.activeEditor.execCommand('mceInsertDate');
tinymce.activeEditor.execCommand('mceInsertTime');链接
以下命令需要 Link (link) 插件。
| 命令 | 描述 |
|---|---|
mceLink | 在当前光标位置或当前选区打开 Link 对话框或链接上下文工具栏。行为取决于 |
tinymce.activeEditor.execCommand('mceLink');示例:始终打开完整的 Link 对话框tinymce.activeEditor.execCommand('mceLink', false, { dialog: true });列表
以下命令需要 Lists (lists) 插件。
| 命令 | 描述 |
|---|---|
InsertDefinitionList | 在编辑器中插入定义列表。 |
InsertOrderedList | 在编辑器中插入有序列表。 |
InsertUnorderedList | 在编辑器中插入无序列表。 |
mceListUpdate | 更新列表属性或样式。 |
mceListProps | 打开列表属性对话框。 |
RemoveList | 从选区中移除列表元素。 |
tinymce.activeEditor.execCommand('InsertDefinitionList', false, {
'list-item-attributes': {class: 'mylistitemclass'},
'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertOrderedList', false, {
'list-style-type': 'decimal',
'list-item-attributes': {class: 'mylistitemclass'},
'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertUnorderedList', false, {
'list-style-type': 'disc',
'list-item-attributes': {class: 'mylistitemclass'},
'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
styles: { 'background-color': 'powderblue' }
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
attrs: { contenteditable: 'false' }
});
tinymce.activeEditor.execCommand('mceListProps');
tinymce.activeEditor.execCommand('RemoveList');列表样式
以下命令需要 List Styles (advlist) 插件。
| 命令 | 描述 |
|---|---|
ApplyOrderedListStyle | 将当前选区转换为有序列表。接受指定列表类型的对象。 |
ApplyUnorderedListStyle | 将当前选区转换为无序列表。接受指定列表类型的对象。 |
有关可用列表类型的信息,请参阅:MDN web docs - list-style-type。
示例tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, {
'list-style-type': 'decimal'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
'list-style-type': 'disc'
});数学
以下命令需要 Math (math) 插件。
| 命令 | 描述 |
|---|---|
Math | 此命令打开 Math 对话框。 |
tinymce.activeEditor.execCommand('Math');媒体
以下命令需要 Media (media) 插件。
| 命令 | 描述 |
|---|---|
mceMedia | 打开插入/编辑媒体对话框。 |
tinymce.activeEditor.execCommand('mceMedia');不换行空格
以下命令需要 Nonbreaking Space (nonbreaking) 插件。
| 命令 | 描述 |
|---|---|
mceNonBreaking | 在光标位置插入不换行空格或覆盖当前选区。 |
tinymce.activeEditor.execCommand('mceNonBreaking');分页符
以下命令需要 Page Break (pagebreak) 插件。
| 命令 | 描述 |
|---|---|
mcePageBreak | 在光标位置插入虚拟分页符 ( |
tinymce.activeEditor.execCommand('mcePageBreak');永久钢笔
以下命令需要 Permanent Pen (permanentpen) 插件。
| 命令 | 描述 |
|---|---|
mceConfigurePermanentPen | 打开 Permanent Pen 对话框。 |
mceTogglePermanentPen | 切换永久笔。 |
tinymce.activeEditor.execCommand('mceConfigurePermanentPen');
tinymce.activeEditor.execCommand('mceTogglePermanentPen');PowerPaste
以下命令需要 PowerPaste (powerpaste) 插件。
| 命令 | 描述 |
|---|---|
mceInsertClipboardContent | 在光标位置或当前选区触发粘贴事件。HTML 内容将自动检测为 Word、Google Docs 或标准 HTML 内容,并使用相关的粘贴路径。该命令需要一个对象,包含: |
mceTogglePlainTextPaste | 切换以纯文本粘贴。 |
tinymce.activeEditor.execCommand('mceInsertClipboardContent', false, {
html: '<p>Hello, World!</p>'
});
tinymce.activeEditor.execCommand('mceTogglePlainTextPaste');Preview
以下命令需要 Preview (preview) 插件。
| 命令 | 描述 |
|---|---|
mcePreview | 显示编辑器内容的预览。 |
tinymce.activeEditor.execCommand('mcePreview');Revision History
以下命令需要 Revision History (revisionhistory) 插件。
| 命令 | 描述 |
|---|---|
revisionHistory | 切换 Revision History 视图 |
tinymce.activeEditor.execCommand('revisionHistory');Save
以下命令需要 Save (save) 插件。
| 命令 | 描述 |
|---|---|
mceCancel | 将编辑器内容重置为使用 |
mceSave | 保存当前编辑器内容。 |
tinymce.activeEditor.execCommand('mceCancel');
tinymce.activeEditor.execCommand('mceSave');Search and Replace
以下命令需要 Search and Replace (searchreplace) 插件。
| 命令 | 描述 |
|---|---|
SearchReplace | 打开搜索和替换对话框。 |
tinymce.activeEditor.execCommand('SearchReplace');Spell Checker
以下命令需要 Spell Checker (tinymcespellchecker) 插件。
| 命令 | 描述 |
|---|---|
mceSpellcheckEnable | 开启拼写检查。 |
mceSpellcheckDisable | 关闭拼写检查。 |
mceSpellcheckDialog | 打开拼写检查对话框。 |
mceSpellcheckDialogClose | 关闭拼写检查对话框。 |
mceSpellcheckUpdate | 检查编辑器内容中新的拼写错误,对其进行高亮显示,并提供拼写建议。 |
tinymce.activeEditor.execCommand('mceSpellcheckEnable');
tinymce.activeEditor.execCommand('mceSpellcheckDisable');
tinymce.activeEditor.execCommand('mceSpellcheckDialog');
tinymce.activeEditor.execCommand('mceSpellcheckDialogClose');
tinymce.activeEditor.execCommand('mceSpellcheckUpdate');Table
有关核心表格功能提供的其他命令,请参阅 Core Table Commands。
以下命令需要 Table (table) 插件。
| 命令 | 描述 |
|---|---|
mceInsertTableDialog | 打开插入/编辑表格对话框。 |
mceTableProps | 打开表格属性对话框。 |
mceTableRowProps | 打开表格行属性对话框。 |
mceTableCellProps | 打开表格单元格属性对话框。 |
tinymce.activeEditor.execCommand('mceInsertTableDialog');
tinymce.activeEditor.execCommand('mceTableProps');
tinymce.activeEditor.execCommand('mceTableRowProps');
tinymce.activeEditor.execCommand('mceTableCellProps');Table of Contents
以下命令需要 Table of Contents (tableofcontents) 插件。
| 命令 | 描述 |
|---|---|
mceInsertToc | 在编辑器中插入目录。 |
mceUpdateToc | 更新现有的目录。 |
tinymce.activeEditor.execCommand('mceInsertToc');
tinymce.activeEditor.execCommand('mceUpdateToc');TinyMCE AI
TinyMCE AI (tinymceai) 插件注册了 AI Chat 和 AI Review 侧边栏、与快速操作相关的编辑器命令,并使用核心 ToggleSidebar 命令来控制侧边栏的显示。以下部分涵盖了 ToggleSidebar、浮动侧边栏行为和插件命令名称。
切换 AI Chat 和 AI Review 侧边栏
AI Chat 和 AI Review 使用由插件注册的侧边栏。要通过编程方式显示或隐藏它们,请使用核心 ToggleSidebar 命令(在 Miscellaneous Core Commands 表中列出),而不是 tinymceai 插件定义的命令。将侧边栏标识符作为第三个参数传递:
'tinymceai-chat'— AI Chat'tinymceai-review'— AI Review
// 打开 AI Chat 侧边栏
tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-chat');
// 关闭当前侧边栏(再次传递相同的 ID 以关闭)
tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-chat');
// 打开 AI Review 侧边栏
tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-review');无论tinymceai_sidebar_type是'static'还是'floating',这些命令都有效。ToggleSidebar事件和queryCommandValue('ToggleSidebar')对于两种侧边栏类型的行为也相同。
TinyMCE AI 插件命令
tinymceai 插件注册了以下编辑器命令。它们与快速操作、聊天和审查用户界面相对应:每次调用都会立即返回,而插件会异步执行任何网络和 UI 操作。
| 命令 | 第三个参数 | 描述 |
|---|---|---|
| 运行改进写作快速操作。 | |
| 运行继续写作快速操作。 | |
| 运行修正语法和拼写快速操作。 | |
| 运行精简内容。 | |
| 运行扩展内容。 | |
| 运行更随意的语气。 | |
| 运行更直接的语气。 | |
| 运行更友好的语气。 | |
| 运行更自信的语气。 | |
| 运行更专业的语气。 | |
|
| 使用给定的语言标签运行翻译(与 |
|
| 使用给定的提示和模型运行自定义快速操作(与 |
| 使用内置的解释提示打开聊天。 | |
| 使用内置的总结提示打开聊天。 | |
| 使用内置的突出关键点提示打开聊天。 | |
|
| 如果需要,打开聊天侧边栏,然后将 |
| 运行校对审查。 | |
| 运行提高清晰度审查。 | |
| 运行提高可读性审查。 | |
| 使用更长选项运行更改长度审查。 | |
| 使用Shorter选项运行Change length审阅。 | |
| 使用Casual语气运行Adjust tone and style审阅。 | |
| 使用Direct语气运行Adjust tone and style审阅。 | |
| 使用Friendly语气运行Adjust tone and style审阅。 | |
| 使用Confident语气运行Adjust tone and style审阅。 | |
| 使用Professional语气运行Adjust tone and style审阅。 | |
|
| 通过自定义提示运行审阅,或按标识符运行集成商定义的审阅。请参阅 |
每个 TinyMCEAIReview…命令都会打开“审阅”侧边栏并运行审阅,其结果与在侧边栏中选择该审阅相同。在一个审阅进行时运行另一个审阅命令会停止先前的审阅并启动所请求的审阅。
示例:翻译和自定义快速操作命令名称针对Explain、Summarize和Highlight key points使用
TinyMCEAIQuickActions…前缀(带有s)——这些映射到聊天提示子菜单,而非独立的TinyMCEAIQuickAction…拼写。
tinymce.activeEditor.execCommand('TinyMCEAIQuickActionTranslate', false, 'swedish');
tinymce.activeEditor.execCommand('TinyMCEAIQuickActionCustom', false, {
prompt: 'Uppercase text',
model: 'gpt-4.1'
});示例:UI 中带有较短标签的聊天提示tinymce.activeEditor.execCommand('TinyMCEAIChatPrompt', false, {
prompt: 'Explain the current selection in Klingon',
displayedPrompt: 'Explain'
});示例:运行内置审阅tinymce.activeEditor.execCommand('TinyMCEAIReviewProofread');
tinymce.activeEditor.execCommand('TinyMCEAIReviewToneProfessional');TinyMCEAIReviewCustom的值
TinyMCEAIReviewCustom命令接受三种形式的第三个参数。
使用String会在“审阅”侧边栏中选择的模型上,通过该提示运行审阅,标题为Custom review:
tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, 'Check for passive voice');带有prompt属性的对象会通过自定义提示运行审阅:
prompt(String):发送到模型的提示。此属性为必填。model(可选String):运行审阅的模型。省略时,审阅会在“审阅”侧边栏中选择的模型上运行,该模型最初是tinymceai_default_model设置的默认模型。有关可用模型标识符,请参阅AI 模型。name(可选String):显示在审阅上方的标题。省略时,标题为Custom review。
tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, {
prompt: 'Check the document for passive voice',
model: 'agent-1',
name: 'Passive voice'
});带有id属性的对象会运行在tinymceai_reviews中配置的集成商定义的审阅:
id(String):集成商定义的审阅的id。此属性为必填。value(可选String):传递给审阅的值。simple审阅不接受值。对于list审阅,值必须与审阅的某个options值匹配;省略时,使用第一个选项。对于input审阅,值是替换到提示中的文本,此为必填。
tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, {
id: 'integrator-list-review',
value: 'swedish'
});当值与这些形式中的任何一种都不匹配时,TinyMCE 会向浏览器控制台记录错误且不运行审阅。这也适用于提示或标识符为空白、没有集成商定义的审阅与标识符匹配、list审阅值不是其选项之一,以及运行input审阅时未提供值的情况。
模板
以下命令需要模板(advtemplate)插件。
| 命令 | 描述 |
|---|---|
AdvTemplateAddDialog | 打开“添加模板”对话框,允许将当前选择添加为模板。 |
AdvTemplateInsertDialog | 打开“插入模板”对话框,允许在当前选择处插入模板 |
AdvTemplateInsertTemplateById | 添加一个由其 ID 值指定的新模板。 |
tinymce.activeEditor.execCommand('AdvTemplateAddDialog');
tinymce.activeEditor.execCommand('AdvTemplateInsertDialog');
// 将 ID 为 122 的新模板添加到文档中。
tinymce.activeEditor.execCommand('AdvTemplateInsertTemplateById', false, '122')可视化块
以下命令需要 可视化块(visualblocks)插件。
| 命令 | 描述 |
|---|---|
mceVisualBlocks | 切换可视化块的开启/关闭。 |
tinymce.activeEditor.execCommand('mceVisualBlocks');可视化字符
以下命令需要 可视化字符(visualchars)插件。
| 命令 | 描述 |
|---|---|
mceVisualChars | 切换可视化字符的开启/关闭。 |
tinymce.activeEditor.execCommand('mceVisualChars');字数统计
以下命令需要 字数统计(wordcount)插件。
| 命令 | 描述 |
|---|---|
mceWordCount | 打开字数统计摘要对话框。 |
tinymce.activeEditor.execCommand('mceWordCount');编辑器管理命令
以下命令用于管理编辑器实例。
例如:
tinymce.execCommand('mceAddEditor', false, { id: '<editor_id>', options: {} });
tinymce.execCommand('mceRemoveEditor', false, '<editor_id>');
tinymce.execCommand('mceToggleEditor', false, { id: '<editor_id>' });
tinymce.execCommand('mceToggleEditor', false, { index: '<editor_index>' });| 命令 | 描述 |
|---|---|
mceAddEditor | 将具有指定 ID 的 HTML 或 DOM 元素转换为使用指定编辑器配置选项的编辑器实例。有关配置编辑器的信息,请参见:基本设置。 |
mceRemoveEditor | 删除具有指定 ID 的编辑器实例。 |
mceToggleEditor | 如果未检测到指定 ID 的编辑器,则运行 |
查询命令状态
TinyMCE 提供了 queryCommandState API,允许开发者确定所选内容的当前状态。如果内容使用与相应命令相同的 CSS 样式和元素进行格式化,则查询将返回 true。
列出核心和插件查询命令状态
要从活动编辑器中检索可用的可查询状态列表,请在浏览器控制台中运行以下命令:
tinymce.activeEditor.editorCommands.commands.state;
可用的查询命令状态
以下命令状态可以使用 queryCommandState API 进行查询。
| 命令 | 描述 |
|---|---|
Bold | 如果内容使用与 TinyMCE |
InsertDefinitionList | 如果内容使用与 TinyMCE |
InsertOrderedList | 如果内容使用与 TinyMCE |
InsertUnorderedList | 如果内容使用与 TinyMCE |
Italic | 如果内容使用与 TinyMCE |
JustifyCenter | 如果内容使用与 TinyMCE |
JustifyFull | 如果内容使用与 TinyMCE |
JustifyLeft | 如果内容使用与 TinyMCE |
JustifyRight | 如果内容使用与 TinyMCE |
mceBlockQuote | 如果内容使用与 TinyMCE |
mceTogglePlainTextPaste | 如果 TinyMCE |
Outdent | 如果内容使用与 TinyMCE |
Strikethrough | 如果内容使用与 TinyMCE |
Subscript | 如果内容使用与 TinyMCE |
Superscript | 如果内容使用与 TinyMCE |
ToggleToolbarDrawer | 如果工具栏抽屉(Toolbar Drawer)处于打开状态,则返回 |
Underline | 如果内容使用与 TinyMCE |
tinymce.activeEditor.queryCommandState('Bold');
tinymce.activeEditor.queryCommandState('InsertDefinitionList');
tinymce.activeEditor.queryCommandState('InsertOrderedList');
tinymce.activeEditor.queryCommandState('InsertUnorderedList');
tinymce.activeEditor.queryCommandState('Italic');
tinymce.activeEditor.queryCommandState('JustifyCenter');
tinymce.activeEditor.queryCommandState('JustifyFull');
tinymce.activeEditor.queryCommandState('JustifyLeft');
tinymce.activeEditor.queryCommandState('JustifyRight');
tinymce.activeEditor.queryCommandState('mceBlockQuote');
tinymce.activeEditor.queryCommandState('mceTogglePlainTextPaste');
tinymce.activeEditor.queryCommandState('Outdent');
tinymce.activeEditor.queryCommandState('Strikethrough');
tinymce.activeEditor.queryCommandState('Subscript');
tinymce.activeEditor.queryCommandState('Superscript');
tinymce.activeEditor.queryCommandState('ToggleToolbarDrawer');
tinymce.activeEditor.queryCommandState('Underline');查询命令值
TinyMCE 提供了 queryCommandValue API,允许开发者确定所选内容的当前状态。查询将返回一个包含相关值的对象。
列出核心及插件查询命令值
要从激活的编辑器中检索可用的可查询命令值列表,请在浏览器控制台运行以下命令:
tinymce.activeEditor.editorCommands.commands.value;
可用的查询命令值
以下命令值可通过 queryCommandValue API 查询。
| 命令 | 描述 |
|---|---|
FontName | 返回当前选区的字体名称。 |
FontSize | 返回当前选区的字体大小。 |
LineHeight | 返回当前选区的行高。 |
ToggleSidebar | 返回侧边栏的当前状态(打开或关闭)。 |
ToggleView | 返回视图的当前状态,例如: |
tinymce.activeEditor.queryCommandValue('FontName');
tinymce.activeEditor.queryCommandValue('FontSize');
tinymce.activeEditor.queryCommandValue('LineHeight');
tinymce.activeEditor.queryCommandValue('ToggleSidebar');
tinymce.activeEditor.queryCommandValue('ToggleView');表格的查询命令值
以下与表格相关的值可通过 queryCommandValue API 查询。
| 值 | 描述 |
|---|---|
mceTableRowType | 返回当前表格行的类型,可能为: |
mceTableColType | 返回当前表格列的类型,可能为: |
mceTableCellType | 返回当前表格单元格的类型,可能为: |
tinymce.activeEditor.queryCommandValue('mceTableCellType');
tinymce.activeEditor.queryCommandValue('mceTableRowType');
tinymce.activeEditor.queryCommandValue('mceTableColType');