Vue2-ace-editor 基本使用方法

# 使用 npm 安装

npm install vue-ace-editor --save-dev

# 简单使用

新建 *.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

# 参考资料

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)

#Vue

上次更新: 2024/01/30, 00:35:17

← vue-router传递参数的几种方式 vue2.x 插槽slot使用总结→