javascript - TinyMCE 清除某些 div

Question

我有一个页面，想使用 TinyMCE 来编辑页面上的某些元素。当我尝试编辑以下元素时，tinyMCE 中加载的实际内容如第 2 列所示

Original : As loaded in MCE
<dd>1234<span></span></dd> : 1234<span></span>
<tr><td><label>A</label></td><td>B</td></tr> : <label>A</label>B

我知道有一些 html 验证正在进行，它检查父子元素关系(例如，只有当有表作为父元素时才应该出现 tr)。有没有一种方法可以告诉 tinyMCE 停止这样做并允许我直接编辑 tr 元素而不编辑完整的表格元素。即我想停止 tinyMCE 对加载的 HTML 进行任何更改，无论其是否有效。

此外，我尝试了 verify_html 和 valid_elements 设置，但似乎没有帮助

谢谢

Answer 1

这里有两个选择

1. 您使用 cleanup: false, tinymce 初始化设置，它将禁用 html 检查

或者你可以使用更好的选择

2.. 并定义编辑器应接受哪些元素和子元素为有效

在您的情况下，您的 valid_elements 不需要更新，因为 tr、td 和 label 默认情况下已经是有效元素(但是如果愿意，您可以将它们定义为无效)。您需要做的是将它们作为有效子项添加到 valid_children 设置中。如果你想将 tr 标签定义为 p-tags 和其他元素的有效子元素，你需要这样设置

    valid_children: "body[p|ol|ul]" +
    ",p[a|span|b|i|u|sup|sub|img|hr|#text|tr|td|label]" +
    ",span[a|b|i|u|sup|sub|img|#text|tr|td|label]" +
    ",a[span|b|i|u|sup|sub|img|#text|tr|td|label]" +
    ",b[span|a|i|u|sup|sub|img|#text|tr|td|label]" +
    ",i[span|a|b|u|sup|sub|img|#text|tr|td|label]" +
    ",sup[span|a|i|b|u|sub|img|#text|tr|td|label]" +
    ",sub[span|a|i|b|u|sup|img|#text|tr|td|label]" +
    ",li[span|a|b|i|u|sup|sub|img|ol|ul|#text]" +
    ",ol[li]" +
    ",ul[li]",