В настоящее время я разрабатываю список, где люди могут вводить некоторые заметки или сообщения. Чтобы быть уверенным, что нет проблемных c HTML, я запрограммировал обходной путь для моего contenteditable div
, который определяет ввод.
Проблема в том, что у меня есть специальный HTML элементы, которые должны быть настоящими HTML внутри моих contenteditable div
. Так, например, когда у меня есть строка текста с HTML элементами внутри:
<span class="special">Special</span> text get's copied <div id="amount">20</div>
, и я копирую эту строку в свой contenteditable div
, я хочу разрешить любые элементы с class="special
"для вставьте как HTML и запретите все остальное, чтобы результат был:
<span class="special">Special</span> text get's copied 20
Есть ли способ сделать это с моим реальным кодом? Я почти закончил, но это большая проблема для я. Я пока не нашел пути.
Это мой код:
jQuery(document).ready(function($) {
let input = $("#input");
input.on("paste", function(e) {
e.preventDefault();
let clipboardText = e.originalEvent.clipboardData.getData('text');
document.execCommand("insertHTML", false, clipboardText.replace(/\t/g, " "));
});
});
[contenteditable=true] {
border: 1px solid #aaaaaa;
padding: 8px;
border-radius: 12px;
margin-bottom: 20px;
white-space: pre-wrap;
word-wrap: break-word;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" contenteditable="true" spellcheck="true"></div>