本文介绍在 contenteditable 可编辑区域中实现换行的两种常见方式。第一种方法通过监听键盘事件手动插入 br 标签，需注意末尾连续换行需添加两个 br 才能生效。第二种方法使用已废弃但浏览器仍支持的 document.execCommand('insertLineBreak') 命令。
在 HTML5 中，设置 contenteditable 属性为 true 的元素允许用户直接编辑内容。当业务需求要求在可编辑区域内自定义插入换行符时，通常涉及对 br 标签的处理。
第一种实现方式是通过代码显式添加换行符 br 来实现换行效果。
在实现过程中，若在文本末尾进行换行操作，需要特别注意：必须连续插入两个 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;
}第二种实现方式是利用 document.execCommand 方法。
尽管该方法已被标记为废弃，但在大多数现代浏览器中仍然有效。具体调用方式如下：
document.execCommand('insertLineBreak')
以上是关于 contenteditable 可编辑区域设置换行的详细内容，更多关于 contenteditable 可编辑区域设置换行的资料请关注本站其它相关文章！