如何防止呈现html的contenteditable div？

这里是我的代码：https://jsfiddle.net/tb8ryyp6/1/如何防止呈现html的contenteditable div？

正如你可以看到，如果我们拖拽图像CONTENTEDITABLE div其内容呈现为HTML。我想防止这种行为。目前我解决了这个问题，将事件处理程序附加到了像ondrop='return false;'这样的丢弃事件上的contenteditable div。

这对我的作品。

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

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

总的来说，我想阻止CONTENTEDITABLE div从渲染任何HTML元素。这个元素可能不只是图像，它可能是一个锚元素，例如。作为解决方案，它既可以是跨浏览器防止拖放操作，也可以将HTML显示为文本。但第一个是可取的。

感谢您的帮助！

来源

2016-07-18 Emil

用户可以在页面上改变任何东西！您想做什么？防止拖放或添加图像作为文字？ –

在一般情况下，我想防止呈现任何html元素contenteditable div。这个元素可能不只是图像，它可能是一个锚元素，例如。作为解决方案，它既可以是跨浏览器禁用拖放操作，也可以将html显示为文本。但第一个是可取的。 – Emil

然后使用'textarea'！ –

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

用户可以通过更改开发工具的HTML源代码在任何时间删除此，甚至处理。

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

此代码使用innerText属性（其中包含未格式化的文本）。由于换行是innerText和<br>\n在<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

来源

2016-07-19 00:44:30 Aloso

如何防止呈现html的contenteditable div？

回答

相关问题