求本站编辑器实现原理

V2EX = way to explore

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

现在注册

已注册用户请登录

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

本站的发帖的编辑器，好像就是个文本框，但能也能保存输入内容中的格式，比如换行，自动加超级链接等，不知道是如何实现的。
比如在某个节点下方的发帖编辑器。
而且，有的编辑器还能保存 markdown 格式。
实在是很厉害，求大神指点下，这是怎么做到的，是什么原理！

编辑器

发帖

原理

格式

38 条回复 • 2020-09-30 17:10:39 +08:00

also24

2020-09-30 01:26:11 +08:00

是后端处理的啊

shiji

2020-09-30 02:46:28 +08:00

不知道有没有人和我一样，有一种欲言又止的感觉。

kaiki

2020-09-30 02:54:15 +08:00

原样储存，输出时处理即可。

binux

2020-09-30 02:54:43 +08:00

代码没有高亮也是能运行的。

jigi330

2020-09-30 03:29:07 +08:00

不就是个 textarea 吗，难道是我理解错了？

falcon05

2020-09-30 07:32:45 +08:00 via iPhone

老哥你是程序员吗？

dlsflh

2020-09-30 07:47:52 +08:00 via Android

楼上的老哥们何必冷嘲热讽，本站有相当比例的人不是程序员。
请楼下信息检索大佬抬出本站自爆职业帖。

myevery

2020-09-30 08:47:58 +08:00

@kaiki 真是这样么，原样保存，输出时再加上换行等格式？

myevery

2020-09-30 08:49:37 +08:00

@jigi330 是 textarea，关键时显示时能带 html 格式啊。
我们输入时肯定是没有输入格式的，这是怎么处理的，？
是不是保存或输出时，逐行处理加上格式的。
一定是这样吧！

iConnect

2020-09-30 08:52:02 +08:00 via Android

@myevery 去看源代码就可以，早期版本有开源

tyx1703

2020-09-30 08:57:10 +08:00 via iPhone

https://codemirror.net/

好像用的这个。

myevery

2020-09-30 09:03:58 +08:00

@iConnect 哪有源代码啊，有源码当然最好了。这个好像是 python 写的吧，估计还看不太懂，哈哈

jydeng

2020-09-30 09:06:26 +08:00

就是 textarea

a22271001

2020-09-30 09:08:06 +08:00

@kaiki XSS 警告

Wolther47

2020-09-30 09:18:05 +08:00

楼主如果是说发布主题的那个编辑框，就是有 Markdown 支持的那个，那的确挺厉害的，至少里面的东西比看起来要复杂，但是应该不是 Livid 自己写的，而是开源项目。

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

看到楼主应该是刚刚接触，有好奇心其实挺好的，至少比想当然要好。技术好奇不应该被嘲笑，至少不应该在一开始被忽视。

misaka19000

2020-09-30 09:20:31 +08:00

简单的正则

Wolther47

2020-09-30 09:20:47 +08:00

当然是 JS 写的，划给前端领域

Wolther47

2020-09-30 09:22:23 +08:00

现在我也有点欲言又止的感觉了（

krixaar

2020-09-30 10:09:40 +08:00

@Wolther47 #15 问题就是，楼主不知道右键一下就能看到是 CodeMirror，然后根据这个水平进行推断，你差不多得用 ELI5 的方式来回答楼主的问题，反而就很难了……

myevery

2020-09-30 10:14:32 +08:00

@Wolther47 感谢大神回复这么多，太感谢了！
我确实是新手，研究这个对我来说有点难度！

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

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

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

希望大神指点一下！

myevery

2020-09-30 10:16:40 +08:00

@jigi330 应该是 textarea，但如何加的格式呢，我们输入时只是输入简单的纯文本，但显示时就带格式了，我只是想知道这是如何做到的。

pkoukk

2020-09-30 10:26:57 +08:00

@myevery 人家都告诉你了是 codeMirror，去看看源码呗

Torpedo

2020-09-30 10:32:52 +08:00

@myevery 这个编辑器提交的时候，就是纯文本。
展示的时候，应该是把'\n'加了<br/>，链接应该是正则匹配吧。
这种前端展示的时候，做一下就可以了

Qcui

2020-09-30 10:41:20 +08:00

我其实挺想知道楼上的是怎么做到右键一下就看到是 codemirror 的

bnrwnjyw

2020-09-30 10:52:44 +08:00

看样子楼主没有被冷嘲热讽打击到，我来给你详细说说。

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

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

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

综上，如果都是开源的东西，那就是搭积木就行了。如果你要写个 codeMirror 或者 markdown to html 工具，那的确是有难度的。可以玩玩，但没必要。

lvjiefly

2020-09-30 11:38:04 +08:00

有 markdown ？
> 123abc

cmdOptionKana

2020-09-30 11:51:49 +08:00

@myevery 后端处理一次，或者每次都让前端处理，都可以，这不是关键。

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

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

你根据这个原理自己写都很容易写出来。另外还可以找一些开源库。

wdhwg001

2020-09-30 11:59:13 +08:00 via iPhone

“大哥哥，你的作业里的 dx 是什么意思呀，是解方程吗，好厉害！”
↑大约就这种欲言又止的感觉…

cmdOptionKana

2020-09-30 12:02:23 +08:00

@myevery 如果我自己做，markdown 那种级别的，肯定找个开源库来弄。而且我倾向于只保存原始数据，然后让前端每次都处理（ markdown 转 html ）。

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

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

随着产品发展，有很多人提意见了，再改方式也不迟，也很容易改。

cmdOptionKana

2020-09-30 12:03:24 +08:00

打错字了 “2. ... 而且还不耗费我后端资源”

krixaar

2020-09-30 12:07:57 +08:00

@Qcui 指的是发新主题页面（ https://www.v2ex.com/new ）的那个编辑框。

后来发觉楼主问的不是这个，说的是为什么底下这个 textarea 提交后渲染出来有格式，这就一言难尽了……