像 typora 这种原地渲染显示的 markdown 编辑器原理是什么呢，需要用 textarea 写一个简单的，能做到吗
zxCoder · 2021-10-18 08:42:44 +08:00 · 3820 次点击这是一个创建于 1164 天前的主题，其中的信息可能已经有所发展或是发生改变。
有个任务需要写一个超级简单的编辑器，大概就是支持 markdown 的一小部分语法。左边源文本，右边预览这种比较简单，那如果要做到原地渲染显示，需要怎么做呢？完全没有思路
 |
1
jackmod 2021-10-18 08:48:31 +08:00
vscode 的 markdown 插件也可以实时预览，或许可以参考。
|
 |
2
4ark 2021-10-18 08:50:01 +08:00 via iPhone
为什么不用开源的？搜一下 markdown editor
|
 |
3
ihainan 2021-10-18 08:56:30 +08:00
|
 |
4
Panway 2021-10-18 09:20:29 +08:00
Typora 应该是前端渲染的，这类编辑器开源的可太多了：
https://doocs.github.io/md/#/ https://labs.lyric.im/wxformat/ https://github.com/markedjs/marked |
 |
5
myd 2021-10-18 09:25:16 +08:00
contenteditable 属性
|
 |
6
bnm965321 2021-10-18 09:50:20 +08:00
所见即所得是个很大的坑，目前市面上也就 typora 做的比较好。
不过我不太喜欢所见即所得的编辑方式 |
|
7
ihainan 2021-10-18 10:07:28 +08:00
@bnm965321 Typora 对我个人来说最大的痛点是没有网页端，VS 扩展 zaaack's Markdown Editor 配合 Code Server 算是某种程度上解决了这个问题而且体验相对最接近 Typora 的（虽然还是有差距）。
 |
 |
8
ipwx 2021-10-18 10:38:31 +08:00
推荐一波 Milkdown： https://github.com/Saul-Mirone/milkdown
|
 |
9
12tall 2021-10-18 15:03:20 +08:00
我有一个没验证的想法，就是控件监听用户输入存到 localstorage 或者其他地方，然后再从 localstorage 渲染到控件。
|
1 |
12
zqli92 2021-11-09 11:12:22 +08:00
如果你只要左编辑右预览，给你个方案：codemirror 做代码编辑器，markdown-it 或 remark 做渲染，上面说的基本都是这种，很容易做，掘金、腾讯开源的 markdown 编辑器都是这么做的，如果想要所见即所得，类似 word 那种，就是上面说的 milkdown ，这种也非常多，开发难度高一点（因为文档字符流是分离的），可以基于 prosemirror 或者 slatejs 去做，基本 markdown 标记都是有的，官方 demo 直接就是这种了。类似 typora 那种难度比较大，目前在线版本只看到一个： https://markdowner.net ，体验非常接近了，也支持 latex ，表格功能更好用
|
Select Language