用vue2-ace-editor做个代码编辑界面

作者：繁依Fanyi0 | 2024-04-13 08:42:07

踩

vue2-ace-editor

引言

最近写前端需要写一个简单的代码编辑器，使用了vue2-ace-editor这个插件；这里简单总结一下使用方法；

环境：

vue2
组件库：ant-design-vue1.7.2

引入组件

如果你也是vue2，并且不想再重写这个编辑器组件，可以引入ant-design-vue的组件库：

这里是官方文档，可以看文档引入：传送门（注意：查看文档版本是1.7.8）

然后就是引入vue2-ace-editor插件：

vue2-ace-editor的github仓库：传送门

引入方式：

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

剩下步骤官网都写了，当然如果你想直接cv我下面的组件可以不用看，或者作为参考；

封装组件

为了提高复用性，并使代码更简洁，我首先把vue2-ace-editor再次封装成了一个组件CodeEdit:

<template>
  <div>
    <a-card title="代码编辑器">
      <!--主题select选择框-->
      <a-select slot="extra" style="width: 120px" :default-value="aceConfig.selectTheme" @change="handleThemeChange">
        <a-select-option v-for="theme in aceConfig.themes" :key="theme">
          {{theme}}
        </a-select-option>
      </a-select>
      <!--语言select选择框-->
      <a-select slot="extra" style="width: 120px; margin-left: 10px" :default-value="aceConfig.selectLang" @change="handleLangChange">
        <a-select-option v-for="lang in aceConfig.langs" :key="lang">
          {{lang}}
        </a-select-option>
      </a-select>
      <!--编辑器设置按钮-->  
      <a-button slot="extra" type="link" @click="showSettingModal" >
        <a-icon  key="setting" type="setting" style="font-size: 15px"/>
      </a-button>
      <!--editor插件-->  
      <!--其中的@input中的方法就是子组件值改变时调用的方法，该方法会给父组件传入改变值-->
      <editor
          :value="content"
          @input="handleInput"
          @init="editorInit"
          :lang="aceConfig.selectLang"
          :theme="aceConfig.selectTheme"
          :options="aceConfig.options"
          width="100%"
          height="400px"/>
    </a-card>
    <!--编辑器设置模态窗口（未开发完成，可以自行拓展）-->
    <a-modal v-model="visible" width="500px" title="编辑器设置(功能暂未开发)" @ok="handleOk">
      <a-row type="flex">
        <a-col flex="330px">
          <span class="settingTitle" >Tab 长度</span>
          <br/>
          <span class="settingDescription">选择你想要的 Tab 长度，默认设置为4个空格</span>
        </a-col>
        <a-col flex="80px">
          <a-select style="width: 120px;" :default-value="aceConfig.options.tabSize" @change="handleTabChange" disabled>
            <a-select-option v-for="tab in aceConfig.tabs" :key="tab">
              {{tab}}个空格
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row type="flex" style="margin-top: 50px">
        <a-col flex="330px">
          <span class="settingTitle">字体设置</span>
          <br/>
          <span class="settingDescription">调整适合你的字体大小</span>
        </a-col>
        <a-col flex="80px">
          <a-select style="width: 120px;" :default-value="aceConfig.options.fontSize" @change="handleFontChange" disabled>
            <a-select-option v-for="font in aceConfig.fontSizes" :key="font">
              {{font}}px
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
// 编辑器主题
const themes = [
  'xcode',
  'eclipse',
  'monokai',
  'cobalt'
]
// 编辑器语言
const langs = [
  'c_cpp',
  'java',
  'javascript',
  'golang'
]
// tabs
const tabs = [2, 4, 8]
// 字体大小
const fontSizes = [14, 15, 16, 17, 18, 19, 20, 21, 22]
// 编辑器选项
const options = {
  tabSize: 4, // tab默认大小
  showPrintMargin: false, // 去除编辑器里的竖线
  fontSize: 20, // 字体大小
  highlightActiveLine: true, // 高亮配置
  enableBasicAutocompletion: true, //启用基本自动完成
  enableSnippets: true, // 启用代码段
  enableLiveAutocompletion: true, // 启用实时自动完成
}
export default {
  name: "CodeEdit",
  components: {
    editor: require('vue2-ace-editor'),
  },
  data() {
    return {
      visible: false, // 模态窗口显示控制
      aceConfig: { // 代码块配置
        langs, // 语言
        themes, // 主题
        tabs, // tab空格
        fontSizes,
        options, // 编辑器属性设置
        selectTheme: 'xcode', // 默认选择的主题
        selectLang: 'c_cpp', // 默认选择的语言
        readOnly: false, // 是否只读
      },
    }
  },
  // 接收父组件v-model传来的值
  model: {
    prop: 'content', 
    event: 'change' 
  },
  props: {
    content: String // content就是上面prop中声明的值，要保持一致
  },
  methods: {
    // 当该组件中的值改变时，通过该方法将该组件值传给父组件，实现组件间双向绑定
    handleInput(e) {
      this.$emit('change', e) // 这里e是每次子组件修改的值，change就是上面event中声明的，不要变
    },
    // 显示'编辑器设置'模态窗口
    showSettingModal() {
      this.visible = true
    },
    // '编辑器设置'模态窗口确认按钮回调
    handleOk() {
      this.visible = false
      // this.editorInit()
    },
    /分割线：以下为该代码组件的配置
    // 代码块主题切换
    handleThemeChange(value) {
      this.aceConfig.selectTheme = value
      this.editorInit()
    },
    // 代码块语言切换
    handleLangChange(value) {
      this.aceConfig.selectLang = value
      this.editorInit()
    },
    // tab切换
    handleTabChange(value) {
      this.aceConfig.options.tabSize = value
      this.editorInit()
    },
    // 字体大小切换
    handleFontChange(value) {
      this.aceConfig.options.tabSize = value
      this.editorInit()
    },
    // 代码块初始化
    editorInit () {
      require('brace/ext/language_tools') // language extension prerequsite...
      require(`brace/mode/${this.aceConfig.selectLang}`) // 语言
      require(`brace/theme/${this.aceConfig.selectTheme}`) // 主题
    },
  }

}
</script>

<style scoped>
.settingTitle{
  font-size: larger;
}
.settingDescription{
  font-size: small;
  color: #a8a8af
}
</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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

代码中已经给了详细注释，实在看不懂猜着改改就能改出来（博主就是瞎改出来的）；

调用组件

可以先调用一下该组件：

调用很简单，直接v-model双向绑定代码即可：

父组件调用子组件CodeEdit：

<template>
  <div>
      <!--只需要双向绑定代码块即可-->
    <CodeEdit v-model="content" />
    <a-button @click="getCode">获取代码</a-button>
  </div>
</template>

<script>
import CodeEdit from "@/components/bode/code/CodeEdit";
export default {
  components: {CodeEdit},
  data() {
    return {
      content: '' // 代码块
    }
  },
  methods: {
    // 获取代码
    getCode() {
      console.log(this.content)
    }
  }
}
</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