@amoayun/monaco-editor-vue3开源项目

我要开发同款
proginn20452803272026年11月03日
3阅读

技术信息

语言技术
JavaScript、Vue、TypeScript、Node.js
系统类型
Web
行业分类
开发工具
开源地址
https://github.com/shangguanjunwei/homepage.git
授权协议
MIT许可

功能介绍

基于 Microsoft monaco-editor 封装的 Vue 3 代码编辑器组件,开箱即用,重点解决「代码编辑」和「代码比对」两类常见场景。
核心功能:
双模式:base(普通代码编辑)与 diff(左右对照的代码比对),一个组件切换。
双向绑定:base 用 v-model;diff 用 v-model:originalData + v-model:modifiedData。
多主题:vs、vs-dark、hc-black、hc-light。
多语言高亮与补全:JSON、CSS/SCSS/LESS、HTML、TS/JS 等,并可传入 diySuggest 自定义代码提示项(label / kind / insertText / detail / documentation)。
实用细节:insertText() 方法插入文本、@select 事件实时回调选中内容、placeholder、disabled(diff 模式下左右可分别禁用)。
配置收敛:通过 config 统一收口 wordWrap、lineNumbers、autoClosingBrackets、cursorBlinking 等常用 Monaco 选项,默认值已调好(如关闭右键菜单、关闭超出末行滚动、automaticLayout 开启)。
消除副作用:处理了 monaco-editor 常见的样式/实例副作用问题。

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论