如何实现文本编辑器?

哪位大佬指点一下,前后端分离(java + vue)下,如何实现类似本网站这种编辑器? astonished

vuejs·java
227 views
Comments
登录后评论
Sign In
·

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

·

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

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

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

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

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

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

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

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

我猜,hackertalk的文本编辑器逻辑大概是这样的:

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

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

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

·

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

·

react