在vue项目中使用monaco

万事第一步，下载依赖

npm install monaco-editor

这个玩意要配合一个插件使用，别问，问就是不知道/(ㄒoㄒ)/~~ （貌似是因为这个编辑器有些蜜汁bug）

monaco-editor-webpack-plugin

依赖下载好之后，就需要进行配置

我的项目是webpack打包的，所以是在webpack中进行配置，用vue-cli的项目，配置方法不太一样

webpack的配置：

var MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = merge(baseWebpackConfig, {
    ...
    plugins: [
        ...
        new MonacoWebpackPlugin({
            languages: ["json", "typescript", "javascript"]
        })
    ],
});

vue-cli

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
module.exports = {
  chainWebpack: config => {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        // Languages are loaded on demand at runtime
        languages: ['json', 'javascript', 'html', 'xml']
      }
    ])
  }
}

下一步，那就是封装成一个组件了

<template>
    <div id="monaco-editor-box">
        <div id="monaco-editor" ref="monacoEditor" />
    </div>
</template>

<script>
import * as monaco from "monaco-editor/esm/vs/editor/editor.main";
export default {
    components: {},
    props: {
        editorOptions: {
            type: Object,
            default: function () {
                return {
                    selectOnLineNumbers: true,
                    roundedSelection: false,
                    readOnly: true, // 只读
                    cursorStyle: "line", //光标样式
                    automaticLayout: false, //自动布局
                    glyphMargin: true, //字形边缘
                    useTabStops: false,
                    fontSize: 28, //字体大小
                    autoIndent: true, //自动布局
                    //quickSuggestionsDelay: 500,   //代码提示延时
                };
            },
        },
        codes: {
            type: String,
            default: function () {
                return "<div>请编辑html内容</div>";
            },
        },
    },
    data() {
        return {
            editor: null, //文本编辑器
            isSave: true, //文件改动状态，是否保存
            codeValue: null, //保存后的文本
        };
    },
    mounted() {
        this.initEditor();
    },
    methods: {
        initEditor() {
            const self = this;
            // 初始化编辑器，确保dom已经渲染
            this.editor = monaco.editor.create(self.$refs.monacoEditor, {
                value: self.codeValue || self.codes, // 编辑器初始显示内容
                language: "javascript", // 支持语言
                theme: "vs-dark", // 主题
                selectOnLineNumbers: true, //显示行号
                editorOptions: self.editorOptions,
            });
            // self.$emit("onMounted", self.editor); //编辑器创建完成回调
            // self.editor.onDidChangeModelContent(function (event) {
            //     //编辑器内容changge事件
            //     self.codesCopy = self.editor.getValue();
            //     self.$emit("onCodeChange", self.editor.getValue(), event);
            // });
        },
    },
};
</script>

<style scoped>
#monaco-editor {
    height: 600px;
}
</style>

最后就是组件的引用，就不上例子了

问题记录

遇到的一个问题就是：

我的解决办法就是在webpack的配置中，增加了一个typescript的语言类型，所以这个办法不一定能适用其他场景

如果有更好的解决办法，欢迎交流