V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Shook
V2EX  ›  JavaScript

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

  •  1
     
  •   Shook · 2019-09-20 17:55:28 +08:00 · 5832 次点击
    这是一个创建于 1880 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    25 条回复    2019-09-21 17:31:36 +08:00
    SEARCHINGFREE
        1
    SEARCHINGFREE  
       2019-09-20 18:00:14 +08:00   ❤️ 1
    首先学下怎么拒接这种需求 desu
    zjsxwc
        2
    zjsxwc  
       2019-09-20 18:16:24 +08:00 via Android
    把用户对 html 文本的点击、输入等行为转化为新 html 文本

    本质上和编译原理没有区别
    airyland
        3
    airyland  
       2019-09-20 18:29:08 +08:00
    其实没多少时间就不要自己开发了,开发了后面也会发现很多问题。开源的编辑器你可以去参考一下代码,里面的坑非常非常多。
    abelmakihara
        4
    abelmakihara  
       2019-09-20 18:31:53 +08:00
    坑 各种各样的问题
    Flands
        5
    Flands  
       2019-09-20 18:35:29 +08:00
    坑巨多,特别是失去焦点后就插入字符之类的
    AlphaTr
        6
    AlphaTr  
       2019-09-20 18:44:08 +08:00
    其实觉得富文本编辑器开发的最大问题是调兼容性和整体架构的设计,功能这些按部就班就行;

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

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

    PS:不是作为学习练手的话,不建议造轮子,现成的 Vue 编辑器也有好几个,在基础上二次开发轻松许多;
    FuryBean
        7
    FuryBean  
       2019-09-20 19:57:03 +08:00
    我在 07 年就写过一个,原生 JavaScript,兼容 IE6。

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

    1. 要定位到造成你问题的根本原因是什么,这个不太难,基本靠 Goolge 和做最小可重现环境就可以做的。
    2. 去 GitHub 找一两个 Star 比较多,代码比较清晰的富文本编辑器。拿着你的问题去这些开源项目中找答案,看看别人是怎么解决你遇到的这个问题。
    3. 需要保持足够的热情,才能让一个想法变成一个作品。
    mamahaha
        8
    mamahaha  
       2019-09-20 20:06:26 +08:00
    初生牛犊不怕苦啊
    rodjl
        9
    rodjl  
       2019-09-20 20:10:02 +08:00 via iPhone
    富文本坑巨多,最好找现成的
    azh7138m
        10
    azh7138m  
       2019-09-20 20:15:22 +08:00
    @FuryBean
    1. undo 和 redo 怎么处理的呢?
    2. 粘贴怎么处理的呢?粘贴如果伴随着数据的格式化,这个时候怎么处理问题 1 呢?
    3. 显示正确的光标位置

    复杂度巨高。。。
    你看稍微有点复杂度的富文本编辑器就会选择用 div 自己模拟一个光标,做完这个就已经是海量工作了
    loading
        11
    loading  
       2019-09-20 20:16:53 +08:00
    见过一个博文,说 wysiwyg 编辑器是非常难的,一个团队都难搞好。
    orzorzorzorz
        12
    orzorzorzorz  
       2019-09-20 20:29:00 +08:00
    我觉着可以在 markdown 的基础上往下做,至少大家都喜欢嘛
    xiangyuecn
        13
    xiangyuecn  
       2019-09-20 20:38:44 +08:00
    控制光标要用到 window.getSelection 和 document.createRange,Range 对象一堆复杂难懂方法。

    我写了一个简单的 markdown 移动端编辑器,压根没有用到 execCommand 方法😂 这个玩意太 tm 复杂了,少用一个 api 少一点烦恼
    xiangyuecn
        14
    xiangyuecn  
       2019-09-20 20:43:18 +08:00
    另外兼容方面的处理,我就简单粗暴了:不去兼容。检测到不支持某个 api 直接降级成 textarea 让他们去玩泥巴😎
    Shook
        15
    Shook  
    OP
       2019-09-20 21:07:16 +08:00
    @AlphaTr 不是工作需要,是副业调研,所以感觉有学习的必要。有什么值得研究的 vue 编辑器推荐,功能简单一些的那种?

    @xiangyuecn 如果页面存在多个编辑器实例,window.getSelection 要如何限制范围呢?具体的就是,编辑框 1 我希望它只能输入文字内容,而编辑框 2 还能调整粗体。
    zhuangzhuang1988
        16
    zhuangzhuang1988  
       2019-09-20 23:04:09 +08:00
    chrome 查看看下 word online 或者 one note 网页版本的结构先
    Terry05
        17
    Terry05  
       2019-09-20 23:14:05 +08:00
    Rich Text 真正是个系统化的产物,相当复杂
    VDimos
        18
    VDimos  
       2019-09-20 23:20:21 +08:00 via Android
    富文本技术难度不是特别大,但是坑巨多
    ChefIsAwesome
        19
    ChefIsAwesome  
       2019-09-20 23:29:53 +08:00 via Android
    编辑器以 MVC 的思路做很困难。因为不同平台上的各种输入法,undo,redo,剪切,粘贴的操作会直接改 DOM,导致你的 model 跟 DOM 匹配不起来。没有 MVC 这类高级抽象,就只能做非常细致的命令式编程,各种细节要处理,难度可想而知。
    我做过基于 react draft-js 的编辑器,中文输入法都花了很长时间才搞定。
    xiangyuecn
        20
    xiangyuecn  
       2019-09-20 23:30:32 +08:00
    #15 全局有且仅有一个 Selection 焦点,每个编辑器可以拥有无数个 Range,调整内容和格式并不需要用到 Selection,只需操作自己的 range 就可以了,只有接受用户输入时才会用到 getSelection 设置焦点
    wunonglin
        21
    wunonglin  
       2019-09-20 23:35:14 +08:00
    直接参考 icloud 备忘录吧,换种思路能让你跳出这个坑
    rabbbit
        22
    rabbbit  
       2019-09-20 23:58:39 +08:00
    learnshare
        23
    learnshare  
       2019-09-21 00:04:11 +08:00   ❤️ 1
    没两三年,做不出好用的东西
    https://www.zhihu.com/question/38699645
    starsriver
        24
    starsriver  
       2019-09-21 08:52:14 +08:00 via Android
    百度做的编辑器改改就行。动辄几万行的代码不是一个人几天就能搞完的。而且兼容性很麻烦,现有的所见即所得实在是难用,大家都 md 了。富文本不光是编辑还要独立写各种各样的模块,图片视频上传,表格,插件。
    AlphaTr
        25
    AlphaTr  
       2019-09-21 17:31:36 +08:00
    @Shook #15 可以看看 tiptap
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4210 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 05:26 · PVG 13:26 · LAX 21:26 · JFK 00:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.