基于vue的monaco-editor使用

说明：本文主要介绍文本编辑器monaco-editor结合vue的使用

单独封装一个基础组件：CodeEditor.vue

<template>

    <div class="the-code-editor-container" ref="container"></div>

</template>

<script>

// 编辑器核心文件，按需引入语言支持文件

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'

import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'

import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'

import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'

import 'monaco-editor/esm/vs/editor/contrib/find/findController.js'

 

export default {

    name: 'codeEditor',

    props: {

        options: {

            type: Object,

            default () {

               return {

<