vue2.0引入vue2-ace-editor代码编辑器

首先安装引入相关的模块

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

下面是模板代码

<template>
  <div class="container">
    <editor
      ref="aceEditor"
      v-model="content"
      @init="editorInit"
      width="700"
      height="600"
      lang="javascript"
      :theme="theme"
      :options="{
    　　 enableBasicAutocompletion: true,
    　　 enableSnippets: true,
    　　 enableLiveAutocompletion: true,
  　　   tabSize:6,
    　　 fontSize:14,
    　　 showPrintMargin:false,   //去除编辑器里的竖线
      }"
    ></editor>
    <el-button type="primary" size="small" @click="getValue">获 取</el-button>
    <el-button type="primary" size="small" @click="pre">上一个主题</el-button>
    <el-button type="primary" size="small" @click="next">下一个主题</el-button>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

以下是相关的js代码

<script>
  export default {
    data() {
      return {
        content: '',
        theme: '',
        num: 0,
        arr: [ //将brace/theme文件夹下的所有主题名字拷贝出来
          'ambiance',
          'chaos',
          'chrome',
          'clouds',
          'clouds_midnight',
          'cobalt',
          'crimson_editor',
          'dawn',
          'dracula',
          'dreamweaver',
          'eclipse',
          'github',
          'gob',
          'gruvbox',
          'idle_fingers',
          'iplastic',
          'katzenmilch',
          'kr_theme',
          'kuroir',
          'merbivore',
          'merbivore_soft',
          'monokai',
          'mono_industrial',
          'pastel_on_dark',
          'solarized_dark',
          'solarized_light',
          'sqlserver',
          'terminal',
          'textmate',
          'tomorrow',
          'tomorrow_night',
          'tomorrow_night_blue',
          'tomorrow_night_bright',
          'tomorrow_night_eighties',
          'twilight',
          'vibrant_ink',
          'xcode',
        ]
      };
    },
    components: {
      editor: require("vue2-ace-editor")
    },
    methods: {
      editorInit() {//初始化
        require("brace/ext/language_tools"); //language extension prerequsite...
        require("brace/mode/javascript"); //language
        // require("brace/theme/tomorrow_night");
        for (let i = 0; i < this.arr.length; i++) {//方便看哪个主题好看，循坏加载了所有主题，通过点击按钮切换
          require("brace/theme/" + this.arr[i])
        }
        require("brace/snippets/javascript"); //snippet
      },
      getValue() {//获取编辑器中的值
        console.log('编辑器中的值：' + this.$refs.aceEditor.editor.getValue())
        console.log('编辑器中第一个换行符的位置：' + this.$refs.aceEditor.editor.getValue().indexOf('\n'))
      },
      pre() {//切换到上一个主题
        if (this.num == 0) {
          return
        }
        this.num--
        this.theme = this.arr[this.num]
        console.log('主题' + this.num + '__' + this.arr[this.num])
      },
      next() {//切换到下一个主题
        if (this.num == this.arr.length - 1) {
          return
        }
        this.num++
        this.theme = this.arr[this.num]
        console.log('主题' + this.num + '__' + this.arr[this.num])
      },
    },
    mounted() {
      this.editorInit();
      this.theme = this.arr[0]
      console.log(this.$refs.aceEditor.editor.setValue('设置的初始值'))
    }
  };
</script>
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

最终的一个运行效果