javascript - 如何在 IE11 中保留 getSelection().toString 中的 br 标签？

Question

目前execCommand 'forecolor'命令创建 <font>具有所选颜色的标签(已弃用)。我想创建一个<span>标签代替。

我正在尝试编写自己的函数来执行此操作，这就是我目前所做的:

var sel = getSelection();

var range = sel.getRangeAt(0);

var selectedText = getSelection().toString();

document.execCommand("delete");

var newNode = document.createElement("span");

newNode.innerHTML = selectedText;
newNode.style.color = currentColor;

range.insertNode(newNode);

range.setStart(newNode, 0)
range.setEnd(newNode, newNode.childNodes.length);

sel.removeAllRanges;
sel.addRange(range);

我面临的问题:当有一个或多个 <br> 时选择中的标签将丢失。我知道toString()函数会剥离标签，但如何保留这些标签和文本？

更新:不幸的是我意识到尽管在每个br处添加\n有效，当您尝试使用键盘移动 div 中的插入符号时，会考虑\n 字符:因此，例如，如果我想删除空行，我必须按两次退格键才能将插入符号向上发送一行。我认为这个问题仍然没有解决。

Answer 1

您需要将每个换行符转换为 <br>标签

更改此行:

newNode.innerHTML = selectedText;

对此:

newNode.innerHTML = selectedText.replace(/(?:\r\n|\r|\n)/g, '<br />');

这会将每种形式的换行符替换为 <br>标签，以便您获得正确的结构

这是一个工作示例:

// fix for IE11
// pasteHtmlAtCaret("<br />\n");

$('button').click(() => {
  var sel = window.getSelection();

  var range = sel.getRangeAt(0);

  var selectedText = getSelection().toString();

  document.execCommand("delete");

  var newNode = document.createElement("span");

  newNode.innerHTML = selectedText.replace(/(?:\r\n|\r|\n)/g, '<br />');
  newNode.style.color = 'orange';

  range.insertNode(newNode);

  range.setStart(newNode, 0)
  range.setEnd(newNode, newNode.childNodes.length);

  sel.removeAllRanges;
  sel.addRange(range);
});

p {
  background: #212121;
  color: white;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p contenteditable="true">
  This content should be edtiable,<br> and when selecting text and clicking the button,<br> the text should get colored and NOT mess up newlines
</p>

<button>
color selection and keep linebreaks
</button>

正如 @devamat 在他的回答中提到的，IE11 取代了 <br>使用空格而不是换行符的元素。为了修复 IE11 的此问题，请使用以下函数更改插入符号:

pasteHtmlAtCaret("<br />\n");

这也应该可以解决 IE11 的问题