Как я могу скопировать специальные HTML элементы в простой текст contenteditable div? - PullRequest
0 голосов
/ 19 марта 2020

В настоящее время я разрабатываю список, где люди могут вводить некоторые заметки или сообщения. Чтобы быть уверенным, что нет проблемных 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...