ace-editor-vue3

A package of ace support for vue3.

Installation

Installation is done using the npm install command:

1npm i ace-editor-vue3

Example

1<template>
2  <AceEditor
3    v-model:codeContent="value" 
4    v-model:editor="editor"
5    :options="options"
6    :theme="theme"
7    :lang="lang"
8    width="100%" 
9    height="300px" 
10  />
11  <button @click="setValue">set value</button>
12  <button @click="getValue">get value</button>
13  <button @click="setSize">set size</button>
14</template>
15
16<script>
17import AceEditor from "ace-editor-vue3";
18import "brace/mode/javascript";
19import "brace/theme/monokai";
20
21export default {
22  components: {
23    AceEditor
24  },
25
26  data() {
27    return {
28      editor: null,
29      value: `console.log("hello ok.")`,
30      options: {"showPrintMargin": false},
31      lang: "javascript",
32      theme: "monokai", 
33    }
34  },
35
36  methods: {
37    setValue() {
38      this.value = `const a = 100;`;
39    },
40
41    getValue() {
42      console.log(this.value);
43    },
44
45    setSize() {
46      this.editor.setFontSize(32);
47    }
48  },
49
50  watch: {
51    value() {
52      console.log("use typing code:");
53      console.log(this.value);
54    }
55  },
56}
57</script>
58
59<style>
60
61</style>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT