Как не допустить, чтобы contenteditable div отображал html?

javascript html css

1902 просмотра

1 ответ

379 Репутация автора

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

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

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

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

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

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

Спасибо за вашу помощь!

Автор: Emil Источник Размещён: 18.07.2016 11:11

Ответы (1)


0 плюса

1995 Репутация автора

Решение

В большинстве случаев вы можете создать <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>

Обновленная скрипка

Автор: Aloso Размещён: 19.07.2016 12:44
32x32