如何用 html 元素换行而不丢失换行符？

Question

我正在使用 contenteditable div 作为编辑器，有时我会添加一些代码。我需要在 code 元素中包含该代码。

为此，我进行了下一次尝试。

用法：

添加一些带有换行符的文本。
select那个文字。
点击按钮包裹select离子。

问题： 当我包裹 selection 时，它意外地丢失了所有换行符。

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;
    };

查看此以获得更深入的解释

如何用 html 元素换行而不丢失换行符？

How to wrap selected text with html element without losing line breaks?

html

javascript

css

contenteditable