该官方 TinyMCE jQuery 组件将 TinyMCE 集成到 jQuery 项目中。

步骤

本步骤创建一个基本的 jQuery 集成，其中包含一个基于我们基本示例的 TinyMCE 编辑器。

  1. 打开一个 HTML 文件

  2. 添加一个<script>元素以获取 jQuery，代码片段来自官方jQuery CDN 页面，其中包括integrity和crossorigin属性。

  3. 添加以下<script>元素从 Tiny Cloud 获取 TinyMCE：

    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>

    将源脚本（<script src=…​>）中的no-api-key替换为 Tiny Cloud API 密钥，该密钥是在注册Tiny Cloud时创建的。

  4. 添加以下<script>元素从 JS Delivr CDN 获取 TinyMCE jQuery 集成：

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

  5. 添加 TinyMCE 的初始化点，例如：

    <div>
  <textarea id="tiny">&lt;p&gt;Encoded HTML content&lt;/p&gt;</textarea>
</div>

  6. 添加 TinyMCE jQuery 初始化脚本。TinyMCE 选择器在 jQuery 前缀中定义，任何其他设置都在传递给tinymce方法的对象中定义。

    <script>
  $('textarea#tiny').tinymce({
    height: 500,
    api_key: 'no-api-key',
    /* other settings... */,
  });
</script>

  7. 更新api_key属性以包含您的Tiny Cloud API 密钥。

jQuery 集成示例

要加载类似于基本示例的 TinyMCE 编辑器，请将以下代码添加到空的 HTML 文件中。

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous" ></script> <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" ></script> <script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js"></script> </head> <body> <div> <textarea id="tiny">&lt;p&gt;Welcome to the TinyMCE jQuery example!&lt;/p&gt;</textarea> </div> <script> $('textarea#tiny').tinymce({ height: 500, api_key: 'no-api-key', menubar: false, plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks', 'fullscreen', 'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount' ], toolbar: 'undo redo | blocks | bold italic backcolor | ' + 'alignleft aligncenter alignright alignjustify | ' + 'bullist numlist outdent indent | removeformat | help' }); </script> </body></html>

jQuery UI Dialog 中的 TinyMCE

要在 jQuery UI 对话框内渲染 TinyMCE 实例，请添加以下代码：

// Prevent jQuery UI dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
    e.stopImmediatePropagation();
  }
});

此代码是必需的，因为 jQuery 会阻止所有来自对话框外部元素的focusin调用。有关工作示例，请尝试此 TinyMCE fiddle。