求本站编辑器实现原理
比如在某个节点下方的发帖编辑器。
而且,有的编辑器还能保存 markdown 格式。
实在是很厉害,求大神指点下,这是怎么做到的,是什么原理!
好像用的这个。
这种东西难就难在看起来很简单,但是需求无限大,坑无限多。上说 textarea,但是实际上是 contenteditable 的 tag,现在火的 Notion 、Rome Research,包括各位很喜欢的 Typora,背后都是这个基本原理。大家也知道,有时候会有奇奇怪怪的体验。知乎上有一个问题 https://www.zhihu.com/question/26739121,里面有几个回答写的很详细。
看到主应该是刚刚接触,有好奇心其实挺好的,至少比想当然要好。技术好奇不应该被嘲笑,至少不应该在一开始被忽视。
我不想研究有 Markdown 支持的那个,只想了解一下,这个单贴下面的回复框是怎么实现的,是什么原理?
看样子应该就是个 textarea,就想了解一下,这个如何加的换行,比如我这个回复:我只是换行输入简单的文本,但保存后,再显示出来就自动加上 html 换行标记了。如果有链接也会加上超级链接的格式。
这是怎么实现的呢。。。。
上有人说是输出时处理,我觉得肯定不是这样,即使是处理也应该是保存时处理,毕竟保存时只需要处理一次,而如果是输出时处理,那会处理很多次。肯定是不合适的。
希望大神指点一下!
回复的编辑器没什么难的,写的时候是纯文本,前端也就是个普通的 textarea 框,提交到后端后用 markdown to html 工具转换一下即可。
发布帖子的编辑器的前端是开源方案,上面已经说了是 codeMirror,你可以去看源码,不过编辑器是个天坑,资深程序员都不敢说能摸透,你就别想着往里钻了。实时预览可以前端 js 做也可以提交到后端做,同上,本站的方案也是文本提交到后端做转换,前端只做显示。
至于后端拿到 markdown 文本到 html 怎么转的,开源的工具多到你眼花,任何语言都有几十个以上的轮子。本站大概率也就是随便找个轮子做的。
综上,如果都是开源的东西,那就是搭积木就行了。如果你要写个 codeMirror 或者 markdown to html 工具,那的确是有难度的。可以玩玩,但没必要。
关键是你在 textarea 里输入,每行肯定有换行符,因此你写个循环逐行处理就行了。到这里没问题吧?
然后逐行处理那里,可以用正则替换文本,比如 @ 开头紧接半角英数并以空格结束的,就可以用正则找出来处理一下。再比如以 http 开头以空格结束的,也可以很简单地替换成链接。
你根据这个原理自己写都很容易写出来。另外还可以找一些开源库。
因为:
1. 如果后端保存转换后的 html,那么同时还要保存原始数据,我嫌麻烦。
2. 前端 md 转 html 的轮子很成熟很好用,而且还耗费我后端资源。
3. 对于用户来说,打开一个帖子只处理一次转换,而且只有主贴支持 md,评论不支持 md,完全不影响显示速度。
当然,每次让后端转 md 后再传给前端,也行。或者后端保存转换后的 html,也行。都可以,这不是个需要纠结的地方。
随着产品发展,有很多人提意见了,再改方式也不迟,也很容易改。
后来发觉主问的不是这个,说的是为什么底下这个 textarea 提交后渲染出来有格式,这就一言难尽了……