Web 组件

最后更新：2026-11-04 10:10:15

使用 TinyMCE Web Component 集成的云版本

要使用 Web Component 的云版本，该集成可从 JSDelivr 获取。

例如：

<script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js"></script>

安装 TinyMCE Web Component 集成

要将 TinyMCE Web Component 集成添加到 JavaScript 项目中，请在命令行或命令提示符中运行以下命令：

NPM 用户：
```
npm i @tinymce/tinymce-webcomponent
```
Yarn 用户：
```
yarn add @tinymce/tinymce-webcomponent
```

加载 TinyMCE

该集成需要同时包含 TinyMCE Web Component (tinymce-webcomponent.min.js) 和 TinyMCE (tinymce.min.js)。

如果 TinyMCE Web Component 无法获取 TinyMCE，将自动从 Tiny Cloud 加载最新版本的 TinyMCE。

要在自托管的 TinyMCE 副本中使用 TinyMCE Web Component，请确保自托管的 TinyMCE 副本可以与 TinyMCE Web Component 在同一位置加载（例如同一网页）。

要从 Tiny Cloud 使用 TinyMCE，请将 api-key 属性添加到 tinymce-editor 元素，并附上来自 Tiny Account 的 API 密钥。

设置许可证密钥

指定 TinyMCE 许可证密钥。对于自托管部署的 TinyMCE 是必需的。对于仅使用 Tiny Cloud 作为云订阅的云部署，此属性不需要，因为您的云订阅已自动包含商业许可证。更多信息，请参阅：License Key。

类型： String

默认值： undefined

可能的值：* undefined - 当使用 API 密钥从 Tiny Cloud 加载时使用* 'gpl' - 用于使用 GPL 许可证的开源项目* 'T8LK:…' - 用于商业 TinyMCE 安装（版本 8+ 必须使用此前缀）* 'GPL+T8LK:' - 用于需要高级功能但保持 GPL 合规性的开源项目。

在混合部署（同时使用云和本地功能）中：
您可以同时提供 API 密钥和许可证密钥
编辑器将在可用时使用云服务
如果无法联系云服务，它将自动回退到本地许可证密钥

示例：商业许可证

<script>
  var editorConfig= {
    license_key: 'T8LK:...'
  }
</script>
<tinymce-editor config="editorConfig"></tinymce-editor>

示例：开源 GPL 许可证

<script>
  var editorConfig= {
    license_key: 'gpl'
  }
</script>
<tinymce-editor config="editorConfig"></tinymce-editor>

仅在自托管 TinyMCE 时才需要许可证密钥
以 "T8LK:" 开头的许可证密钥使用客户端端验证。
不要同时使用 API 密钥和许可证密钥 - 云部署使用 API 密钥，自托管部署使用许可证密钥

有关许可的更多信息，请参阅：License Key。

配置编辑器

通过在 tinymce-editor 自定义元素上设置属性来配置编辑器。所有属性都可以表示为字符串，但某些属性可接受布尔值或数字输入。如果数组、对象或函数是有效输入；则已提供示例。

设置初始内容

要设置编辑器的初始内容，请将编码后的 HTML 作为内容添加到 tinymce-editor 元素中，例如：

<tinymce-editor>
  &lt;p&gt;这将是编辑器的初始内容。&lt;/p&gt;
</tinymce-editor>

编辑器将把 tinymce-editor 元素中的文本内容作为初始 HTML 加载。

HTML 必须作为文本进行编码，以防止注入的 javascript 运行，这可能会对周围文档产生意外影响。

加载插件

要添加插件并扩展编辑器的功能，请使用 plugins 属性添加一串插件标识符，例如：

<tinymce-editor plugins="advlist autolink link image lists charmap preview"></tinymce-editor>

有关插件的信息，请参阅：Add plugins to TinyMCE。

设置编辑器宽度

要设置编辑器（内容区域和用户界面）的宽度，请使用 width 属性。例如：

设置基于像素的编辑器宽度

<tinymce-editor width="300"></tinymce-editor>

设置基于 CSS 单位的编辑器宽度

<tinymce-editor width="50%"></tinymce-editor>

设置编辑器高度

要设置编辑器（内容区域和用户界面）的高度，请使用 height 属性。例如：

设置基于像素的编辑器高度

<tinymce-editor height="300"></tinymce-editor>

设置基于 CSS 单位的高度

<tinymce-editor height="15em"></tinymce-editor>

设置只读模式

将编辑器模式设置为 readonly。

<tinymce-editor readonly></tinymce-editor>

设置禁用状态

将编辑器设置为禁用状态。

<tinymce-editor disabled></tinymce-editor>

设置工具栏

要设置编辑器工具栏按钮，请使用 toolbar 属性。例如：

<tinymce-editor toolbar="undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent"></tinymce-editor>

toolbar 属性接受由空格分隔的工具栏按钮字符串，并使用管道字符 (|) 对按钮进行分组。有关可用工具栏按钮列表，请参阅：Toolbar Buttons Available for TinyMCE。

禁用工具栏

要禁用工具栏，将 toolbar 属性设置为 "false"。例如：

<tinymce-editor toolbar="false"></tinymce-editor>

设置工具栏模式

要控制工具栏的行为，请设置 toolbar_mode 属性。例如：

<tinymce-editor toolbar_mode="floating"></tinymce-editor>

有关可用工具栏模式的信息，请参阅：User interface options - toolbar_mode。

设置菜单栏

要设置编辑器菜单栏上显示的菜单，请添加 menubar 属性。例如：

<tinymce-editor menubar="file edit insert view format table tools help"></tinymce-editor>

要更改菜单中显示的菜单项或定义自定义菜单，请使用 config 属性设置 menu 配置选项。

有关以下信息：

menubar 配置选项，请参见：用户界面选项 - menubar。
menu 配置选项，请参见：用户界面选项 - menu。
config 属性，请参见：设置其他配置选项。

设置上下文菜单

要更改编辑器上下文菜单中可显示的上下文菜单部分，请使用 contextmenu 属性。例如：

<tinymce-editor plugins="link image table" contextmenu="link image table"></tinymce-editor>

有关可用上下文菜单部分的列表，请参见：可用的上下文菜单部分。有关上下文菜单的信息，请参见：用户界面选项 - contextmenu。

设置快速插入工具栏

当添加新行时，会显示快速插入工具栏，提供用于插入对象（如表格和图片）的按钮。

要添加快速插入工具栏，请将 "quickbars" 添加到 plugins 属性。要更改快速插入工具栏，请设置 quickbars_insert_toolbar 属性，例如：

<tinymce-editor plugins="quickbars pagebreak" quickbars_insert_toolbar="quickimage quicktable quicklink | hr pagebreak"></tinymce-editor>

quickbars_insert_toolbar 属性接受一个由空格分隔的工具栏按钮字符串，并使用竖线字符 (|) 对按钮进行分组。有关可用工具栏按钮的列表，请参见：TinyMCE 可用的工具栏按钮。

要禁用快速插入工具栏，请将 quickbars_insert_toolbar 属性设置为 "false"。例如：

<tinymce-editor plugins="quickbars" quickbars_insert_toolbar="false"></tinymce-editor>

设置快速选择工具栏

当选中文本时，会显示快速选择工具栏，提供格式化工具栏按钮，例如：bold、italic 和 link。

要添加快速选择工具栏，请将 "quickbars" 添加到 plugins 属性。要更改快速选择工具栏，请设置 quickbars_selection_toolbar 属性，例如：

<tinymce-editor plugins="quickbars" quickbars_selection_toolbar="bold italic | blocks | quicklink blockquote"></tinymce-editor>

quickbars_selection_toolbar 属性接受一个由空格分隔的工具栏按钮字符串，并使用竖线字符 (|) 对按钮进行分组。有关可用工具栏按钮的列表，请参见：TinyMCE 可用的工具栏按钮。

要禁用快速选择工具栏，请将 quickbars_selection_toolbar 属性设置为 "false"。例如：

<tinymce-editor plugins="quickbars" quickbars_selection_toolbar="false"></tinymce-editor>

设置内容样式表

要为编辑器的内容区域设置 CSS，请使用 content_css 属性。

例如，要使用 TinyMCE 的一个 CSS 配置：

<tinymce-editor content_css="writer"></tinymce-editor>

要使用自定义 CSS 文件，请提供 CSS 文件的相对或绝对路径，例如：

<tinymce-editor content_css="path/to/mycontent.css"></tinymce-editor>

Tiny 建议使用：

content_style 选项来应用少量 CSS 样式。
content_css 选项来应用大型或复杂的 CSS 配置。

有关 content_css 选项的信息，请参见：内容外观选项 - content_css。

设置内容样式

要向编辑器应用少量 CSS 样式，请使用 content_style 属性。例如：

<tinymce-editor content_style="div { margin: 10px; border: 5px solid red; padding: 3px; }"></tinymce-editor>

Tiny 建议使用：

content_style 选项来应用少量 CSS 样式。
content_css 选项来应用大型或复杂的 CSS 配置。

有关 content_style 选项的信息，请参见：内容外观选项 - content_style。

启用 PowerPaste 插件时的设置

这些设置仅在启用 PowerPaste 插件 (powerpaste) 时适用。

PowerPaste 的 Word 导入方法

要控制从 Microsoft Word 粘贴的内容如何被过滤，请使用 powerpaste_word_import 属性。例如：

<tinymce-editor powerpaste_word_import="merge"></tinymce-editor>

有关 powerpaste_word_import 选项的信息（包括支持的值），请参见：PowerPaste 插件 - powerpaste_word_import。

PowerPaste 的 HTML 导入方法

要控制从 Microsoft Word 以外的来源粘贴的内容如何被过滤，请使用 powerpaste_html_import 属性。例如：

<tinymce-editor powerpaste_html_import="prompt"></tinymce-editor>

有关 powerpaste_html_import 选项的信息（包括支持的值），请参见：PowerPaste 插件 - powerpaste_html_import。

PowerPaste 允许本地图片

要防止将带有数据 URI 的 Base64 编码图片粘贴到编辑器中，请将 powerpaste_allow_local_images 设置为 "false"。例如：

<tinymce-editor powerpaste_allow_local_images="false"></tinymce-editor>

有关 powerpaste_allow_local_images 选项的信息（包括支持的值），请参见：PowerPaste 插件 - powerpaste_allow_local_images。

显示调整大小手柄

resize 属性允许您禁用调整大小手柄或将其设置为同时水平和垂直调整编辑器大小。默认情况下，编辑器将垂直调整大小 (resize="true")。

要移除调整大小手柄并禁用编辑器调整大小，请将 resize 属性设置为 "false"。例如：

<tinymce-editor resize="false"></tinymce-editor>

要允许用户同时水平和垂直调整编辑器大小，请将 resize 属性设置为 "both"。例如：

<tinymce-editor resize="both"></tinymce-editor>

有关 resize 选项的信息，请参见：用户界面选项 - resize。

设置编辑器初始化函数

要在编辑器实例渲染之前执行 JavaScript 回调，请使用 setup 属性。例如：

<script>
  function setupEditor(editor) {
    editor.on('click', function () {
      console.log('Editor was clicked');
    });
  }
</script>
<tinymce-editor setup="setupEditor"></tinymce-editor>

有关 setup 选项的信息，请参见：集成和设置选项 - setup。

设置编辑器皮肤

要为编辑器应用自定义皮肤，请使用 skin 属性。例如：

<tinymce-editor skin="borderless"></tinymce-editor>

有关以下信息：

使用 skin 选项，请参见：用户界面选项 - skin。
Tiny 增强型皮肤，请参见：增强型皮肤 & 图标包。
为 TinyMCE 创建自定义皮肤，请参见：为 TinyMCE 创建皮肤。

设置图片上传 URL

要指定服务器端上传处理程序的位置，请使用 images_upload_url 属性。例如：

<tinymce-editor images_upload_url="postAcceptor.php"></tinymce-editor>

上传处理程序应以下列格式返回上传文件的位置：

{ "location": "folder/sub-folder/new-location.png" }

有关使用 images_upload_url 的信息，请参阅：图片上传 - images_upload_url。

设置图片上传处理程序

要指定自定义图片上传处理程序回调函数，请使用 images_upload_handler 属性。

<script>
const example_image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', 'postAcceptor.php');

  xhr.upload.onprogress = (e) => {
    progress(e.loaded / e.total * 100);
  };

  xhr.onload = () => {
    if (xhr.status === 403) {
      reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
      return;
    }

    if (xhr.status < 200 || xhr.status >= 300) {
      reject('HTTP Error: ' + xhr.status);
      return;
    }

    const json = JSON.parse(xhr.responseText);

    if (!json || typeof json.location != 'string') {
      reject('Invalid JSON: ' + xhr.responseText);
      return;
    }

    resolve(json.location);
  };

  xhr.onerror = () => {
    reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
  };

  const formData = new FormData();
  formData.append('file', blobInfo.blob(), blobInfo.filename());

  xhr.send(formData);
});
</script>
<tinymce-editor images_upload_handler="example_image_upload_handler"></tinymce-editor>

有关使用 images_upload_handler 选项的信息，请参阅：图片上传 - images_upload_handler。

设置图片上传基础路径

要为从配置的 images_upload_url 脚本返回的 URL 添加前缀基础路径，请使用 images_upload_base_path 属性。例如：

<tinymce-editor images_upload_url="postAcceptor.php" images_upload_base_path="/some/basepath"></tinymce-editor>

有关使用 images_upload_base_path 选项的信息，请参阅：图片上传 - images_upload_base_path。

设置图片上传以包含凭据

要为跨域图片上传接收凭据（如 Cookie、授权标头或 TLS 客户端证书），请将 images_upload_credentials 属性设置为 "true"。

<tinymce-editor images_upload_url="postAcceptor.php" images_upload_credentials="true"></tinymce-editor>

有关使用 images_upload_credentials 选项的信息，请参阅：图片上传 - images_upload_credentials。

设置图片上传以重用文件名

要强制编辑器在给定实例中无论上传多少次都使用相同的文件名，请将 images_reuse_filename 属性设置为 "true"。

<tinymce-editor images_upload_url="postAcceptor.php" images_reuse_filename="true"></tinymce-editor>

有关使用 images_reuse_filename 选项的信息，请参阅：图片上传 - images_reuse_filename。

设置图标包

要将捆绑的自定义或高级图标集应用到编辑器，请使用 icons 属性。例如：

<tinymce-editor icons="material"></tinymce-editor>

如果图标包与 TinyMCE 捆绑在一起（包括自定义图标包），请使用此属性。如果图标包托管在网站上，请使用 icons_url 属性。

有关以下信息：

使用 icons 选项，请参阅：用户界面选项 - icons。
Tiny 高级图标包，请参阅：增强皮肤与图标包。
为 TinyMCE 创建自定义图标包，请参阅：为 TinyMCE 创建图标包。

设置图标包 URL

要将托管的自定义或高级图标集应用到编辑器，请使用 icons_url 属性。例如：

<tinymce-editor icons_url="https://www.example.com/icons/material/icons.js"></tinymce-editor>

如果图标包托管在网站上，请使用此属性。如果图标包与 TinyMCE 捆绑在一起（包括自定义图标包），请使用 icons 属性。

有关以下信息：

使用 icons_url 选项，请参阅：用户界面选项 - icons_url。
Tiny 高级图标包，请参阅：增强皮肤与图标包。
为 TinyMCE 创建自定义图标包，请参阅：为 TinyMCE 创建图标包。

设置其他配置选项

要配置没有对应属性的任何 TinyMCE 选项，请使用 config 属性。例如：

<script>
  window.myConfig = {
    height: 500,
    spellchecker_dialog: true,
    spellchecker_ignore_list: ['Ephox', 'Moxiecode']
  };
</script>
<tinymce-editor
  config="myConfig"
  width="50%"
  toolbar="undo redo | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | link | spellchecker"
  plugins="lists link searchreplace table tinymcespellchecker wordcount"
></tinymce-editor>

具有属性的配置选项也可以传递给 config 属性。

事件绑定

有两种方法可以绑定 TinyMCE Web Component 的事件。

setup 属性，如“设置编辑器初始化函数”中所描述。例如：

<script>
  function setupEditor(editor) {
    editor.on('click', function () {
      console.log('Editor was clicked');
    });
  }
</script>
<tinymce-editor setup="setupEditor"/>

on- 属性，例如 on-NodeChange 属性。例如：
```
<script>
  function changeHandler(evt) {
    console.log('The ' + evt['type'] + ' event was fired.');
  }
</script>
<tinymce-editor on-Change="changeHandler"/>
```
如果稍后移除了这些属性，事件将自动解绑。有关支持的所有 on- 属性的完整列表，请参阅：支持的浏览器事件和支持的 TinyMCE 事件。

支持的浏览器事件

使用对应的 TinyMCE Web Component 属性绑定以下浏览器事件。

浏览器事件	属性
`BeforePaste`	`on-BeforePaste`
`Blur`	`on-Blur`
`Click`	`on-Click`
`ContextMenu`	`on-ContextMenu`
`Copy`	`on-Copy`
`Cut`	`on-Cut`
`Dblclick`	`on-Dblclick`
`Drag`	`on-Drag`
`DragDrop`	`on-DragDrop`
`DragEnd`	`on-DragEnd`
`DragGesture`	`on-DragGesture`
`DragOver`	`on-DragOver`
`Drop`	`on-Drop`
`Focus`	`on-Focus`
`FocusIn`	`on-FocusIn`
`FocusOut`	`on-FocusOut`
`KeyDown`	`on-KeyDown`
`KeyPress`	`on-KeyPress`
`KeyUp`	`on-KeyUp`
`MouseDown`	`on-MouseDown`
`MouseEnter`	`on-MouseEnter`
`MouseLeave`	`on-MouseLeave`
`MouseMove`	`on-MouseMove`
`MouseOut`	`on-MouseOut`
`MouseOver`	`on-MouseOver`
`MouseUp`	`on-MouseUp`
`Paste`	`on-Paste`
`SelectionChange`	`on-SelectionChange`

支持的 TinyMCE 事件

使用对应的 TinyMCE Web Component 属性绑定以下 TinyMCE 事件。

TinyMCE 事件	属性
`Activate`	`on-Activate`
`AddUndo`	`on-AddUndo`
`BeforeAddUndo`	`on-BeforeAddUndo`
`BeforeExecCommand`	`on-BeforeExecCommand`
`BeforeGetContent`	`on-BeforeGetContent`
`BeforeRenderUI`	`on-BeforeRenderUI`
`BeforeSetContent`	`on-BeforeSetContent`
`Change`	`on-Change`
`ClearUndos`	`on-ClearUndos`
`Deactivate`	`on-Deactivate`
`Dirty`	`on-Dirty`
`ExecCommand`	`on-ExecCommand`
`GetContent`	`on-GetContent`
`Hide`	`on-Hide`
`Init`	`on-Init`
`LoadContent`	`on-LoadContent`
`NodeChange`	`on-NodeChange`
`PostProcess`	`on-PostProcess`
`PostRender`	`on-PostRender`
`PreProcess`	`on-PreProcess`
`ProgressState`	`on-ProgressState`
`Redo`	`on-Redo`
`Remove`	`on-Remove`
`Reset`	`on-Reset`
`SaveContent`	`on-SaveContent`
`SetAttrib`	`on-SetAttrib`
`ObjectResizeStart`	`on-ObjectResizeStart`
`ObjectResized`	`on-ObjectResized`
`ObjectSelected`	`on-ObjectSelected`
`SetContent`	`on-SetContent`
`Show`	`on-Show`
`Submit`	`on-Submit`
`Undo`	`on-Undo`
`VisualAid`	`on-VisualAid`