contenteditable 在需要自定义插入换行符 br
1.方式一,添加换行符 br 进行换行,其中在末尾换行时需要增加两个br,如不增加则第一次不会产生换行
<div
class="inputContent scroll"
contenteditable="true"
@keydown="inputContent_keydown"
></div>
function inputContent_keydown(e) {
// 1.快捷键判断 回车加ctrl
if( e.keyCode==13 && e.ctrlKey) {
if (document.selection) {//IE9以下
document.selection.createRange().pasteHTML(content);
} else {
let doc_fragment = document.createDocumentFragment();
// 创建br
let new_ele = document.createElement('br');
doc_fragment.appendChild(new_ele);
// 获取当前选择
let range = window.getSelection().getRangeAt(0);
range.deleteContents();
// 判断是否是最后一个元素如果是多加一个
if (!hasNextSibling(range.endContainer) && range.startOffset == range.startContainer.length) {
let extra_break = document.createElement('br');
doc_fragment.appendChild(extra_break);
}
range.insertNode(doc_fragment);
//创建新范围
range = document.createRange();
range.setStartAfter(new_ele);
range.collapse(true);
//插入
let sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
}
function hasNextSibling(node) {
if (node.nextElementSibling) {
return true;
}
while (node.nextSibling) {
node = node.nextSibling;
if (node.length > 0) {
return true;
}
}
return false;
}
2.方式二使用 document.execCommand (已废弃,但大部分浏览器仍然支持)document.execCommand('insertLineBreak')
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。