Как я могу сохранить разрывы строк (форматирование) элемента, добавляемого в список посредством contenteditable ввода div?

Question

У меня небольшая проблема. В настоящее время я программирую список, где пользователи могут вводить некоторые подсказки / сообщения. Это работает довольно хорошо, но есть проблема, которую я нашел, и она мне не нравится.

Чтобы предотвратить ввод HTML, я реализовал некоторые вещи внутри функции paste, которая дает мне любой простой текст, если есть HTML. Когда я сейчас копирую код, имеющий несколько строк, например:

$( "button" ).click( function () {
    let template = $( "#template" ).clone();

  template.removeAttr("id");
    template.html( input.html() );

  input.empty();
    $( "#wrapper" ).append( template );
} ); 

, и вставляю его в мой contenteditable div, форматирование строк все еще там. Если я сейчас нажму кнопку, чтобы добавить его в список, форматирование полностью исчезнет, ​​и все будет в одной строке.

Я сейчас ищу способ это исправить. У кого-нибудь есть идеи, как мне предотвратить потерю каких-либо разрывов строк и форматирования?

jQuery(document).ready(function($) {
  let input = $("#input");

  $("button").click(function() {
    let template = $("#template").clone();

    template.removeAttr("id");
    template.html(input.html());

    input.empty();
    $("#wrapper").append(template);
  });

  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;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

#wrapper {
  border: 1px solid;
  height: 350px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: 10px;
  padding: 15px;
}

.entry {
  display: flex;
  background-color: gray;
  margin-bottom: 8px;
  padding: 4px;
}

#template {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <span id="template" class="entry"></span>
</div>
<div id="input" placeholder="Write a message..." contenteditable="true" spellcheck="true"></div>
<button>Add to list</button>

Редактировать

Я уже заменяю вкладки пробелами, чтобы обойти возможную проблему здесь.

Answer 1

Вы можете просто добавить white-space: pre; к вашему css .entry классу, вот так:

jQuery(document).ready(function($) {
  let input = $("#input");

  $("button").click(function() {
    let template = $("#template").clone();

    template.removeAttr("id");
    template.html(input.html());

    input.empty();
    $("#wrapper").append(template);
  });

  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;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

#wrapper {
  border: 1px solid;
  height: 350px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: 10px;
  padding: 15px;
}

.entry {
  display: flex;
  white-space: pre;
  background-color: gray;
  margin-bottom: 8px;
  padding: 4px;
}

#template {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <span id="template" class="entry"></span>
</div>
<div id="input" placeholder="Write a message..." contenteditable="true" spellcheck="true"></div>
<button>Add to list</button>

Использование white-space: pre сообщит браузеру о сохранении пробелов, а текст будет переноситься только при переносе строк. Действует как тег <pre> в HTML.