V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
aglsv
V2EX  ›  问与答

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

  •  
  •   aglsv · 2021-09-24 16:06:12 +08:00 · 1282 次点击
    这是一个创建于 1181 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    5 条回复    2021-09-27 14:46:50 +08:00
    AoEiuV020
        1
    AoEiuV020  
       2021-09-24 16:20:40 +08:00
    不行的,word 是自己的程序自己处理特殊符号的显示,
    浏览器里就算输入也不会有一样的内容的,只能是乱码之类的,
    sgiyy
        2
    sgiyy  
       2021-09-24 18:13:35 +08:00
    可以看下这个 demo,应该满足你的需求了。记得打开编辑器的 console 。

    https://codesandbox.io/s/contenteditable-div-dyfd7?file=/index.html
    aglsv
        3
    aglsv  
    OP
       2021-09-26 16:17:28 +08:00
    @sgiyy https://files.catbox.moe/cvum7l.png 我打开是这样的,请问这个是没有加载完成吗
    sgiyy
        4
    sgiyy  
       2021-09-26 16:38:40 +08:00
    @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
        5
    aglsv  
    OP
       2021-09-27 14:46:50 +08:00
    @sgiyy 非常感谢回答,我想的是在敲回车换行的时候显示一个回车符号,现在是找人整了个 svg 格式的回车符号,想的是在敲回车的时候加入这个,不过现在的问题是该怎么引入这个 svg 图片,记得 svg 是能直接通过 font-size 来控制大小的,完了还能改颜色,不顾我通过 img 和 embed 来引入都能这么操作,想问问这个该怎么整啊。还有一个是本来想的是通过 div:empty 来直接把空行的 div 的背景设置成这个,但是空行 div 里面有个<br>,所以:empty 选择器实现不了,请问有好的解决办法吗。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3118 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:05 · PVG 21:05 · LAX 05:05 · JFK 08:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.