jQuery

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

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

操作步骤

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

从 NPM 安装 jQuery、TinyMCE、TinyMCE jQuery 集成以及fs-extra库：
```
npm install --save jquery tinymce @tinymce/tinymce-jquery fs-extra
```

设置一个postinstall脚本，以便在每次安装新依赖项时将包复制到公共目录：

postinstall.js

const fse = require('fs-extra');
const path = require('path');

const nodeModulesDir = path.join(__dirname, 'node_modules');
const publicDir = path.join(__dirname, 'public');

fse.emptyDirSync(path.join(publicDir, 'jquery'));
fse.emptyDirSync(path.join(publicDir, 'tinymce'));
fse.emptyDirSync(path.join(publicDir, 'tinymce-jquery'));
fse.copySync(path.join(nodeModulesDir, 'jquery', 'dist'), path.join(publicDir, 'jquery'), { overwrite: true });
fse.copySync(path.join(nodeModulesDir, 'tinymce'), path.join(publicDir, 'tinymce'), { overwrite: true });
fse.copySync(path.join(nodeModulesDir, '@tinymce', 'tinymce-jquery', 'dist'), path.join(publicDir, 'tinymce-jquery'), { overwrite: true });

package.json

{
  // ... snip ...
  "scripts": {
    "postinstall": "node ./postinstall.js"
  }
}

运行postinstall脚本以将包复制到您的公共目录：
```
npm run postinstall
```
打开一个 HTML 文件

假设public目录在/public处提供服务，添加源脚本，例如：

<script src="/public/jquery/jquery.min.js"></script>
<script src="/public/tinymce/tinymce.min.js"></script>
<script src="/public/tinymce-jquery/tinymce-jquery.min.js"></script>

有关自托管 TinyMCE 的信息，请参阅：安装 TinyMCE。

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

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

添加 TinyMCE jQuery 初始化脚本。TinyMCE 选择器定义在 jQuery 前缀中，任何其他设置定义在传递给tinymce方法的对象中。
```
<script>
  $('textarea#tiny').tinymce({
    height: 500,
    license_key: 'gpl'
    /* other settings... */,
  });
</script>
```

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="/public/jquery/jquery.min.js"></script>
    <script src="/public/tinymce/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="/public/tinymce-jquery/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,
        license_key: 'gpl'
        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 对话框中的 TinyMCE

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

// 防止 jQuery UI 对话框阻止 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。