Vue2-ace-editor 基本使用方法
# 使用 npm 安装
npm install vue-ace-editor --save-dev
1
# 简单使用
新建 *.vue
文件,作为编辑器组件使用,如下:
<template>
<editor v-model="content" :options="options" @init="editorInit" :lang="lang" theme="chrome" width="100%" height="100%" ></editor>
</template>
<script>
import aceEditor from "vue2-ace-editor";
export default {
name: "aceeditor",
components: {
editor: aceEditor
},
watch: {
content(val) {
console.log(val);
}
},
data: () => ({
lang: "javascript", // html、javascript
content: "",
options: {
wrap: true, // 换行
enableLiveAutocompletion: true, // 智能补全
enableSnippets: true, // 启用代码段
// enableBasicAutocompletion: true, // 启用基本完成 不推荐使用
// autoScrollEditorIntoView: false, // 自动滚动编辑器视图
}
}),
// props: {
// msg: String
// },
methods: {
editorInit() {
require("brace/ext/language_tools");
require("brace/mode/html");
require("brace/mode/javascript");
require("brace/mode/less");
require("brace/theme/chrome");
require("brace/snippets/javascript");
}
}
};
</script>
<style lang="scss" scoped>
</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
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
# 参考资料
Ace GitHub地址:https://github.com/ajaxorg/ace (opens new window)
Ace 官方地址:https://ace.c9.io (opens new window)
Vue2-ace-editor GitHub地址:https://github.com/chairuosen/vue2-ace-editor (opens new window)
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13