一步一步解析wangEditor4源码

wangEditor版本4

Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费github传送门

1. 找到入口文件src/wangEditor.ts

解析：可以看出来入口文件很精简，可以明确的了解到wangEidtor所需要的一些文件

• 1.样式文件less
• 2.wangeditor的类文件import Editor from './editor/index'
• 3.polyfill一些功能兼容的文件import './utils/polyfill'
• 4.初始化的一些可以扩展及配置的菜单基础类export * from './menus/menu-constructors/index'

2. 打开src/utils/polyfill

解析：就针对一下两个功能点做了兼容，注释也写的很清楚：

• 1. 针对matches方法的兼容实现
• 2. 针对IE11的Promise兼容

3. 重头戏src/editor/index.ts

这个文件才是编辑器的核心入口

首先是构造函数

这个构造函数有两个参数

• toolbarSelector -- 必须 -- 编辑器工具栏的选择器
• textSelector -- 可选 -- 编辑器内容的选择器

解析：此函数针对编辑器需要的功能及属性配置进行初始化，功能见图

其他的都是暴露给用户使用的api

4. 选区api封装src/editor/selection.ts

5. execCommand命令封装src/editor/command.ts

6. 初始化编辑区域src/text/index.ts

另外还有些api是私有的，就不介绍了， 有兴趣可以自行查阅其功能

还有这里有个功能值得一提，就是事件委托的全局管理，拿了一部分代码：

// 键盘 down 时的 hooks
$textElem.on('keydown', (e: KeyboardEvent) => {
    const keydownEvents = eventHooks.keydownEvents
    keydownEvents.forEach(fn => fn(e))
})

这里将编辑区域的keydown事件都放在了keydownEvents的数组里，然后循环执行，已到达全局管理，非常的优雅。

7. 菜单初始化src/menus/index.ts

8. 全局zIndex管理src/editor/z-index/index.ts

这个文件就是针对编辑器所有用到的样式zIndex的统一管理

9. 监听编辑器内容改变的实现src/editor/change/index.ts

它继承了Mutation, 我们跟随着打开封装Mutation的文件src/utils/observer/mutation.ts

soga, 原来是用了原生的MutationObserver API

Web API官方使用的example

// 选择需要观察变动的节点
const targetNode = document.getElementById('some-id');

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();

总体来说就是一个监听dom树结构发生变化的事件API，看到这里就豁然开朗了，用法就按照例子来，不介绍了。

10. 撤销和恢复功能src/editor/history/index.ts

看看具体实现，构造代码：

一上来就是三个缓存

• 1. 内容缓存
• 2. 滚动scrollTop缓存
• 3. 选区缓存