javascript - 隐藏 div 中的 tinyMCE 仅在第一次更新并且变为只读

Question

我的页面上有一个带有 tinyMCE (textarea) 的网格和 div。Div 最初是隐藏的。填充文本区域后:

$('#editor').val(data.Content);
$("#divGrid").hide("slide");
$("#divCard").show("slide");
InitMCE();

出现 tinyMCE 中的内容并且组件是可编辑的，但是在用 textarea (#divCard) 隐藏 div 之后，再次填充 $('#editor').val(data.Content);tinyMCE 显示为只读且未显示内容。

InitMCE()函数中的代码是:

tinyMCE.init({
   mode: "textareas",
   theme: "advanced",
...
});

我试过

tinyMCE.execCommand("mceRemoveControl", false, '#editor');
$('#editor').val(data.Content);
$("#divGrid").hide("slide");
$("#divCard").show("slide");
InitMCE();

和:

tinyMCE.remove($('textarea'));
$('#editor').val(data.Content);
$("#divGrid").hide("slide");
$("#divCard").show("slide");
tinyMCE.execCommand("mceAddControl", false, '#editor');
InitMCE();

和一些其他变体但没有成功。

Answer 1

为什么要隐藏文本区域。

如果您在 TinyMCE 初始化后检查 html DOM 结构，您会看到 TinyMCE 使用 div 和 textarea 前面的 span 来呈现您的文本，但是当您尝试编辑它时，您实际上是编辑文本区域。

因此，如果您隐藏文本区域，您将无法再对其进行编辑。