vue中使用代码编辑器 vue2-ace-editor_vue 代码编辑器

npm install --save-dev vue2-ace-editor
1

// 全局引入  main.js

import Editor from 'vue2-ace-editor';
Vue.use(Editor)

//组件中引入

import Editor from 'vue2-ace-editor';
components: {
  Editor,
},
1
2
3
4
5
6
7
8
9
10
11

<template>
  <div class="codeEditBox">
    <editor
      v-model="code"
      @init="editorInit"
      @input="codeChange"
      lang="javascript"
      :options="editorOptions"
      theme="chrome"
    ></editor>
  </div>
</template>
<script>
import Editor from 'vue2-ace-editor'
export default {
  components: {
    Editor,
  },
  data() {
    return {
      code: '',
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true, // 启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, // 启用实时自动完成
        tabSize: 2, // 标签大小
        fontSize: 18, // 设置字号
        showPrintMargin: false, // 去除编辑器里的竖线
      },
    }
  },
  methods: {
    codeChange(val) {
      console.log(val)
    },
    editorInit() {
      // require('brace/theme/chrome');
      // require('brace/ext/language_tools'); //language extension prerequsite...
      // require('brace/mode/yaml');
      // require('brace/mode/json');
      // require('brace/mode/less');
      // require('brace/snippets/json');
      // require('brace/mode/lua');
      // require('brace/snippets/lua');
      // require('brace/mode/javascript');
      // require('brace/snippets/javascript');
    },
  },
}
</script>
<style scoped>
.codeEditBox {
  width: 100%;
  height: 200px;
  border: 1px solid #dcdee2;
}

.ace_content {
  line-height: 20px;
  font-size: 12px;
  color: pink;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65