官方 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 - Using the viewport meta tag to control layout on mobile browsers。

  2. 添加一个引用 TinyMCE Web Component（tinymce-webcomponent.min.js）的 script 元素，例如：

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

    tinymce-webcomponent 也可以从 npmjs 获取。

  3. 添加一个引用 TinyMCE 的 script 元素，例如：

    <script src="/path/to/tinymce.min.js"></script>

    如果未提供引用 TinyMCE 的 script 元素，TinyMCE Web Component 将从 Tiny Cloud 加载 TinyMCE。有关引用 TinyMCE 的可用选项信息，请参阅：Loading TinyMCE。

  4. 在编辑器应出现的位置添加 tinymce-editor 元素。

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

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

后续步骤