前言

wangEditor v4 发布已经几个月了，这期间有同学提出源码编辑的功能，但是 wang 的作者最近回复，由于各种考量，暂时不支持这个功能（#2299）。因此我尝试着将这个功能写成一个扩展库，然后我们来看下效果：

源码编辑是依赖 Monaco Editor 实现的

一：方案选择

弃用。想法很美好，奈何打包失败。

弃用。postMessage通信耗时太长，体验差。

直接将 monaco 实例挂载在 iframe 的 window 对象上，然后在父窗口直接拿取到该实例进行操作

这段代码将通过 document.write api 写入 iframe 文档中

monaco editor 的案例请见 monaco-editor-samples

在扩展菜单初始化时我们需要完成以下操作

扩展菜单的代码

这段静态HTML改自最开始的 Monaco Editor 示例

值得注意的是，monaco 的加载是在初次打开源码编辑功能时，这样的好处是避免不必要的资源加载，缺点是首次使用源码功能会有一定的迟钝感。

并且加载成功后对控制器的 open 方法进行了重写，这样可以去掉不必要的判断（判断 monaco 是否已初始化）。

控制器：打开 Monaco 编辑器

控制器：保存数据

控制器：退出源码编辑状态

控制器：完整代码

由于此扩展菜单的特殊性，无法单独使用 BtnMenu 或 DropListMenu 实现，我这里采用了 BtnMenu + DropList 的形式进行实现的。

这也意味着我需要对 BtnMenu 进行一些特殊改造来实现在源码编辑器打开状态下，dropList 悬浮才进行显示的效果。

BtnMenu 和 DropListMenu 底层源码对比图。更多详情请看项目源码

自定义 dropList 的最终实现

https://github.com/clinfc/wangEditor-extension-sound-code