在vue项目中使用monaco-editor

Posted xhappyness

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue项目中使用monaco-editor相关的知识,希望对你有一定的参考价值。

monaco-editor: https://github.com/Microsoft/monaco-editor

在ESM中的使用官方也有对应文档:https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md

现基于vue-cli2的项目做具体步骤说明:

1. 安装:

cnpm install monaco-editor --save

cnpm install monaco-editor-webpack-plugin --save-dev

 

2. 修改webpack.base.conf.js配置文件

const MonacoWebpackPlugin = require(‘monaco-editor-webpack-plugin‘);
...

module.exports = {
  ...
  plugins: [
    ...
    new MonacoWebpackPlugin()
  ]
};

 

3. 在对应的组件中使用

.vue

<template>
  <div>
     <div id="container" ></div>
  </div>
</template>

.ts

import { Vue, Component, Watch } from "vue-property-decorator"
import * as monaco from ‘monaco-editor‘;

@Component({

})

export default class Parent extends Vue {
    ...
    value = ‘初始sql语句‘;
monacoEditor; mounted() {
this.monacoEditor = monaco.editor.create(document.getElementById(‘container‘), { value: this.value, language: ‘sql‘ }); } }

注意:要等container渲染成功才能monaco.editor.create

 

-------------------------------------------------------------------------------------------- 其他问题 -----------------------------------------------------------------------------------------

 

1. 怎么用代码方式改变this.monacoEditor的value值?

答: this.monacoEditor.setValue(newValue);


以上是关于在vue项目中使用monaco-editor的主要内容,如果未能解决你的问题,请参考以下文章

vue monaco-editor 文本对比编辑

使用 webpack 在 monaco-editor 包中构建字体文件

monaco-editor使用

monoproxy不好用

使用 webpack 导入 monaco-editor 时找不到依赖项

微软开源代码编辑器monaco-editor