Vue2怎么安装使用MonacoEditor

1.安装MonacoEditor

cnpm install -S editor@1.0.0
cnpm install -S monaco-editor@0.19.3
cnpm install -S monaco-editor-webpack-plugin@1.9.1

2.配置vue.config.js文件

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

3.建立组件monaco.vue

 


.code-container {
  width: 100%;
  height: 500px;
  overflow: hidden;
  border: 1px solid #eaeaea;
  .monaco-editor .scroll-decoration {
    box-shadow: none;
  }
}

4.建立语法提示文件sql.js

export default [
  /**   * 内置函数   */
  {
     label: 'if',//触发提示的文本
     kind: monaco.languages.CompletionItemKind.Function,
     insertText: `n#if()ntn #end`,//补全的文本
     insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
     detail: '流程控制'
   },  {
     label: 'if/else',
     kind: monaco.languages.CompletionItemKind.Function,
     insertText: 'n#if()nn #elsenn #end',
     insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
     detail: '流程控制'
   }
 ]

5.父组件引入monaco.vue