V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
myevery
V2EX  ›  程序员

求本站编辑器实现原理

  •  
  •   myevery · 2020-09-30 00:48:51 +08:00 · 3847 次点击
    这是一个创建于 1275 天前的主题,其中的信息可能已经有所发展或是发生改变。
    本站的发帖的编辑器,好像就是个文本框,但能也能保存输入内容中的格式,比如换行,自动加超级链接等,不知道是如何实现的。
    比如在某个节点下方的发帖编辑器。
    而且,有的编辑器还能保存 markdown 格式。
    实在是很厉害,求大神指点下,这是怎么做到的,是什么原理!
    38 条回复    2020-09-30 17:10:39 +08:00
    also24
        1
    also24  
       2020-09-30 01:26:11 +08:00
    是后端处理的啊
    shiji
        2
    shiji  
       2020-09-30 02:46:28 +08:00   ❤️ 8
    不知道有没有人和我一样,有一种欲言又止的感觉。
    kaiki
        3
    kaiki  
       2020-09-30 02:54:15 +08:00   ❤️ 1
    原样储存,输出时处理即可。
    binux
        4
    binux  
       2020-09-30 02:54:43 +08:00
    代码没有高亮也是能运行的。
    jigi330
        5
    jigi330  
       2020-09-30 03:29:07 +08:00   ❤️ 1
    不就是个 textarea 吗, 难道是我理解错了?
    falcon05
        6
    falcon05  
       2020-09-30 07:32:45 +08:00 via iPhone
    老哥你是程序员吗?
    dlsflh
        7
    dlsflh  
       2020-09-30 07:47:52 +08:00 via Android   ❤️ 1
    楼上的老哥们何必冷嘲热讽,本站有相当比例的人不是程序员。
    请楼下信息检索大佬抬出本站自爆职业帖。
    myevery
        8
    myevery  
    OP
       2020-09-30 08:47:58 +08:00
    @kaiki 真是这样么,原样保存,输出时再加上换行等格式?
    myevery
        9
    myevery  
    OP
       2020-09-30 08:49:37 +08:00
    @jigi330 是 textarea,关键时显示时能带 html 格式啊。
    我们输入时肯定是没有输入格式的,这是怎么处理的,?
    是不是保存或输出时,逐行处理加上格式的。
    一定是这样吧!
    iConnect
        10
    iConnect  
       2020-09-30 08:52:02 +08:00 via Android   ❤️ 1
    @myevery 去看源代码就可以,早期版本有开源
    tyx1703
        11
    tyx1703  
       2020-09-30 08:57:10 +08:00 via iPhone
    https://codemirror.net/

    好像用的这个。
    myevery
        12
    myevery  
    OP
       2020-09-30 09:03:58 +08:00
    @iConnect 哪有源代码啊,有源码当然最好了。这个好像是 python 写的吧,估计还看不太懂,哈哈
    jydeng
        13
    jydeng  
       2020-09-30 09:06:26 +08:00
    就是 textarea
    a22271001
        14
    a22271001  
       2020-09-30 09:08:06 +08:00
    @kaiki XSS 警告
    Wolther47
        15
    Wolther47  
       2020-09-30 09:18:05 +08:00   ❤️ 9
    楼主如果是说发布主题的那个编辑框,就是有 Markdown 支持的那个,那的确挺厉害的,至少里面的东西比看起来要复杂,但是应该不是 Livid 自己写的,而是开源项目。

    这种东西难就难在看起来很简单,但是需求无限大,坑无限多。楼上说 textarea,但是实际上是 contenteditable 的 tag,现在火的 Notion 、Rome Research,包括各位很喜欢的 Typora,背后都是这个基本原理。大家也知道,有时候会有奇奇怪怪的体验。知乎上有一个问题 https://www.zhihu.com/question/26739121,里面有几个回答写的很详细。

    看到楼主应该是刚刚接触,有好奇心其实挺好的,至少比想当然要好。技术好奇不应该被嘲笑,至少不应该在一开始被忽视。
    misaka19000
        16
    misaka19000  
       2020-09-30 09:20:31 +08:00
    简单的正则
    Wolther47
        17
    Wolther47  
       2020-09-30 09:20:47 +08:00
    当然是 JS 写的,划给前端领域
    Wolther47
        18
    Wolther47  
       2020-09-30 09:22:23 +08:00
    现在我也有点欲言又止的感觉了(
    krixaar
        19
    krixaar  
       2020-09-30 10:09:40 +08:00
    @Wolther47 #15 问题就是,楼主不知道右键一下就能看到是 CodeMirror,然后根据这个水平进行推断,你差不多得用 ELI5 的方式来回答楼主的问题,反而就很难了……
    myevery
        20
    myevery  
    OP
       2020-09-30 10:14:32 +08:00
    @Wolther47 感谢大神回复这么多,太感谢了!
    我确实是新手,研究这个对我来说有点难度!

    我不想研究有 Markdown 支持的那个,只想了解一下,这个单贴下面的回复框是怎么实现的,是什么原理?

    看样子应该就是个 textarea,就想了解一下,这个如何加的换行,比如我这个回复:我只是换行输入简单的文本,但保存后,再显示出来就自动加上 html 换行标记了。如果有链接也会加上超级链接的格式。
    这是怎么实现的呢。。。。

    楼上有人说是输出时处理,我觉得肯定不是这样,即使是处理也应该是保存时处理,毕竟保存时只需要处理一次,而如果是输出时处理,那会处理很多次。肯定是不合适的。

    希望大神指点一下!
    myevery
        21
    myevery  
    OP
       2020-09-30 10:16:40 +08:00
    @jigi330 应该是 textarea,但如何加的格式呢,我们输入时只是输入简单的纯文本,但显示时就带格式了,我只是想知道这是如何做到的。
    pkoukk
        22
    pkoukk  
       2020-09-30 10:26:57 +08:00
    @myevery 人家都告诉你了是 codeMirror,去看看源码呗
    Torpedo
        23
    Torpedo  
       2020-09-30 10:32:52 +08:00
    @myevery 这个编辑器提交的时候,就是纯文本。
    展示的时候,应该是把'\n'加了<br/>,链接应该是正则匹配吧。
    这种前端展示的时候,做一下就可以了
    Qcui
        24
    Qcui  
       2020-09-30 10:41:20 +08:00
    我其实挺想知道楼上的是怎么做到右键一下就看到是 codemirror 的
    bnrwnjyw
        25
    bnrwnjyw  
       2020-09-30 10:52:44 +08:00   ❤️ 3
    看样子楼主没有被冷嘲热讽打击到,我来给你详细说说。

    回复的编辑器没什么难的,写的时候是纯文本,前端也就是个普通的 textarea 框,提交到后端后用 markdown to html 工具转换一下即可。

    发布帖子的编辑器的前端是开源方案,上面已经说了是 codeMirror,你可以去看源码,不过编辑器是个天坑,资深程序员都不敢说能摸透,你就别想着往里钻了。实时预览可以前端 js 做也可以提交到后端做,同上,本站的方案也是文本提交到后端做转换,前端只做显示。

    至于后端拿到 markdown 文本到 html 怎么转的,开源的工具多到你眼花,任何语言都有几十个以上的轮子。本站大概率也就是随便找个轮子做的。

    综上,如果都是开源的东西,那就是搭积木就行了。如果你要写个 codeMirror 或者 markdown to html 工具,那的确是有难度的。可以玩玩,但没必要。
    lvjiefly
        26
    lvjiefly  
       2020-09-30 11:38:04 +08:00
    有 markdown ?
    > 123abc
    cmdOptionKana
        27
    cmdOptionKana  
       2020-09-30 11:51:49 +08:00
    @myevery 后端处理一次,或者每次都让前端处理,都可以,这不是关键。

    关键是你在 textarea 里输入,每行肯定有换行符,因此你写个循环逐行处理就行了。到这里没问题吧?

    然后逐行处理那里,可以用正则替换文本,比如 @ 开头紧接半角英数并以空格结束的,就可以用正则找出来处理一下。再比如以 http 开头以空格结束的,也可以很简单地替换成链接。

    你根据这个原理自己写都很容易写出来。另外还可以找一些开源库。
    wdhwg001
        28
    wdhwg001  
       2020-09-30 11:59:13 +08:00 via iPhone   ❤️ 1
    “大哥哥,你的作业里的 dx 是什么意思呀,是解方程吗,好厉害!”
    ↑大约就这种欲言又止的感觉…
    cmdOptionKana
        29
    cmdOptionKana  
       2020-09-30 12:02:23 +08:00
    @myevery 如果我自己做,markdown 那种级别的,肯定找个开源库来弄。而且我倾向于只保存原始数据,然后让前端每次都处理( markdown 转 html )。

    因为:
    1. 如果后端保存转换后的 html,那么同时还要保存原始数据,我嫌麻烦。
    2. 前端 md 转 html 的轮子很成熟很好用,而且还耗费我后端资源。
    3. 对于用户来说,打开一个帖子只处理一次转换,而且只有主贴支持 md,评论不支持 md,完全不影响显示速度。

    当然,每次让后端转 md 后再传给前端,也行。或者后端保存转换后的 html,也行。都可以,这不是个需要纠结的地方。

    随着产品发展,有很多人提意见了,再改方式也不迟,也很容易改。
    cmdOptionKana
        30
    cmdOptionKana  
       2020-09-30 12:03:24 +08:00
    打错字了 “2. ... 而且还不耗费我后端资源”
    krixaar
        31
    krixaar  
       2020-09-30 12:07:57 +08:00
    @Qcui 指的是发新主题页面( https://www.v2ex.com/new )的那个编辑框。

    后来发觉楼主问的不是这个,说的是为什么底下这个 textarea 提交后渲染出来有格式,这就一言难尽了……
    hyperbin
        32
    hyperbin  
       2020-09-30 12:11:27 +08:00 via Android   ❤️ 1
    富文本是天坑,请勿轻易踏入
    stevenshuang
        33
    stevenshuang  
       2020-09-30 12:11:37 +08:00 via iPhone
    看成编译原理了…
    treblex
        34
    treblex  
       2020-09-30 12:58:22 +08:00
    @myevery #21 输出的就是纯文本啊,换行符可以直接保存的 ,markdown 表情 圈人那些是另外处理的
    ![]( https://tva1.sinaimg.cn/large/007S8ZIlgy1gj8l867ldej30pw0gst9m.jpg)
    ![]( https://tva1.sinaimg.cn/large/007S8ZIlgy1gj8l6zndvdj31o60j0my3.jpg)
    Qcui
        35
    Qcui  
       2020-09-30 14:26:08 +08:00
    @krixaar 果然两个编辑器不一样,我说在下面回复的那个编辑框里怎么找都没看到 codeMirror,还以为有啥黑科技(😅),哈哈
    myevery
        36
    myevery  
    OP
       2020-09-30 14:26:38 +08:00
    @krixaar 您说的对,我是想知道 textarea 提交后渲染出来怎么有格式的!
    感谢这么多人热情回复!
    我理解了一点。好像就是直接保存原文本,显示时直接用<br>替换一下文本中的回车 /换行符,需要加链接的地方用正则替换一下。
    不知道我理解的对不对!
    lovecy
        37
    lovecy  
       2020-09-30 14:44:34 +08:00
    @myevery 保存的时候肯定不是原文本的,得进行各种过滤,防止注入,不信一行前面多打几个空格试试。<br>应该是保存的时候就替换了换行符
    java8
        38
    java8  
       2020-09-30 17:10:39 +08:00
    我用 `codemirror` 实现了[markdown]( http://chuanwazi.gitee.io/md/) 编辑器,用着还不错
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3188 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 41ms · UTC 14:24 · PVG 22:24 · LAX 07:24 · JFK 10:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.