如何实现文本编辑器？

vue 的富文本编辑器方案太少了，可选的不多，react 实现比较灵活方便，1万用户后开源见源码

文本编辑器很难做。在我看来，难的根源在于光标：无法确定光标目前选择的是什么东西，基于此而需要大量分类讨论。

进一步的根源在于：文本编辑器中的内容是多层的，而不是一层。

因此，当初我制作论坛时，我的想法是：让文本编辑器是一层的。文本编辑器中只能输入普通文本，但是可以给文本加标记，例如：

这里是<b>正文</b>

同时，网页分为左右两侧，左侧输入文本、右侧显示文本的效果。这样，上面那句话就会在右侧显示为【普通的“这里是”与加粗的“正文”】。

然后，发布文章的时候，把原文发到后台。显示文章的时候，把原文数据以HTML格式显示；修改文章时，把原文数据以普通文本格式显示。

（我当时制作论坛的背景是：我有几个网友，我们喜欢写文章交流，但word文档用不习惯、且各个文档之间是割裂的。于是我制作了一个小型论坛、只限我们几个交流。）

（事实上hackertalk的文本编辑器也有bug，比如加粗时如果选中了【一段普通的话】以及【一段加粗的话的部分】，那么就无法像word文档那样正确的处理加粗。）

我猜，hackertalk的文本编辑器逻辑大概是这样的：

如果点击加粗按钮或者代码框按钮：
    获取光标的位置。
    在光标的两侧加上某标记。（不同按钮标记不同。）
    （重新）显示编辑器内容。
定义【显示编辑器内容】：
    处理标记，把标记转化为html标记。
    把转化后的文本以html格式显示。可编辑。
如果点击发布：
    将带标记的文本发到后台。
如果他人访问帖子：
    从后台读取带标记的文本。
    处理标记后。
    以HTML格式显示。不可编辑。

hackertalk的插入图片，逻辑大概是先上传图片到后台、后台返回图片路径，然后编辑器中用img标签、以该路径来显示图片。

数学公式、表格，这个我就不清楚了。我当初也一直想弄数学公式，但是最后放弃了，改为【使用word文档编辑公式，然后截图、在网页中以图片的形式加入文章】。hackertalk对数学公式的需求不高，没必要费大力加入这个功能，因此我猜也许hackertalk使用了某个他人制作的工具、那个工具自带数学公式编辑器。

有很多第三方开源的富文本编辑器，比如TinyMCE、CKEditor、wangEditor

react