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

TinyMCE jQuery 集成可与 Bootstrap 一起使用。有关使用 jQuery 集成的信息，请参阅：jQuery Tiny Cloud 集成。

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

设置

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

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

  2. 要从 Tiny Cloud 获取 TinyMCE，请将以下 script 元素添加到文档的 <head> 中：

    <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 时创建的。

    注册 Tiny Cloud API 密钥还将提供 Premium Plugins 的试用。

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

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

  4. 添加 TinyMCE 初始化脚本。

    <script>
  tinymce.init({
    selector: 'textarea#tiny'
  });
</script>

在 Bootstrap 对话框中使用 TinyMCE

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

Bootstrap 4 或更低版本

// 防止 Bootstrap 对话框阻止 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 或更高版本

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