vue3-ace-editor

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

How to use

1. Install

   1yarn add vue3-ace-editor

2. Register it in components of Vue options

   1import { VAceEditor } from 'vue3-ace-editor';
   2
   3export default {
   4    data,
   5    methods,
   6    ...
   7    components: {
   8        VAceEditor,
   9    },
   10}

3. Use the component in template

   1<v-ace-editor
   2    v-model:value="content"
   3    @init="editorInit"
   4    lang="html"
   5    theme="chrome"
   6    style="height: 300px" />

   prop v-model:value is required. <v-ace-editor> has no height by default. Its height must be specified manually, or set both min-lines and max-lines to make the editor's height auto-grow.

   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. DOM size changes are detected automatically using ResizeObserver, thus no width / height props needed.
3. 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.

Enable syntax checking

To enable syntax checking, module ace/mode/lang_worker must be registered, and option useWorker: true must be set.

Take JSON for example:

1import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'; // For vite
2
3import workerJsonUrl from 'file-loader?esModule=false!ace-builds/src-noconflict/worker-json.js'; // For webpack / vue-cli
4
5ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);

1<v-ace-editor v-model:value="json" lang="json" :options="{ useWorker: true }" />

See also https://github.com/CarterLi/vue3-ace-editor/issues/3#issuecomment-768190528 to load the worker file from CDN

Breaking change

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.

1import 'ace-builds/src-noconflict/mode-json';
2import 'ace-builds/src-noconflict/theme-chrome';

To use dynamic loading to avoid first-load overhead

1import ace from 'ace-builds';
2
3import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
4ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
5
6import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
7ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl);

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

Minimal example using vite

• Preview: https://carterli.github.io/vue3-ace-editor/
• Source: https://github.com/CarterLi/vue3-ace-editor/tree/gh-pages/demo-source

LICENSE

MIT