如何防止呈現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？

回答

相關問題