vue3-ace-editor

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

How to use

import { VAceEditor } from 'vue3-ace-editor';

export default {
    data,
    methods,
    ...
    components: {
        VAceEditor,
    },
}

This component uses ace-builds directly, instead of the outdated wrapper brace
DOM size changes are detected automatically using ResizeObserver, thus no width / height props needed.
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. Prop wrap: Indicates whether the control wraps text.
4. Prop printMargin: A short hand of showPrintMargin and printMarginColumn.
5. Prop minLines and maxLines: Specifiy the minimum and maximum number of lines.
6. All ace events emitted. Docs can be found here: https://ace.c9.io/#api=editor&nav=api
7. Some commonly used methods focus, blur, selectAll provided as shortcuts.

Using of ace-builds/webpack-resolver is removed due to bug https://github.com/CarterLi/vue3-ace-editor/issues/3. You MUST import theme and mode yourself. eg.

import 'ace-builds/src-noconflict/mode-text';
import 'ace-builds/src-noconflict/theme-chrome';

Find all supported themes and modes in node_modules/ace-builds/src-noconflict

MIT