技术解析

做一个 js 富文本编辑器,需要学习哪些知识点?
0
2021-08-26 01:33:17
idczone

我已清楚使用 document.execCommand 能够实现很多编辑器需要的效果。 但我在试图将编辑器封装成一个.vue 组件,发现 v-model 会使编辑框的光标会跑回到头一位。 可能是我搜索方法不当,但我没找到太多关于做富文本编辑器的知识,我需要学习什么才能解决这个问题?

还有个问题是,如何让 execCommand 方法的应用范围限制在某个标签呢?比如在页面内有几个编辑框,它们允许的操作各不相同,有的能够进行粗体操作而有的不行。


首先学下怎么拒接这种需求 desu

把用户对 html 文本的点击、输入等行为转化为新 html 文本
本质上和编译原理没有区别

其实没多少时间就不要自己开发了,开发了后面也会发现很多问题。开源的编辑器你可以去参考一下代码,里面的坑非常非常多。

坑 各种各样的问题

坑巨多,特别是失去焦点后就插入字符之类的

其实觉得富文本编辑器开发的最大问题是调兼容性和整体架构的设计,功能这些按部就班就行;
回答 1:富文本编辑器开发确实资料比较少;觉得最简单的方式就是看别人的开源代码;
回答 2:问题太泛了,感觉应该是页面上存在多个编辑器实例,整体设计的时候就得考虑多实例的情况处理;
PS:不是作为学习练手的话,不建议造轮子,现成的 Vue 编辑器也有好几个,在基础上二次开发轻松许多;

我在 07 年就写过一个,原生 JavaScript,兼容 IE6。
时间太久远了,技术细节记不清了,就回答下如何解决实现过程中的困难点吧:
1. 要定位到造成你问题的根本原因是什么,这个不太难,基本靠 Goolge 和做最小可重现环境就可以做的。
2. 去 GitHub 找一两个 Star 比较多,代码比较清晰的富文本编辑器。拿着你的问题去这些开源项目中找答案,看看别人是怎么解决你遇到的这个问题。
3. 需要保持足够的热情,才能让一个想法变成一个作品。

初生牛犊不怕苦啊

富文本坑巨多,最好找现成的


1. undo 和 redo 怎么处理的呢?
2. 粘贴怎么处理的呢?粘贴如果伴随着数据的格式化,这个时候怎么处理问题 1 呢?
3. 显示正确的光标位置
复杂度巨高。。。
你看稍微有点复杂度的富文本编辑器就会选择用 div 自己模拟一个光标,做完这个就已经是海量工作了

见过一个博文,说 wysiwyg 编辑器是非常难的,一个团队都难搞好。

我觉着可以在 markdown 的基础上往下做,至少大家都喜欢嘛

控制光标要用到 window.getSelection 和 document.createRange,Range 对象一堆复杂难懂方法。
我写了一个简单的 markdown 移动端编辑器,压根没有用到 execCommand 方法
数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服