在 Shadow DOM 中运行 TinyMCE

目前，不支持在 Shadow DOM 内部运行 TinyMCE 实例。

在 Shadow DOM 内部运行 TinyMCE 实例——无论是经典模式还是内联模式——可能会正常工作。

例如：

<div id="shadow-host"></div>

<script type="text/javascript">

  const shadowHost = document.getElementById('shadow-host');

  // 注意：Closed shadow roots 目前甚至实验性支持都不具备。
  const shadow = shadowHost.attachShadow({mode: 'open'});

  const node = document.createElement('textarea');
  node.value = '添加到 <em>TinyMCE</em> 编辑器实例的文本 <strong>在加载时。</strong>';
  shadow.appendChild(node);

  tinymce.init({
    // 注意：使用'target'指定 TinyMCE 编辑器实例替换的节点。
    // 不要使用'selector'。
    target: node,
    plugins: [
        "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
        "help", "image", "insertdatetime", "link", "lists", "media",
        "preview", "searchreplace", "table", "visualblocks",
    ],
    toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",

  });
</script>

但是，TinyMCE 目前不会检查其宿主节点是否存在处于 Shadow DOM 内部的证据（例如，在宿主节点的 opening tag 之前检查 #shadow-root 字符串）。

因此，虽然 TinyMCE 实例在 Shadow DOM 内部可能会按预期工作，但目前不支持在 Shadow DOMs 内部运行 TinyMCE 实例。