Question

我想禁用浏览器在我的contenteditable div中添加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仍是其中一个使用你自己的危险网络功能充满了错误和近视“哦我们应该做......“由浏览器开发人员实际上只是 suck 来制作干净的HTML。

我能在这里做些什么吗？我已经驯服了“从Word粘贴”来修复MIcrosofts的混蛋代码汤，克服了execCommand的大部分缺点，但是这个缺点。这一个。

如果我不能在浏览器注入不必要的和不必要的标记之后解决这个问题，我会感到[慌乱]，但我很担心。 有什么希望吗？

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元素只有一个，文字型儿童。

Answer 2

关于“我不希望它创建任何span标签 - 永远”，如何使用配置的高级内容过滤器，使其根本不允许使用span标签？那可能有用。或者将其配置为不允许font-size和line-height样式用于跨度，如果您秘密地希望有时会出现跨度。

在contenteditable中禁用浏览器标记

2 个答案: