一、monaco-editor基本使用

以vue2项目为例

安装依赖

npm i monaco-editor
npm i monaco-editor-webpack-plugin

配置vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {configureWebpack: {plugins: [new MonacoWebpackPlugin()]}
}

使用monaco-editor前，需要先准备一个容器来挂载monaco-editor实例

<div id="monacoEditorContainer" style="height:300px;"></div>

创建monaco-editor实例
使用monaco.editor.create方法创建monaco-editor实例，create方法的第一个参数接收一个dom元素，第二个参数可选，接收一个IStandaloneEditorConstructionOptions配置对象

关于IStandaloneEditorConstructionOptions的信息可查阅 monaco-editor api文档

例如：

<script>
import * as monaco from 'monaco-editor'export default {data() {return {standaloneEditorConstructionOptions: {value: '', // 编辑器的值language: 'javascript', //语言theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-darkautoIndent: true, // 自动缩进readOnly: false, // 是否只读}}},mounted() {this.createMonacoEditor()},methods: {createMonacoEditor() {const container = document.getElementById('monacoEditorContainer')this.monacoEditor = monaco.editor.create(container, this.standaloneEditorConstructionOptions)}}
}
</script>

完整代码

<template><div><div id="monacoEditorContainer" style="height:300px;"></div></div>
</template><script>
import * as monaco from 'monaco-editor'export default {data() {return {standaloneEditorConstructionOptions: {value: '', // 编辑器的值language: 'javascript', //语言theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-darkautoIndent: true, // 自动缩进readOnly: false, // 是否只读}}},mounted() {this.createMonacoEditor()},methods: {createMonacoEditor() {const container = document.getElementById('monacoEditorContainer')this.monacoEditor = monaco.editor.create(container, this.standaloneEditorConstructionOptions)}}
}
</script><style scoped lang="less">
</style>

二、monaco-editor封装成vue组件

my-monaco-editor.vue

<!--
my-monaco-editor:
基于monaco-editor封装的vue组件，支持尺寸、配置的响应式
--><template><div :style="{height, width}" class="my-monaco-editor"></div>
</template><script>
import * as monaco from 'monaco-editor'export default {props: {options: {type: Object,default: () => {}},height: {type: String,default: '300px'},width: {type: String,default: '100%'},code: {type: String,default: ''}},data() {return {defaultOptions: {value: this.code, // 编辑器的值language: 'javascript', //语言theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-darkautoIndent: true, // 自动缩进readOnly: false, // 是否只读}}},computed: {standaloneEditorConstructionOptions() {return Object.assign(this.defaultOptions, this.options)}},methods: {createMonacoEditor() {this.monacoEditor = monaco.editor.create(this.$el, this.standaloneEditorConstructionOptions)this.monacoEditor.onDidChangeModelContent(event => {this.$emit('update:code', this.monacoEditor.getValue())})},reSize() {this.$nextTick(() => {this.monacoEditor.layout()})}},mounted() {this.createMonacoEditor()},watch: {height() {this.reSize()},width() {this.reSize()},options: {handler() {this.$nextTick(() => {this.monacoEditor.updateOptions(this.standaloneEditorConstructionOptions)})},deep: true}}
}
</script><style lang="less" scoped>
</style>

使用my-monaco-editor

<template><div class="monaco-editor-view"><!--演示尺寸响应式--><el-form><el-form-item label="height"><el-input v-model="inputHeight" @change="val => height = val"></el-input></el-form-item><el-form-item label="width"><el-input v-model="inputWidth" @change="val => width = val"></el-input></el-form-item></el-form><my-monaco-editor :code.sync="code" :height="height" :options="options" :width="width"></my-monaco-editor></div>
</template><script>
import MyMonacoEditor from '@/components/my-monaco-editor'export default {components: {MyMonacoEditor},data() {return {code: 'ok',inputHeight: '',inputWidth: '',height: '100px',width: '500px',options: {}}},created() {this.inputHeight = this.heightthis.inputWidth = this.widthsetTimeout(() => {//演示配置响应式this.changeOptions()}, 2000)},methods: {changeOptions() {this.$set(this.options, 'fontSize', 40)}}
}
</script><style lang="less" scoped>
</style>

monaco-editor基本使用以及monaco-editor封装成vue组件相关推荐

如何封装一个vue组件（获取手机验证码的组件）
如何封装一个vue组件(获取手机验证码的组件) 定义一个名为 item-time 的新组件,这是获取手机验证码的组件 Vue.component('item-time', {props: ['maxt ...
Vue使用wangEditor 封装成独立组件实现富文本编辑器
1.使用npm安装: npm install wangeditor 2.将编辑器封装一个组件,创建editor.vue组件: <template><div id="edit ...
把Fusioncharts封装成Ext组件的思路及实现
Fusioncharts和Ext都是强大的前台展现技术,虽然可以一起使用,但总感觉很别扭. 一般的做法是先new Fusioncharts()创建一个图,并且使用render()渲染到一个div里然 ...
把Fusioncharts封装成Ext组件的思路
Fusioncharts和Ext都是强大的前台展现技术,虽然可以一起使用,但总感觉很别扭. 一般的做法是先new Fusioncharts()创建一个图,并且使用render()渲染到一个div里然 ...
android 按钮点击动画效果_如何用纯css打造类materialUI的按钮点击动画并封装成react组件...
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vu ...
vue 封装dialog_element-dialog封装成子组件
移除 {{Edit}} import UserEditfrom "./UserEdit-dialog.vue"; import updatefrom './Update.vue'e ...
pHp封装成vue,vue.js生成条形码的方法
本文主要和大家分享vue.js生成条形码的方法,主要以代码的形式和大家分享,希望能帮助到大家. 1.下载插件npm install @xkeshi/vue-barcode //下载条形码插件 2.在m ...
vue中怎样实现弹出层动画效果？由上而下渐渐显示---封装成复用组件
子组件: <template><div class="home"><!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --& ...
封装element分页组件
项目场景: 将 element-ui 中分页封装成公共组件描述: admin后台中会有很多的表格以及分页的应用,所以考虑将分页分装成公共组件  < ...

monaco-editor基本使用以及monaco-editor封装成vue组件

文章目录

一、monaco-editor基本使用

二、monaco-editor封装成vue组件

monaco-editor基本使用以及monaco-editor封装成vue组件相关推荐

最新文章

热门文章