javascript - 如何通过 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 中的标记。