代码编辑器ace editor

警告
本文最后更新于 2022-07-24,文中内容可能已过时。

在VUE上使用ace

安装

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"
/>

v-model 是必须的

langtheme 这两个可以参考 ace-editor’s doc

height width 可以有这三种选择方式 200, 200px, 50%

0%