浅显的Monaco Editor 与codemirror 选型

Monaco Editorcodemirror
支持语言支持Java,JavaScript,sql,vb,c,c++,python等多种语言(30+)HTML、XHTML、XML、CSS、Python、PHP、c#、Java (130+)
支持浏览器IE8+, Firefox4+, Chrome,IE8+, Firefox4+, Chrome,Safari3+,Opera9+
最新更新2017/4/20,开源2017/3/3,开源
功能代码着色/高亮
主题
代码提示/自动补全
搜索和替换
自动缩进
行数显示
代码对比diff
快捷键
代码检查lint
resize自适应
外观/交互支持多款主题和部件
基础UI较为简单
vscode风格
风格统一交互友好
文档/demo官网详细的api文档
demo单页展示
API文档
可配置demo
功能样例+代码
已知场景vsCode编码器,阿里云开发平台leetcode
性能会快一些codemirror的用户会多一些,生态环境相对健全,所以插件也相对完备,能想到的基本都有,同时也被很多线上应用在用。
功能基本都完备,
CodeMirror适合支持扩展性要求高的定制型编辑器,但其多文件的引入方式带来一定的管理不方便以及浏览器端的网络性能影响。
monaco集成度最高,引入文件量巨大,引入方式兼容性不太好,但功能实现完备,不需另外的扩展引入,适合需要实现复杂功能但不进行深度扩展的应用,不支持mobile且文件量大

CodeMirror是一个用于在网页中创建和编辑代码的JavaScript库。它提供了丰富的功能和灵活的配置选项,可以适用于各种编程语言CodeMirror的官方文档可以在中找到。在参考文档中,可以找到有关如何配置CodeMirror编辑器的信息。 在Vue 3中使用CodeMirror编辑器,可以通过安装codemirror-editor-vue3包来实现。该包是一个Vue 3的封装组件,可以方便地在Vue项目中使用CodeMirror编辑器。你可以在中找到该项目的详细信息和使用说明。 使用codemirror-editor-vue3的步骤如下: 1. 在Vue项目中安装codemirror-editor-vue3包。 2. 在需要使用CodeMirror编辑器的组件中引入codemirror-editor-vue3组件。 3. 在该组件的模板中使用codemirror-editor-vue3组件,并设置相应的props和事件处理函数。 4. 在组件的script部分,可以通过import语句引入需要使用的编程语言的js文件,例如如果需要使用Python语言,可以引入"codemirror/mode/python/python.js"。 5. 在CodeMirror编辑器的配置选项中,设置mode为相应的编程语言模式,例如对于Python语言,可以设置mode为"text/x-python"。 6. 根据项目需要,可以设置其他的CodeMirror编辑器配置选项,如主题、自动补全等。 请注意,使用codemirror-editor-vue3之前,确保已经安装了Vue 3和CodeMirror库,并按照官方文档进行了配置和使用。 参考资料: CodeMirror官方文档:https://codemirror.net/5/mode/index.html codemirror-editor-vue3项目信息和使用说明
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Embrace924

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值