vue3-ace-editor

vue3-ace-editor

A packaging of ace. Inspired by vue2-ace-editor, but supports Vue 3

How to use

1. Install

   yarn add vue3-ace-editor
   

2. Register it in components of Vue options

   import { VAceEditor } from 'vue3-ace-editor';
   
   export default {
       data,
       methods,
       ...
       components: {
           VAceEditor,
       },
   }
   

3. Use the component in template

   <v-ace-editor v-model="content" @init="editorInit" lang="html" theme="chrome" />
   

   prop v-model is required

   prop lang, theme is same as ace-editor's doc

Deferences with vue2-ace-editor

1. This component uses ace-builds directly, instead of the outdated wrapper brace
2. Ace modes and themes are automatically resolved using ace-builds/webpack-resolver, no manual-import required.
3. DOM size changes are detected automatically using ResizeObserver, thus no width / height props needed.
4. For easier usage, more props / events added / emitted.
   1. Prop readonly: This Boolean attribute indicates that the user cannot modify the value of the control.
   2. Prop placeholder: A hint to the user of what can be entered in the control.
   3. All ace events emitted. Docs can be found here: https://ace.c9.io/#api=editor&nav=api
   4. Some commonly used methods focus, blur, selectAll provided as shortcuts.

LICENSE

MIT