在 Bootstrap 中使用 TinyMCE 不需要任何特殊配置。

TinyMCE jQuery 集成可与 Bootstrap 配合使用。有关使用 jQuery 集成的信息，请参阅：jQuery 自托管集成。

本过程将创建一个包含 TinyMCE 编辑器的基本 Bootstrap 集成。

设置

  1. 在 HTML 文件中，添加 Bootstrap JS 的源脚本。

    如果项目从 https://www.bootstrapcdn.com/ 加载 Bootstrap，请使用 Bootstrap CDN 提供的脚本，该脚本包含 integrity 和 crossorigin 属性。

  2. 要引入独立部署的 TinyMCE，请将以下源脚本添加到 HTML 文件的 <head> 或 <body> 末尾，例如：

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

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

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

    <div>
  <textarea id="tiny"></textarea>
</div>

  4. 添加 TinyMCE 初始化脚本。

    <script>
  tinymce.init({
    selector: 'textarea#tiny',
    license_key: 'gpl'
  });
</script>
    gpl 许可证密钥用于在 GNU 通用公共许可证 (GPL) 下自托管 TinyMCE。若要使用商业许可证或包含高级插件，请将 gpl 替换为有效的许可证密钥。详细信息，请参阅 设置许可证。

在 Bootstrap 对话框中使用 TinyMCE

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

Bootstrap 4 或更低版本

// Prevent Bootstrap 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();
  }
});

Bootstrap 5 或更高版本

// Prevent Bootstrap dialog from blocking focusin
document.addEventListener('focusin', (e) => {
  if (e.target.closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
    e.stopImmediatePropagation();
  }
});

此代码是必需的，因为 Bootstrap 会阻止来自对话框外部元素的所有 focusin 调用。如需查看有效示例，请尝试此 TinyMCE fiddle。