下载包

npm install monaco-editor@0.33.0

demo

/** 首先创建一个容器，长和宽都要*/
<div id="container" ref="container" style="width:100%;height:100%;" ></div>

<script>
import * as monaco from "monaco-editor";
export default {
  name: "monacoEdit",
  props: {
    editId: {
      type: String,
      default: () => "",
    },
    codes: {
      // 编辑器中要回显的内容
      type: String,
      default: () => "",
    },
    readOnly: {
      type: Boolean,
      default: () => false,
    },
    language: {
      type: String,
      default: () => "python",
    },
    theme: {
      type: String,
      default: () => "vs",
    },
    // 编辑器的主要配置
    editorOptions: {
      type: Object,
      default: () => {
        return {
          selectOnLineNumbers: true,
          roundedSelection: false,
          readOnly: false, // 只读
          cursorStyle: "line", //光标样式
          automaticLayout: false, //自动布局
          glyphMargin: true, //字形边缘
          useTabStops: false,
          fontSize: 12, //字体大小
          autoIndent: true, //自动布局
        };
      },
    },
    isFromSQLQuery: {
      type: Boolean,
      default: () => false,
    },
    monacoWrapperHeight: {
      type: String,
      default: () => "",
    },
    fixedOverflowWidgets: {
      type: Boolean,
      default: () => true,
    },
    flowLake: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      showModal: false,
      monacoEditor: null,
      monacoEditorValue: "",
      monacoProvider: null,
      monacoHover: null,
      dbNameList: [],
      tableNameList: [],
      likeNameList: [],
      connectName: "",
      currentDbName: "",
    };
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      this.monacoEditor = monaco.editor.create(this.$refs.container, {
        value: this.monacoEditorValue || this.codes,
        language: this.language,
        theme: this.theme, //vs, hc-black, or vs-dark
        readOnly: this.readOnly,
        editorOptions: this.editorOptions,
        automaticLayout: true, // 是否自适应
        minimap: {
          enabled: false, //是否开启小地图
        },
        lineHeight: 20, //行高
        scrollBeyondLastLine: false,
        fixedOverflowWidgets: this.fixedOverflowWidgets, // 超出编辑器大小的使用 fixed 属性显示
        renderWhitespace: "all",
        overviewRulerBorder: false, // 滚动条边框
      });
    },
  },
};
</script>

基本配置

var editor = monaco.editor.create(document.getElementById('container'), {
    value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line", //编辑器的值
    language: 'javascript',   //语言
    lineNumbers: 'off',     //是否显示前面的行号
    roundedSelection: false, //选中的圆角
    scrollBeyondLastLine: false, //启用滚动可以在最后一行后移动一个屏幕大小。默认为true
    readOnly: false,    //是否可编辑
    theme: 'vs'   //主题 'vs' (default), 'vs-dark', 'hc-black'
    cursorStyle: 'line',        //光标样式
    automaticLayout: false, //自动布局
    glyphMargin: true,  //字形边缘
    useTabStops: false, //在制表符停止后插入和删除空格
    fontSize: 12,       //字体大小
    autoIndent:true,//自动布局（控制当用户键入、粘贴、移动或缩进行时，编辑器是否应自动调整缩进 "none" | "keep" | "brackets" | "advanced"（默认） | "full"）
    overviewRulerBorder:true, //控制是否应围绕概览标尺绘制边框,默认为true
    minimap: {
                    enabled: false   //是否开启小地图
              },
    lineHeight:20, //行高，
    fixedOverflowWidgets:false,//将溢出小部件显示为固定。默认为false
    renderWhitespace: 'all',  //启用空白渲染。"all" | "none" | "boundary" | "selection"(默认) | "trailing"
     folding:false, //是否启用代码折叠(默认为true)  
     foldingStrategy:'auto', //选择折叠策略。”“auto”使用为当前文档贡献的策略，“indentation”使用基于缩进的折叠策略,默认为auto  
     hideCursorInOverviewRuler:true //滚动条上横向光标是否隐藏(true:隐藏，false:不隐藏)                      
});
setTimeout(function () {
    editor.updateOptions({
        lineNumbers: 'on'
    });
}, 2000);

方法

// 提示语 registerCompletionItemProvider
            this.monacoProvider = monaco.languages.registerCompletionItemProvider(
                this.language,//语言
                {
                    triggerCharacters: ['.'], //以.为提示标志
                    provideCompletionItems: (model, position) => this.provideCompletionItems(model, position)  //返回的提示项为[]
                }
            )
//提示项为interface CompletionItem(属性可在官网查)
例子
{
    label: v.name,
    kind: monaco.languages.CompletionItemKind['Method'],
    insertText: v.name, ////选择后粘贴到编辑器中的文字
    detail: '<库>',
    pid: v.id
}

\