javascript - 如何通过可内容编辑的 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>

编辑

我已经用空格替换制表符来解决这里可能出现的问题。

标签： javascriptjqueryhtmlcss

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>

Usingwhite-space: pre将告诉浏览器保留空白，并且文本只会在换行符处换行。类似于<pre>HTML 中的标签。