求本站编辑器实现原理

[myevery]

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

[myevery]

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

[pkoukk]

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

[Torpedo]

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

[Qcui]

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

[bnrwnjyw]

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

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

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

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

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

[lvjiefly]

有 markdown ？
> 123abc

[cmdOptionKana]

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

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

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

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

[wdhwg001]

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

[cmdOptionKana]

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

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

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

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

[cmdOptionKana]

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

[krixaar]

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

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

[hyperbin]

富文本是天坑，请勿轻易踏入

[stevenshuang]

看成编译原理了…

[treblex]

@myevery #21 输出的就是纯文本啊，换行符可以直接保存的 ，markdown 表情 圈人那些是另外处理的

[Qcui]

@krixaar 果然两个编辑器不一样，我说在下面回复的那个编辑框里怎么找都没看到 codeMirror，还以为有啥黑科技（😅），哈哈

[myevery]

@krixaar 您说的对，我是想知道 textarea 提交后渲染出来怎么有格式的！
感谢这么多人热情回复！
我理解了一点。好像就是直接保存原文本，显示时直接用<br>替换一下文本中的回车 /换行符，需要加链接的地方用正则替换一下。
不知道我理解的对不对！

[lovecy]

@myevery 保存的时候肯定不是原文本的，得进行各种过滤，防止注入，不信一行前面多打几个空格试试。<br>应该是保存的时候就替换了换行符

[java8]

我用 `codemirror` 实现了[markdown]( http://chuanwazi.gitee.io/md/) 编辑器，用着还不错