Как предотвратить contenteditable div от рендеринга html?

Question

Вот мой код: https://jsfiddle.net/tb8ryyp6/1/

Как вы можете видеть, если перетащить изображение в contenteditable div его содержимое отображается в виде HTML. Я хочу предотвратить это поведение. В настоящее время я решил эту проблему с привязкой обработчика событий к contenteditable div на событие drop, подобное этому ondrop='return false;'.

Это работает для меня.

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

Но. Это решение, похоже, не является кросс-браузерным решением, и пользователь может в любой момент легко удалить этот обработчик, изменив исходный код HTML в dev-tools.

В общем, я хочу, чтобы недопустимый контент div отображал любой элемент HTML. Этот элемент может быть не просто образным, он может быть элементом привязки, например. В качестве решения это может быть как кросс-браузер, предотвращающий действия по удалению, так и отображение HTML в виде текста. Но сначала предпочтительнее.

Благодарим за помощь!

Answer 1

В большинстве случаев вы можете создать <textarea>, как и все остальное. Но то, что вы хотите, также может быть сделано с помощью <div contenteditable>.

Пользователь может удалить этот обработчик в любое время, изменив исходный код html в 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