html - 在 contenteditable 中禁用浏览器标记

Question

我想禁止浏览器在我的 contenteditable 中添加除 HTML 标签以外的任何内容。分区

明确地说，没有 ifs、ands、buts 或蜜饯。

现在，尤其是 Chrome 真的让我感到[恼火]。

如果我有一个样式集，比如

p { font-size:1.2em; line-height:1.6em; }

它会说“哦，你一定是说你想要:”

<span style="font-size:1.2em; line-height:1.6em;">stuff</span>

我当然不会。事实上，我不希望它创建任何 span 标签——永远。如果我这样做，我会在我的 javascript 中明确说明，而不是在片刻之前。

这是一个非常令人沮丧的问题，我知道 contenteditable仍然是那些自担风险的网络功能之一，充满了错误和短视的“哦，我们应该这样做......”浏览器开发人员真的糟透了 用于制作漂亮干净的 HTML。

这里有什么我可以做的吗？我已经驯服了“从 Word 粘贴”来修复 MIcrosoft 的 SCSS 代码汤，征服了大部分 execCommand s缺点，但是这个..这个。

如果我在走到这一步后无法解决浏览器注入(inject)不需要和不必要的标记，我会 [慌乱]，但我很担心。 有希望吗？

Answer 1

这是一个可以应用于contenteditable 元素的函数，它将确保该元素仅以nodeName 的单个子节点“#text”结束。

var sanitizeContentEditable(elem) {
    var textContent = [];
    for (var i = 0; i < elem.childNodes.length; i++) {
        var child = elem.childNodes[i];
        textContent.push(child.textContent);
        if (child.nodeName !== '#text') textContent.push('\n');
    }
    elem.innerHTML = textContent.join('');
};

这个函数简单地获取每个子元素的文本内容，将换行符附加到非文本子元素的内容，并将所有这些字符串连接在一起，从而确保 contenteditable 元素只有一个单一的文本类型的 child 。