关于可编辑 div 里的回车换行问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1571 天前的主题，其中的信息可能已经有所发展或是发生改变。

现在我敲回车换行，完了在敲文字的话，他中间的那个空行我不知道空了几行，所以就想在每个空行中添加个回车符号，就像 word 一样，但是我看 word 中的换行符是特殊字符 symbol：191，这玩意在在 js 中怎么敲啊

回车

word

换行符

空行

5 条回复 • 2021-09-27 14:46:50 +08:00

AoEiuV020

2021 年 9 月 24 日

不行的，word 是自己的程序自己处理特殊符号的显示，
浏览器里就算输入也不会有一样的内容的，只能是乱码之类的，

sgiyy

2021 年 9 月 24 日

可以看下这个 demo，应该满足你的需求了。记得打开编辑器的 console 。

https://codesandbox.io/s/contenteditable-div-dyfd7?file=/index.html

aglsv

2021 年 9 月 26 日

@sgiyy https://files.catbox.moe/cvum7l.png 我打开是这样的，请问这个是没有加载完成吗

sgiyy

2021 年 9 月 26 日

@aglsv #3 嗯，不过不用看了。你直接测一下，一个可编辑 DIV( <div contenteditable id="edit"></div> )，编辑以后(输入 a 、换行、输入 b 、换行)，你通过 el.innerHTML 获取它的内容，输出一下。应该会得到类似的结构( Chrome )：

a
<div><br></div>
<div>b</div>
<div><br></div>

根据 br 的数量可以知道换行数量和位置了。这样应该是你想要的吧

aglsv

2021 年 9 月 27 日

@sgiyy 非常感谢回答，我想的是在敲回车换行的时候显示一个回车符号，现在是找人整了个 svg 格式的回车符号，想的是在敲回车的时候加入这个，不过现在的问题是该怎么引入这个 svg 图片，记得 svg 是能直接通过 font-size 来控制大小的，完了还能改颜色，不顾我通过 img 和 embed 来引入都能这么操作，想问问这个该怎么整啊。还有一个是本来想的是通过 div：empty 来直接把空行的 div 的背景设置成这个，但是空行 div 里面有个<br>，所以：empty 选择器实现不了，请问有好的解决办法吗。