做一个 js 富文本编辑器，需要学习哪些知识点？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1922 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

编辑器

文本

知识点

document

25 条回复 • 2019-09-21 17:31:36 +08:00

SEARCHINGFREE

2019-09-20 18:00:14 +08:00

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

zjsxwc

2019-09-20 18:16:24 +08:00 via Android

把用户对 html 文本的点击、输入等行为转化为新 html 文本

本质上和编译原理没有区别

airyland

2019-09-20 18:29:08 +08:00

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

abelmakihara

2019-09-20 18:31:53 +08:00

坑各种各样的问题

Flands

2019-09-20 18:35:29 +08:00

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

AlphaTr

2019-09-20 18:44:08 +08:00

其实觉得富文本编辑器开发的最大问题是调兼容性和整体架构的设计，功能这些按部就班就行；

回答 1：富文本编辑器开发确实资料比较少；觉得最简单的方式就是看别人的开源代码；

回答 2：问题太泛了，感觉应该是页面上存在多个编辑器实例，整体设计的时候就得考虑多实例的情况处理；

PS：不是作为学习练手的话，不建议造轮子，现成的 Vue 编辑器也有好几个，在基础上二次开发轻松许多；

FuryBean

2019-09-20 19:57:03 +08:00

我在 07 年就写过一个，原生 JavaScript，兼容 IE6。

时间太久远了，技术细节记不清了，就回答下如何解决实现过程中的困难点吧：

1. 要定位到造成你问题的根本原因是什么，这个不太难，基本靠 Goolge 和做最小可重现环境就可以做的。
2. 去 GitHub 找一两个 Star 比较多，代码比较清晰的富文本编辑器。拿着你的问题去这些开源项目中找答案，看看别人是怎么解决你遇到的这个问题。
3. 需要保持足够的热情，才能让一个想法变成一个作品。

mamahaha

2019-09-20 20:06:26 +08:00

初生牛犊不怕苦啊

rodjl

2019-09-20 20:10:02 +08:00 via iPhone

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

azh7138m

2019-09-20 20:15:22 +08:00

@FuryBean
1. undo 和 redo 怎么处理的呢？
2. 粘贴怎么处理的呢？粘贴如果伴随着数据的格式化，这个时候怎么处理问题 1 呢？
3. 显示正确的光标位置

复杂度巨高。。。
你看稍微有点复杂度的富文本编辑器就会选择用 div 自己模拟一个光标，做完这个就已经是海量工作了

loading

2019-09-20 20:16:53 +08:00

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

orzorzorzorz

2019-09-20 20:29:00 +08:00

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

xiangyuecn

2019-09-20 20:38:44 +08:00

控制光标要用到 window.getSelection 和 document.createRange，Range 对象一堆复杂难懂方法。

我写了一个简单的 markdown 移动端编辑器，压根没有用到 execCommand 方法😂 这个玩意太 tm 复杂了，少用一个 api 少一点烦恼

xiangyuecn

2019-09-20 20:43:18 +08:00

另外兼容方面的处理，我就简单粗暴了：不去兼容。检测到不支持某个 api 直接降级成 textarea 让他们去玩泥巴😎

Shook

2019-09-20 21:07:16 +08:00

@AlphaTr 不是工作需要，是副业调研，所以感觉有学习的必要。有什么值得研究的 vue 编辑器推荐，功能简单一些的那种？

@xiangyuecn 如果页面存在多个编辑器实例，window.getSelection 要如何限制范围呢？具体的就是，编辑框 1 我希望它只能输入文字内容，而编辑框 2 还能调整粗体。

zhuangzhuang1988

2019-09-20 23:04:09 +08:00

chrome 查看看下 word online 或者 one note 网页版本的结构先

Terry05

2019-09-20 23:14:05 +08:00

Rich Text 真正是个系统化的产物，相当复杂

VDimos

2019-09-20 23:20:21 +08:00 via Android

富文本技术难度不是特别大，但是坑巨多

ChefIsAwesome

2019-09-20 23:29:53 +08:00 via Android

编辑器以 MVC 的思路做很困难。因为不同平台上的各种输入法，undo，redo，剪切，粘贴的操作会直接改 DOM，导致你的 model 跟 DOM 匹配不起来。没有 MVC 这类高级抽象，就只能做非常细致的命令式编程，各种细节要处理，难度可想而知。
我做过基于 react draft-js 的编辑器，中文输入法都花了很长时间才搞定。

xiangyuecn

2019-09-20 23:30:32 +08:00

#15 全局有且仅有一个 Selection 焦点，每个编辑器可以拥有无数个 Range，调整内容和格式并不需要用到 Selection，只需操作自己的 range 就可以了，只有接受用户输入时才会用到 getSelection 设置焦点