官方 TinyMCE Web Component 将 TinyMCE 集成到 Web Component 项目中。此过程会创建一个包含 TinyMCE 编辑器的 HTML 页面。

步骤

使用 TinyMCE Web Component 向网页添加 TinyMCE 编辑器：

  1. 在页面的 head 部分添加以下 meta 标签：

      <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    第二个 meta 元素是必需的，以确保编辑器在移动设备上正常运行。有关 viewport meta 元素的信息，请参阅：MDN Web Docs - 使用 viewport meta 标签控制移动浏览器上的布局。

  2. 添加 tinymce 和 tinymce-webcomponent 包，例如：

    npm install tinymce @tinymce/tinymce-webcomponent

  3. （可选）对于高级插件，安装 tinymce-premium 包：

    npm install tinymce-premium@^8.3

    更多信息，请参阅：安装高级插件。

  4. 添加一个引用输出文件的 script 元素，例如：

    <script src="/path/to/bundle.js"></script>

    如果未提供引用 TinyMCE 的 script 元素，TinyMCE Web Component 将从 Tiny Cloud 加载 TinyMCE。

  5. 在应显示编辑器的位置添加 tinymce-editor 元素。

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

    如果在 Web 浏览器中打开该页面，默认 TinyMCE 编辑器将在该位置加载。

后续步骤