tinyMCE：不再显示内容，工具栏替换为 3 个点

Question

这个问题从今天开始。突然之间，tinyMCE 不再显示原始 textarea 的内容，我看到的不是工具栏，而是 3 个点：

内容确实存在（如右下角的“139 WORDS”文本所示）。如果我单击“预览”（在文件下），内容将显示在预览窗口中。如果我重新加载页面，有时会显示内容和工具栏（大约每 15 次重新加载一次）。我已经用 FireFox、Chrome 和 Edge 对此进行了测试。都有同样的问题。

如果我检查页面（使用浏览器的开发工具），我看不到任何错误。

这就是我在页面中包含 tinyMCE 的方式：

<script src="https://cdn.tiny.cloud/1/<my API key>/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

那么这里出了什么问题？

========== 编辑 ===========

我发现是什么导致这个，而不是为什么它会发生或者如何解决它（或者为什么这个问题今天突然开始了） .我的 textarea 在我在 DOM 中移动的容器 div 内。这个容器 div 有时会得到一个新的父级。完成后，内容消失并出现 3 个点。

========== 编辑 2 ==========

我意识到我可能需要澄清我的上述编辑。编辑器有时会获得新父母的原因是因为我想“禁用”它的使用。我为此使用了一个简单的技巧。就在编辑器的容器div之前，我还有一个div：

<div id="disable_edit" style="position:relative;cursor:not-allowed">
  <div id="wall" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); opacity: 0.65; z-index: 1;"></div>
</div>
<div id="editor">
  <textarea id="description"></textare>
</div>

当我想“禁用”编辑时，我只需将 editor div（通过 Javascript）移动到 disable_edit div 中：

<div id="disable_edit" style="cursor:not-allowed">
  <div id="editor">
    <textarea id="description"></textare>
  </div>
  <div id="wall" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); opacity: 0.65; z-index: 1;"></div>
</div>

这总是完美的。所以不知道为什么突然就不行了。

Answer 1

您的代码中的某处可能有 display:none for iframe。