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

过程

要使用 TinyMCE Web Component 将 TinyMCE 编辑器添加到网页，请执行以下操作：

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

      <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. 添加一个 script 元素，用于加载 TinyMCE Web Component (tinymce-webcomponent.js)，例如：

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

    也可以从 npmjs 加载 tinymce-webcomponent。

  3. 在编辑器应显示的位置添加一个 tinymce-editor 元素，并包含来自 Tiny Account 的 Tiny Cloud API 密钥。

    <tinymce-editor
  api-key="no-api-key"
></tinymce-editor>

示例：将 TinyMCE Web Component 添加到 HTML 页面

以下示例展示了 HTML 页面中的 TinyMCE Web Component，包括：

  • 通过属性设置的各种 TinyMCE 配置选项。

  • 从 Tiny Cloud 加载 TinyMCE。

HTML

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- Adding the `tinymce-editor` element with various options set as attributes. --> <tinymce-editor api-key="no-api-key" height="500" menubar="false" plugins="advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount" toolbar="undo redo | blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help" content_style="body { font-family:Helvetica,Arial,sans-serif; font-size:14px }" > <!-- Adding some initial editor content --> &lt;p&gt;Welcome to the TinyMCE Web Component example!&lt;/p&gt; </tinymce-editor> <!-- Sourcing the `tinymce-webcomponent` from jsDelivr, which sources TinyMCE from the Tiny Cloud. --> <script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js"></script> </body></html>

后续步骤