Question

正如您所看到的，如果我们将图像拖放到可信的div，其内容将呈现为HTML。我想阻止这种行为。目前，我解决了这个问题，将事件处理程序附加到与div一样的drop事件上的可疑ondrop='return false;'。

这对我有用。

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

但即可。这个解决方案似乎不是一个跨浏览器的解决方案，用户可以通过更改dev-tools中的HTML源代码随时轻松删除这个甚至处理程序。

一般来说，我希望阻止一个可信的div呈现任何HTML元素。例如，该元素可能不仅仅是图像，它可能是一个锚元素。作为解决方案，它既可以是跨浏览器，也可以是防止删除操作或将HTML显示为文本。但首先要做的是。

感谢您的帮助！

Answer 1

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

用户可以通过更改dev-tools中的html源代码随时删除此偶数处理程序。

如果您使用addEventListener("drop", func)，则事件监听器在html代码中不可见。它仍然可以删除，但如果网站不再正常工作（它只在浏览器中更改，而不是在服务器上更改，那么它不是你的问题！）

此代码使用innerText属性（包含未格式化的文本）。由于\n中的换行符为innerText，<br>中的换行符为<div>，因此必须进行转换。

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

<强> Updated Fiddle

如何防止contenteditable div渲染html？

1 个答案: