javascript - 如何防止 contenteditable div 呈现 html？

Question

这是我的代码:https://jsfiddle.net/tb8ryyp6/1/

如您所见，如果我们将图像拖放到 contenteditable div 中，其内容将呈现为 HTML。我想阻止这种行为。目前我通过将事件处理程序附加到 contenteditable div on drop 事件解决了这个问题，就像这样 ondrop='return false;'。

这对我有用。

<div contenteditable='true' ondrop='return false;'>

但是。这个解决方案似乎不是一个跨浏览器的解决方案，用户可以随时通过更改开发工具中的 HTML 源代码轻松地删除这个偶数处理程序。

一般来说，我想阻止内容可编辑的 div 呈现任何 HTML 元素。这个元素不仅可以是图像，还可以是 anchor 元素。作为解决方案，它既可以是跨浏览器防止拖放操作，也可以将 HTML 显示为文本。但第一个更好。

感谢您的帮助!

Answer 1

在大多数情况下，您可以设计一个 <textarea>就像其他任何东西一样。但是你想要的也可以用<div contenteditable>来完成。 .

user can remove this even handler at any time by changing html source code in dev-tools.

如果您使用 addEventListener("drop", func) ，事件监听器在 html 代码中不可见。虽然它仍然可以被删除，但是如果网站不再正常工作就不是你的问题了(它只是在浏览器中发生了变化，而不是在服务器上发生了变化!)

此代码使用 innerText属性(包含未格式化的文本)。由于换行符是 \n在 innerText和 <br>在<div> , 它必须转换。

var ediv = document.getElementById("ediv");

function noHTML() {
    setTimeout(function() {
        var str1 = ediv.innerText.replace(/\n/g,"");
        var str2 = ediv.innerHTML.replace(/<br>/g,"");
        
        if (str1 != str2) {
            ediv.innerText = ediv.innerText;
        }
    }, 1);
}

// Remove markup when dropping something (e.g. image/ link)
ediv.addEventListener("drop", noHTML);
// Remove markup when pasting something (e.g. from Microsoft Word)
ediv.addEventListener("paste", noHTML);
// Remove markup from the clipboard when copying something
ediv.addEventListener("copy", function(e) {
    noHTML();
    if (e.clipboardData) {
        var text = window.getSelection().toString();
        e.preventDefault();
        e.clipboardData.setData('Text', text);
    }
});
// Remove markup when the div gains focus
ediv.addEventListener("focus", noHTML);
// Remove markup when the div loses focus
ediv.addEventListener("blur", noHTML);

#ediv{
  background-color: white;
  height: 70px;
  border: 2px dotted blue; 
  margin-bottom: 20px;
  padding: 10px;
}
[placeholder]:empty:before {
    content: attr(placeholder);
    color: #ddd; 
}
[placeholder]:empty:focus:before {
    content: "";
}
#img {
  text-align: center;
}

<div id='ediv' contenteditable='true' placeholder='i am contenteditable div..'></div>

<div id='img'>
  <span>drag and drop this image to contenteditable div</span>
  <br>
  <img src='https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg' width='220px'><br>
  <a href='https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg'>Hyperlink</a>
</div>

Updated Fiddle