vue下使用Monaco Editor

最新推荐文章于 2024-06-26 10:17:01 发布

置顶

极致而简

最新推荐文章于 2024-06-26 10:17:01 发布

阅读量1.4w

点赞数 8

分类专栏：工具文章标签： vue

本文链接：https://blog.csdn.net/qq_30849965/article/details/109028974

版权

本文档介绍了如何在Vue项目中使用Monaco Editor，包括安装环境、配置文件修改以及进阶功能如文件改动状态监测、语言切换、编辑器事件触发等。

摘要由CSDN通过智能技术生成

vue下使用Monaco Editor

1.简介

Monaco Editor是为VS Code提供支持的代码编辑器。描述代码编辑器的功能，良好的网页是在这里。它已获得MIT许可，并支持Classic Edge，Edge，Chrome，Firefox，Safari和Opera。移动浏览器或移动Web框架不支持Monaco编辑器（但移动的有的浏览器是支持的，起码我用的几个都支持）。

2.开始

2.1 安装环境

npm install monaco-editor@0.21.2 --save

npm install monaco-editor-webpack-plugin --save //这个必须安装，不然起不来

2.2 配置文件

修改webpack.base.conf.js配置文件。(前几步借鉴时间脱臼大神博客，步骤大同小异)

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

2.3 开始使用

新建vue文件，添加如下代码即可使用

<div id="container"></div> <!--宽高自行设定 -->

import * as monaco from 'monaco-editor'
export default{
   
    data(){
   
        return {
   
            editor:null,//文本编辑器
        }
    },
    mounted(){
   
      this.initEditor();  
    },
    methods:{
   
        initEditor(){
   
            // 初始化编辑器，确保dom已经渲染
            this.editor = monaco.editor.create(document.getElementById('container'), {
   
                value：'',//编辑器初始显示文字
                language:'sql',//语言支持自行查阅demo
                automaticLayout: true,//自动布局
                theme:'vs-dark' //官方自带三种主题vs, hc-black, or vs-dark
            });
        },
        getValue(){
   
            this.editor.getValue(); //获取编辑器中的文本
        }
    }
}

附：Monaco Editor demo

附：语言支持（当然支持自定义语言）

//modesIds即为支持语言
var modesIds = monaco.languages.getLanguages().map(function(lang) {
    return lang.id; });

附：配置项(根据自身需要在初始化编辑器是配置) 配置项链接

selectOnLineNumbers: true,//显示行号
roundedSelection: false,
readOnly: false,        // 只读
cursorStyle: 'line',        //光标样式
automaticLayout: false, //自动布局
glyphMargin: true,  //字形边缘
useTabStops: false,
fontSize: 28,       //字体大小
autoIndent:true,//自动布局
quickSuggestionsDelay: 500,   //代码提示延时