前言

最近接手了一个新项目，这个项目中有一个需求点就是需要展示json，并且可能还要编辑展示代码，然后我就去调研了关于代码编辑器的有关技术，经过对比决定使用monaco-editor。

提示：以下是本篇文章正文内容，下面案例可供参考

一、monaco-editor是什么？

monaco-editor一款代码编辑器，是微软开源的一个web编辑器，vscode中也是集成它来实现的，所以我们可以通过monaco-editor在我们的网页中集成一个vscode出来，好的废话不多说，直接开干。

二、使用步骤

1.安装依赖

yarn add monaco-editor 或 npm i monaco-editor

2.编写组件

我的代码如下：

<div ref="json-editor-code" class="json-editor"></div>

@Component
export default class JsonCodeEditor extends Vue {@Prop({ default: () => {} }) private data!: any@Prop({ default: () => {} }) private opt?: anyprivate editor: any;private monaco: any= monaco;private options: any =  {language: 'json', // 这里你可以自己写语言。我是写死了。automaticLayout: true,tabSize: 2,overviewRulerBorder: false,scrollBeyondLastLine: false,minimap: {enabled: false // 不要小地图},theme: 'vs',fontSize: "14px",autoIndent:true,//自动布局}@Watch('data', { deep: true })private activeChange(val: any) {let current: any = this.jsonValidator(this.editor.getValue())if (current && !isEqual(val, current)) {this.editor.setValue(JSON.stringify(val))this.format()}}// json格式检查private jsonValidator(val: string) {let parsedValuetry {parsedValue = JSON.parse(val)return parsedValue} catch (e) {return false}}private mounted() {this.initEditor()setTimeout(()=>{this.format()},100)}private initEditor() {let container = (this.$refs['json-editor-code'] as HTMLElement);this.editor = this.monaco.editor.create(container, {value: JSON.stringify(this.data),//编辑器初始显示文字...Object.assign(this.options, this.opt),scrollbar: {horizontal: 'hidden',}})this.editor.onDidChangeModelContent(() => {this.$emit('code-change', this.jsonValidator(this.editor.getValue()), this.editor, this.monaco)})}private destroyed() {this.editor?.dispose()}private format() {this.editor.getAction('editor.action.formatDocument').run()}
}

自此我们就完成一个编辑器组件的一次简单封装。

3.自定义提示

如果我们想要自定义代码提示，并且还能自定义提示警告那该怎么办呢？
其实官方给我们提供了一个演示的demo，但是我没有直接跑出来，经过我的摸索也算是实现了，附上schema规则书写文档和一个能在线生成规则的网站。接下来请看，假设规则如下:

const domain = '127.0.0.1'
const validators = [{ name: 'button',uri: domain + 'schemas/base/button.json#',schema: {type: 'object',//...}},{ name: 'input',uri: domain + 'schemas/base/input.json#',schema: {type: 'object',//...}}
]

那么我们封装一个函数用于获取规则

  private getRule(type) {return validators.find((vd: any) => vd.name === type);}private switchRules(val: any) {let ruleArray = getRule(val.type)ruleArray = Object.assign(cloneDeep(ruleArray), { fileMatch: ['*'] }) // 这里不可少
this.monaco.languages.json.jsonDefaults.setDiagnosticsOptions({validate: true,schemas: cloneDeep(ruleArray)})}

获取规则的函数我们有了以后，只需要在数据改变的时候调用这个方法即可更新成匹配当前数据的规则了。

  @Watch('data', { deep: true })private activeChange(val: any) {let current: any = this.jsonValidator(this.editor.getValue())if (current && !isEqual(val, current)) {this.switchRules(val) // 这样就更新了规则this.editor.setValue(JSON.stringify(val))this.format()}}

总结

monaco还是有缺陷的，比如你的规则会被多个monaco-editor实例共享，不过只要你手动去除就好了，这点也还是能接收。希望这篇文章能够帮助到你。喜欢的话记得一键三连。

Vue + monaco-editor相关推荐

monaco editor + vue的配置
monaco editor是vscode的御用编辑器. 功能非常强大,使用方便轻巧,对js\ts等等语言支持都良好,能方便的扩展以支持其他语言或者自定义的特性. 夸了这么多,这里只说它一个问题: 这货 ...
Vue项目管理器中安装及使用Monaco Editor
Vue项目管理器中安装及使用Monaco Editor 记录项目开发中遇到的难题. 部分代码参考自鹰子大佬的: Monaco Editor安装及使用 1.安装 (1)安装插件搜索安装monaco插 ...
Vue中使用Monaco Editor代码编辑器
一.安装依赖 npm install editor@1.0.0 npm install monaco-editor@0.19.3 npm install monaco-editor-webpack-p ...
vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...
Monaco Editor (vite/webpack + ts + vue项目使用)
1.什么是Monaco Editor?Monaco Editor 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(就是从这个项目中成 ...
Monaco Editor结合Vue搭建好用的json格式化网站
Monaco Editor github地址安装 > npm install monaco-editor 然后导入monaco import * as monaco from "mo ...
linux终端怎么设置monaco,Monaco Editor 使用指南
为什么要写这篇文章? 最近开发了一个简单的在线代码编辑器,基于 Monaco Editor 实现,没有了解过 Monaco 的人可能不知道,我们常用的 VS Code 也是基于它实现的~ 回到正题,M ...
在线代码编辑器：Monaco Editor
monaco editor是微软开源的一款web版代码编辑器.它支持智能提示,代码高亮,代码格式化. Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代 ...
代码编辑器之monaco editor
MonacoEditor编辑器 (一)简介底层vscode开发的一款编辑器,各方面的样式功能基本与vscode一致. (二)官方文档 Monaco Editor (microsoft.github. ...
手把手教你实现在Monaco Editor中使用VSCode主题
背景笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持 ...

Vue + monaco-editor

文章目录

前言