tinymce.Editor

此类包含 TinyMCE 编辑器的核心逻辑。

示例

// 为编辑器中的所有段落添加一个类。
tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('p'), 'someclass');

// 以文本形式获取当前编辑器的选区
tinymce.activeEditor.selection.getContent({ format: 'text' });

// 创建一个新的编辑器实例
const ed = new tinymce.Editor('textareaid', {
  some_setting: 1
}, tinymce.EditorManager);

ed.render();

摘要

属性

构造函数

方法

insertContent()

在光标位置插入内容。

Editor

isDirty()

返回编辑器是否处于脏状态（true/false）。当用户对内容进行修改后，编辑器将变为脏状态。

当用户在初始化后或上一次调用editor.save()之后修改编辑器内容时，脏状态会自动设置为true。这包括通过undo或redo进行的更改。

Editor

isHidden()

返回编辑器是否隐藏（true/false）。

Editor

load()

从转换editor实例的textarea、input或其他元素加载内容。此方法将使用setContents把内容从该textarea、input或其他元素移动到编辑器中，因此该方法的所有事件等也会被触发。

Editor

nodeChanged()

向所有观察者触发onNodeChange事件。当需要更新UI状态或元素路径等时，应调用此方法。

Editor

off()

按事件名称取消绑定到特定事件的事件监听器。有关每个事件的详细信息，请参阅事件参考。

Observable

on()

按事件名称绑定到特定事件的事件监听器。有关每个事件的详细信息，请参阅事件参考。

Observable

once()

绑定事件回调，并且在回调触发一次后将其移除。有关每个事件的详细信息，请参阅事件参考。

Observable

queryCommandState()

返回命令特定的状态，例如bold是否启用。

Editor

queryCommandSupported()

返回命令是否支持（true/false）。

Editor

queryCommandValue()

返回命令特定的值，例如当前的字体大小。

Editor

remove()

从DOM和tinymce集合中移除编辑器。

Editor

render()

渲染编辑器并将其添加到页面中。

Editor

resetContent()

重置编辑器内容、undo/redo历史记录和脏状态。如果未指定initialContent，则编辑器将重置为初始开始内容。

Editor

save()

将编辑器的内容保存到转换为编辑器实例的textarea或div元素中。此方法将使用getContents将HTML内容从编辑器移动到该textarea或div中，因此该方法的所有事件等也会被触发。

Editor

setContent()

设置指定内容到编辑器实例，在设置之前会使用不同的清理规则选项对内容进行清理。

注意：在TinyMCE 6.0中已弃用内容返回值，并已标记为在TinyMCE 7.0中删除。

Editor

setDirty()

显式设置脏状态。如果通过调用此方法将编辑器的脏状态从false变为true，则会触发dirty事件。

Editor

setEditableRoot()

更改编辑器根元素的可编辑状态。

Editor

setProgressState()

设置进度状态，这将显示编辑器的进度条。这对于诸如AJAX保存调用等异步操作是理想的选择。

Editor

show()

显示编辑器并隐藏编辑器应该替换的任何textarea/div。

Editor

translate()

通过用语言包项替换变量来翻译指定的字符串，还将检查是否有与输入匹配的键。

Editor

uploadImages()

将编辑器内容中的所有data uri/blob uri图像上传到服务器。

Editor

构造函数

Editor

public constructor function Editor(id: String, options: Object, editorManager: tinymce.EditorManager)

通过id构造editor实例。

参数

• id (String) - 编辑器的唯一id。

• options (Object) - 编辑器的选项。

• editorManager (EditorManager) - EditorManager实例。

方法

addCommand()

addCommand(name: String, callback: Function, scope: Object)

向编辑器添加自定义命令。此函数也可用于覆盖现有命令。添加的命令可以通过execCommand执行。

示例

// 添加一个稍后可以通过 execCommand 执行的自定义命令
tinymce.init({
 ...

  setup: (ed) => {
    // 注册示例命令
    ed.addCommand('mycommand', (ui, v) => {
      ed.windowManager.alert('Hello world!! Selection: ' + ed.selection.getContent({ format: 'text' }));
    });
  }
});

参数

• name (String) - 要添加/覆盖的命令名称。

• callback (Function) - 命令触发时执行的函数。

• scope (Object) - 可选的函数执行作用域。

addQueryStateHandler()

addQueryStateHandler(name: String, callback: Function, scope: Object)

向编辑器添加自定义查询状态命令。此函数也可用于覆盖现有命令。添加的命令可以通过queryCommandState函数执行。

参数

• name (String) - 要添加/覆盖的命令名称。

• callback (Function) - 检索命令状态时执行的函数。

• scope (Object) - 可选的函数执行作用域。

addQueryValueHandler()

addQueryValueHandler(name: String, callback: Function, scope: Object)

向编辑器添加自定义查询值命令。此函数也可用于覆盖现有命令。添加的命令可以通过queryCommandValue函数执行。

参数

• name (String) - 要添加/覆盖的命令名称。

• callback (Function) - 检索命令值时执行的函数。

• scope (Object) - 可选的函数执行作用域。

addShortcut()

addShortcut(pattern: String, desc: String, cmdFunc: String | Function, scope: Object): Boolean

为某些命令或函数添加键盘快捷键。

示例

editor.addShortcut('ctrl+a', 'description of the shortcut', () => {});
editor.addShortcut('ctrl+alt+a', 'description of the shortcut', () => {});
// "meta" 在 Mac 上映射到 Command，在 PC 上映射到 Ctrl
editor.addShortcut('meta+a', 'description of the shortcut', () => {});
// "access" 在 Mac 上映射到 Control+Option，在 PC 上映射到 shift+alt
editor.addShortcut('access+a', 'description of the shortcut', () => {});

editor.addShortcut('meta+access+c', '打开代码编辑器对话框。', () => {
  editor.execCommand('mceCodeEditor');
});

editor.addShortcut('meta+shift+32', '为 meta+shift+space 插入 "Hello, World!"', () => {
  editor.execCommand('mceInsertContent', false, 'Hello, World!');
});

参数

• pattern (String) - 快捷键模式。例如：ctrl+alt+o。

• desc (String) - 命令的文本描述。

• cmdFunc (String | Function) - 按下键时要执行的命令名称字符串或函数。

• scope (Object) - 可选的函数执行作用域。

返回值

• Boolean - 快捷键是否添加成功的状态（true/false）。

addVisual()

addVisual(elm: Element)

为表格、锚点等添加可视化辅助，以便在编辑器中更轻松地编辑它们。

参数

• elm (Element) - 可选的根元素，用于遍历查找需要可视化辅助的表格等。

announce()

announce(message: String, options: Object, options.assertive: Boolean)

通过页面范围的 aria-live 区域向屏幕阅读器宣布消息，而不转移焦点。委托给 {@link tinymce.dom.AriaAnnouncer#announce}。

示例

tinymce.activeEditor.announce('Bold on');
tinymce.activeEditor.announce('Error occurred', { assertive: true });

参数

• message (String) - 要向屏幕阅读器宣布的消息。

• options (Object) - 可选设置。

• options.assertive (Boolean) - 如果为 true，则使用 aria-live="assertive"（role="alert"）而不是 polite。

convertURL()

convertURL(url: String, name: String, elm: String | HTMLElement): String

URL 转换函数，每次用户添加 img、a 或任何其他包含 URL 的元素时都会执行此函数。此函数将由 DOM 和 HTML 操作函数调用。

参数

• url (String) - 要转换的 URL。

• name (String) - 属性名称，如 src、href 等。

• elm (String | HTMLElement) - 根据 HTML 或 DOM 插入的标签名称或 HTML DOM 元素。

返回值

• String - 转换后的 URL 字符串。

destroy()

destroy(automatic: Boolean)

通过移除所有事件、元素引用或其他可能导致内存泄漏的资源来销毁编辑器实例。当页面卸载时会自动调用此方法，但如果你知道自己在做什么，也可以直接调用它。

参数

• automatic (Boolean) - 可选状态，用于指示销毁操作是自动销毁还是用户调用的。

dispatch()

dispatch(name: String, args: Object?, bubble: Boolean?): Object

按名称分发指定事件。有关每个事件的详细信息，请参阅事件参考文档。

示例

instance.dispatch('event', {...});

参数

• name (String) - 要分发的事件名称。

• args (Object?) - 事件参数。

• bubble (Boolean?) - 事件是否冒泡（true/false）。

返回值

• Object - 传入的事件参数对象。

execCommand()

execCommand(cmd: String, ui: Boolean, value: Object | Array | String | Number | Boolean, args: Object): Boolean

在当前实例上执行已注册的命令。可用命令列表可在 tinymce 命令标识符文档中找到。

参数

• cmd (String) - 要执行的命令名称，例如 mceLink 或 Bold。

• ui (Boolean) - 指定是否显示 UI（对话框）。

• value (Object | Array | String | Number | Boolean) - 可选的命令值，可以是任何类型。

• args (Object) - 可选参数对象。

返回值

• Boolean - 命令是否受支持（true 或 false）。

fire()

fire(name: String, args: Object?, bubble: Boolean?): Object

按名称触发指定事件。有关每个事件的详细信息，请参阅事件参考文档。

在 TinyMCE 6.0 中已弃用，并标记为在 TinyMCE 9.0 中移除。请使用 dispatch 替代。

示例

instance.fire('event', {...});

参数

• name (String) - 要触发的事件名称。

• args (Object?) - 事件参数。

• bubble (Boolean?) - 事件是否冒泡（true/false）。

返回值

• Object - 传入的事件参数对象。

focus()

focus(skipFocus: Boolean | Object, skipFocus.scrollToSelection: Boolean)

聚焦/激活编辑器。这将把该编辑器设为 tinymce 集合中的 activeEditor，并且还会将 DOM 焦点置于编辑器内部。

示例

tinymce.activeEditor.focus();
tinymce.activeEditor.focus(true);
tinymce.activeEditor.focus({ scrollToSelection: false });

参数

• skipFocus (Boolean | Object) - 如果为 true，则跳过 DOM 焦点，仅将此编辑器设为活动编辑器。如果是对象，则聚焦编辑器并可选地控制滚动。

• skipFocus.scrollToSelection (Boolean) - 如果为 false，则在不将所选内容滚动到视图中的情况下聚焦编辑器。默认值为 true。

getBody()

getBody(): Element

返回可编辑区域的根元素。对于基于非内联 iframe 的编辑器，返回 iframe 的 body 元素。

返回值

• Element - 可编辑区域的根元素。

getContainer()

getContainer(): Element

返回编辑器的容器元素。容器元素包含添加到页面中的所有编辑器相关元素，如 UI、iframe 等。

返回值

• Element - 编辑器容器的 HTML DOM 元素。

getContent()

getContent(args: Object): String

从编辑器实例获取内容，在返回之前会根据不同的清理规则选项对内容进行清理。

示例

// 获取当前活动编辑器的 HTML 内容
console.debug(tinymce.activeEditor.getContent());

// 以纯文本形式获取当前活动编辑器的内容
tinymce.activeEditor.getContent({ format: 'text' });

// 获取特定编辑器的内容：
tinymce.get('content id').getContent()

参数

• args (Object) - 可选内容对象，在整个获取过程中传递。

返回值

• String - 清理后的内容字符串，通常为 HTML 内容。

getContentAreaContainer()

getContentAreaContainer(): Element

返回编辑器的内容区域容器元素。该元素包含 iframe 或可编辑元素。

返回值

• Element - 编辑器区域容器的 HTML DOM 元素。

getDoc()

getDoc(): Document

返回 iframe 的 document 对象。

返回值

• Document - Iframe 的 DOM document 对象。

getElement()

getElement(): Element

返回被 TinyMCE 编辑器实例替换的目标元素/textarea。

返回值

• Element - 替换元素的 HTML DOM 元素。

getParam()

getParam(name: String, defaultVal: String, type: String): String

按名称返回配置参数。

在 TinyMCE 6.0 中已弃用，并标记为将在 TinyMCE 7.0 中移除。请改用 editor.options.get API。

示例

// 从当前活动的编辑器中返回特定的配置值
const someval = tinymce.activeEditor.getParam('myvalue');

// 根据 ID 从特定的编辑器实例中返回特定的配置值
const someval2 = tinymce.get('my_editor').getParam('myvalue');

参数

• name (String) - 要获取的配置参数。

• defaultVal (String) - 可选的默认返回值。

• type (String) - 可选的类型参数。

返回值

• String - 配置参数值或默认值。

getWin()

getWin(): Window

返回 iframes 的 window 对象。

返回值

• Window - Iframe DOM window 对象。

hasEditableRoot()

hasEditableRoot(): Boolean

返回编辑器根元素当前的可编辑状态。

返回值

• Boolean - 如果根元素可编辑则为 true，不可编辑则为 false。

hasEventListeners()

hasEventListeners(name: String): Boolean

如果对象具有指定名称的事件，则返回 true/false。

参数

• name (String) - 要检查的事件名称。

返回值

• Boolean - 事件是否存在。

hasFocus()

hasFocus(): Boolean

如果编辑器具有真实的键盘焦点，则返回 true/false。

返回值

• Boolean - 编辑器当前的焦点状态。

hasPlugin()

hasPlugin(name: String, loaded: Boolean): Boolean

检查插件是否在编辑器配置中，并可选择检查插件是否已加载。

示例

// 如果 Comments 插件在编辑器配置中并且已成功加载，则返回 `true`：
tinymce.activeEditor.hasPlugin('tinycomments', true);
// 如果 Table 插件在编辑器配置中，无论其是否加载，都返回 `true`：
tinymce.activeEditor.hasPlugin('table');

参数

• name (String) - 插件名称，即 TinyMCE plugins 选项中指定的名称。

• loaded (Boolean) - 如果为 true，还将检查插件是否已加载。

返回值

• Boolean - 如果 loaded 为 true，当插件在配置中且已加载时返回 true。如果 loaded 为 false，当插件在配置中时返回 true，无论插件加载状态如何。

hide()

hide()

隐藏编辑器，并显示编辑器应该替换的 textarea/div。

insertContent()

insertContent(content: String, args: Object)

在光标位置插入内容。

参数

• content (String) - 要插入的内容。

• args (Object) - 可选参数，传递给 insert 调用。

isDirty()

isDirty(): Boolean

返回编辑器是否处于脏状态（有未保存的更改）。如果用户对内容进行了修改，编辑器将变为脏状态。

当用户在初始化或上一次 editor.save() 调用后修改编辑器内容时，脏状态会自动设置为 true。这包括使用撤销或重做进行的更改。

示例

if (tinymce.activeEditor.isDirty()) {
  alert("You must save your contents.");
}

返回值

• Boolean - 编辑器是否处于脏状态。如果用户对内容进行了修改，则为 true，否则为 false。

isHidden()

isHidden(): Boolean

返回编辑器是否处于隐藏状态。

返回值

• Boolean - 编辑器是否隐藏。

load()

load(args: Object)

从被转换为编辑器实例的 textarea、input 或其他元素加载内容。此方法将使用 setContent 将内容从该 textarea、input 或其他元素移动到编辑器中，因此该方法具有的所有事件等也将被分发。

参数

• args (Object) - 可选的内容对象，在加载过程中传递。

nodeChanged()

nodeChanged(args: Object)

向所有观察者分发 onNodeChange 事件。当需要更新 UI 状态或元素路径等时，应调用此方法。

参数

• args (Object) - 传递给 NodeChange 事件处理器的可选参数。

off()

off(name: String?, callback: Function?): Object

通过事件名称取消绑定事件监听器。有关每个事件的详细信息，请参阅事件参考文档。

示例

// 取消绑定特定的回调函数
instance.off('event', handler);

// 通过事件名称取消绑定所有的监听器
instance.off('event');

// 取消绑定所有事件
instance.off();

参数

• name (String?) - 要取消绑定的事件名称。

• callback (Function?) - 要取消绑定的回调函数。

返回值

• Object - 当前类实例。

on()

on(name: String, callback: Function, prepend: Boolean): Object

通过事件名称将事件监听器绑定到特定事件。有关每个事件的详细信息，请参阅事件参考文档。

示例

instance.on('event', (e) => {
  // 回调逻辑
});

参数

• name (String) - 要绑定的事件名称或以空格分隔的事件列表。

• callback (Function) - 事件发生时要执行的回调函数。

• prepend (Boolean) - 可选标志，用于指示事件是否应前置绑定。请谨慎使用此选项。

返回值

• Object - 当前类实例。

once()

once(name: String, callback: Function): Object

绑定事件回调函数，并且在触发一次后自动移除该回调函数。有关每个事件的详细信息，请参阅事件参考文档。

参数

• name (String) - 要绑定的事件名称。

• callback (Function) - 仅绑定一次的回调函数。

返回值

• Object - 当前类实例。

queryCommandState()

queryCommandState(cmd: String): Boolean

返回命令的特定状态，例如是否启用了粗体（bold）。

参数

• cmd (String) - 要查询状态的命令。

返回值

• Boolean - 命令的特定状态，例如是否启用了粗体（bold）。

queryCommandSupported()

queryCommandSupported(cmd: String): Boolean

返回该命令是否受支持（true/false）。

参数

• cmd (String) - 要检查支持情况的命令。

返回值

• Boolean - 该命令是否受支持（true/false）。

queryCommandValue()

queryCommandValue(cmd: String): String

返回命令的特定值，例如当前字体大小。

参数

• cmd (String) - 要查询值的命令。

返回值

• String - 命令的值，例如当前字体大小，如果未找到查询命令，则返回空字符串（""）。

remove()

remove()

从 DOM 和 tinymce 集合中移除编辑器。

render()

render()

渲染编辑器并将其添加到页面中。

resetContent()

resetContent(initialContent: String)

重置编辑器的内容、撤销/重做历史记录以及脏数据状态。如果未指定 initialContent，则编辑器将重置为初始内容。

参数

• initialContent (String) - 用于作为编辑器初始内容的可选字符串。

save()

save(args: Object): String

将编辑器中的内容保存到转换为编辑器实例的 textarea 或 div 元素中。此方法将通过 getContent 方法将编辑器中的 HTML 内容移动到该 textarea 或 div 中，因此该方法触发的所有事件等也将被调度。

参数

• args (Object) - 可选的内容对象，该对象将在整个保存过程中传递。

返回值

• String - 设置到 textarea/div 中的 HTML 字符串。

setContent()

setContent(content: String, args: Object)

将指定内容设置到编辑器实例中，在使用不同的清理规则选项进行设置之前，将先对内容进行清理。

注意：内容返回值在 TinyMCE 6.0 中已被弃用，并标记为在 TinyMCE 7.0 中移除。

示例

// 设置 activeEditor 编辑器的 HTML 内容
tinymce.activeEditor.setContent('<span>some</span> html');

// 设置特定编辑器（在此示例中为 my_editor）的内容
tinymce.get('my_editor').setContent(data);

// 使用指定格式设置 activeEditor 编辑器的内容
tinymce.activeEditor.setContent('<p>Some html</p>', { format: 'html' });

参数

• content (String) - 要设置到编辑器的内容，通常是HTML内容，但也可以是其他格式。

• args (Object) - 可选的内容对象，在整个设置过程中会被传递。

setDirty()

setDirty(state: Boolean)

显式设置dirty状态。如果通过调用此方法将编辑器的dirty状态从false更改为true，则会触发dirty事件。

示例

const ajaxSave = () => {
  const editor = tinymce.get('elm1');

  // 使用某个XHR调用保存内容
  alert(editor.getContent());

  editor.setDirty(false); // 强制设置为非dirty状态
}

参数

• state (Boolean) - 如果编辑器被视为dirty则为true/false。

setEditableRoot()

setEditableRoot(state: Boolean)

更改编辑器根元素的可编辑状态。

参数

• state (Boolean) - 设置为true表示可编辑，设置为false表示不可编辑。

setProgressState()

setProgressState(state: Boolean, time: Number): Boolean

设置进度状态，这将显示编辑器的加载指示器/进度。这对于像AJAX保存调用这样的异步操作非常理想。

示例

// 显示活动编辑器的进度
tinymce.activeEditor.setProgressState(true);

// 隐藏活动编辑器的进度
tinymce.activeEditor.setProgressState(false);

// 在3秒后显示进度
tinymce.activeEditor.setProgressState(true, 3000);

参数

• state (Boolean) - 是否显示或隐藏进度的布尔状态。

• time (Number) - 可选的等待时间，在显示进度之前等待。

返回值

• Boolean - 与输入的state相同。

show()

show()

显示编辑器并隐藏编辑器应替换的任何textarea/div。

translate()

translate(text: String): String

通过用语言包项替换变量来翻译指定的字符串，它还将检查是否有与输入匹配的键。

参数

• text (String) - 要通过语言包数据翻译的字符串。

返回值

• String - 翻译后的字符串。

uploadImages()

uploadImages(): Promise

将编辑器内容中的所有data uri/blob uri图像上传到服务器。

返回值

• Promise - 包含每个图像的图像和状态的Promise实例。