代码编辑器ace Editor

1
2
3
4

# 安装vue版本
npm install --save-dev vue2-ace-editor
# 安装配套工具
npm install brace

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{
    data(){
      return {
        content:'',
      }
    },
    methods,
    ...
    components: {
        editor: require('vue2-ace-editor'),
    },
    methods: {
      editorInit: function(editor) {
        require('brace/ext/language_tools') // 提示工具
        require('brace/mode/sql') // 设置程序语言模式
        require('brace/theme/chrome') // 设置主题
        require('brace/ext/emmet')
        // require('brace/snippets/sql')
        this.editor = editor
      },
    },
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<editor
  v-model="content"
  lang="sql"
  theme="chrome"
  width="100%"
  height="260"
  :options="{
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
    tabSize:6,
    fontSize:14,
    showPrintMargin:false, //去除编辑器里的竖线
    wrap:true
  }"
  @init="editorInit"
/>