javascript - 复制和粘贴列表项时如何添加换行符？

Question

当有人从我的站点复制文本时，我想在每个列表项之间放置一个额外的换行符，因为元素符号点不会复制。我该怎么做？

this question 的答案只是告诉您如何将代码添加到复制文本的开头和/或结尾，我想在列表项之间添加代码!

代码非常简单:

<div>
  <li>This is the first paragraph.</li>
  <li>This is the second.</li>
  <li>This is the third.</li>
</div>

<textarea>Copy &amp; paste here with breaks in between each list item.</textarea>

https://jsfiddle.net/cleo_not_chloe/pvn3ahtr/

谢谢!

Answer 1

• 使用.on("copy", callback)检测用户使用鼠标复制文本或键盘 ( Ctrl + c )。
• 使用window.getSelection()获取选定的文本并将其自定义为您喜欢删除、添加或替换文本。我在这里用过 .replace(/\n/g,"\n\n")将每条断线加倍。
• 使用.on("paste", callback)要设置的事件 #textarea与你的值(value)自定义复制文本。
• <textarea>应该由纯文本填充，所以使用 .val()不是 .innerHTML和 .html() .

//create global variable to store copied text.
var s;
//listen to copy for your element
$("#text").on("copy", function() {
  //get selected text while coping  
  s = window.getSelection().toString();
  //customize breaklines to be double
  s = s.replace(/\n/g, "\n\n");

  //add break line to the end and more text
  s += "\n" + "- More text says you are welcome";
  //HTML will displays as plain text in textarea
  s += "\n" + "- <p>Hello world</p>";

});
// listen to paste
$("#textarea").on("paste", function() {
  //set value with your customized copied text
  $("#textarea").val(s);
  return false;
});

li {
  list-style-type: none;
}
#savebox {
  float: right;
}
#textarea {
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text" contenteditable="true">
  <ul>
    <li>This is the first paragraph.</li>
    <li>This is the second.</li>
    <li>This is the third.</li>
  </ul>
</div>

<div id="savebox">
  <textarea id="textarea">Copy &amp; paste here with breaks in between each list item.</textarea>
</div>