什么是Monaco Editor?
微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor就是从这个项目中成长出来的一个web代码编辑器,他们很大一部分的代码(monaco-editor-core)都是共用的,所以monaco和VSCode在编辑代码,交互以及UI上几乎是一摸一样的,有点不同的是,两者的平台不一样,monaco基于浏览器,而VSCode基于electron。
优缺点
这个库的优点就是及其强大的代码提示功能,内置多种编程语言,和vscode统一的UI风格和交互,开发体验很好; 缺点就是这个包实在是太大了.....
在项目中使用
在我开发CatalystEditor的时候,需要用到在线的代码编辑,找了很久web版的代码编辑器,最终被Monaco Editor和VScode一样的UI风格以及强大的代码提示功能所吸引,并且它非常强大,内置了几十种语言并且都带有提示功能,最终我开始使用这个库。
第一次在项目中使用我用了如下import的方式:
使用这种方式引入后发现打包后的文件体积达到了几十M ,并且还没有找到按需引入的方式,无奈之下开始寻找其他的方式,在官网的给的示例中发现了可以使用CDN引入,并且引入的js文件也是压缩后的,如下所示:
其中红框里的是必要的引入文件,蓝色框里的是你需要用到哪种语言就引入哪种语言的mode, 这样就可以按需引入了, 而且对打包也不有什么影响
解决跨域问题
本以为这样引入就完美了,没想到项目启动后代码提示功能全没了,代码的错误校验功能也没了,最中意的功能居然使用不了....打开浏览器的控制台发现报出创建webWorker跨域的警告;经过一番搜索,我发现Monaco Editor这个库的代码提示和错误检查功能会用到内置的词法解析器和语法解析器,而这两个又很耗费性能,所以它采用了开始webWorker来进行处理,而不在主线程中去做,找了很久解决跨域的办法,最终发现官方的github给出了解决方案
其中注册在window上的这个baseURL是关键,看到这个我在vue项目中的main.js中加入了如下这段代码:
这样就可以正常的使用了~~CDN引入的话会将monaco editor的实例挂在window上,此处附上编辑器的使用代码:
最后,如果有需要用到web代码编辑器的,还是强烈推荐尝试下这个库~~