如何用html元素包装所选文本而不丢失换行符

Question

我使用contenteditablediv作为编辑器，有时还会添加一些代码。我需要在code元素中编写该代码。

为了做到这一点，我做了下一次尝试。

用法：

1. 添加一些带有换行符的文本
2. 选择该文本
3. 单击按钮以包裹所选内容

问题：当我包装所选内容时，它会意外丢失所有换行符。

function wrapSelection(){
var selected = window.getSelection().toString();
if (selected != null) {
document.execCommand('insertHTML', false, code(selected));
};
}
var code = function (S) {
var str = "<code>" + S + "</code>";
return str;
};

#design_view {
border: 1px solid gray;
padding: 10px;
min-height: 200px;
font-size: 20px;
}

<button onClick="wrapSelection()">Select and Click</button>
<div contenteditable id="design_view">
</div>

Answer 1

将style='white-space: pre-wrap;'添加到<code>元素

代码功能将变为：

var code = function (S) {
var str = "<code style='white-space: pre-wrap;'>" + S + "</code>";
return str;
};

请参阅此答案以获得更深入的解释