山地人

打造你的Web编辑器

山地人
山地人
2021-05-11

昨天上线了在线Web编辑器,有小伙伴对在线编辑的实现原理感到好奇。这一篇,我们就来分析下在线Web编辑器

思路分析

通过观察,你会发现左侧是一个Web编辑器,右侧是一个内嵌浏览器,点击运行按钮后,Web编辑器中的代码会在内嵌浏览器中运行。

接下来,我们拆解下整个过程里涉及到的几个关键组件:

Web编辑器

首先来说下左侧的Web编辑器部分,这一块其实现在可用的开源组件很多。而我们需要做的就是选择一款适合自己项目的,然后用到产品中。

这里推荐两款开源编辑器组件。

开源组件说明查看
Monaco EditorVSCode同款内核,适合处理大文件前往查看
CodeMirror核心文件体积小,适合处理小体积文件前往查看

下面我们以CodeMirror作为例子,来看下如何安装和使用CodeMirror。

这里我只配置了javascript语言的支持,当然你可以修改编辑器中的代码,添加其他语言的支持。 然后在main.js中将对应的mode字段改成你要使用的语言模式

编辑器端,我们需要能够进行内容的写入和读取就可以了,下面我们再来看看浏览器端。

浏览器组件

内嵌浏览器,自然会想到要用iframe,下面的例子展示了如何结合使用iframeBlob来动态渲染内容。

你可以点击模拟器右上角的模式按钮,切换到编辑状态来阅读实现的具体细节,代码已经为你注释好,应该不难理解。

整合文本编辑器和浏览器

最后,我们要做的是将这两个组件合而为一。让编辑器里的内容可以方便得送入浏览器组中进行渲染。

  • 整合的过程中,我们用到了CodeMirrorhtmlmixed模式,这个模式需要引入几个额外的script脚本。
  • 为了让编辑器和模拟浏览器对接,在CodeMirror实例myCodeMirror上注册了change事件。

这样我们就获得了一个支持HTML,CSS,JavaScript混合模式的在线编辑器。

只要我们改动编辑器内的代码,浏览器就会实时刷新内容。

至此,我们完成了一个属于我们自己的带预览功能的在线Web编辑器。