vue3-ace-editor
v2.2.4
Published
Like vue2-ace-editor but more functional and supports Vue 3
Downloads
34,723
Readme
vue3-ace-editor
A packaging of ace. Inspired by vue2-ace-editor, but supports Vue 3
How to use
Install
yarn add vue3-ace-editor
Register it in
components
of Vue optionsimport { VAceEditor } from 'vue3-ace-editor'; export default { data, methods, ... components: { VAceEditor, }, }
Use the component in template
<v-ace-editor v-model:value="content" @init="editorInit" lang="html" theme="chrome" 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 bothmin-lines
andmax-lines
to make the editor's height auto-grow.prop
lang
,theme
is same as ace-editor's doc
Deferences with vue2-ace-editor
- 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.
- Prop
readonly
: This Boolean attribute indicates that the user cannot modify the value of the control. - Prop
placeholder
: A hint to the user of what can be entered in the control. - Prop
wrap
: Indicates whether the control wraps text. - Prop
printMargin
: A short hand ofshowPrintMargin
andprintMarginColumn
. - Prop
minLines
andmaxLines
: Specifiy the minimum and maximum number of lines. - All ace events emitted. Docs can be found here: https://ace.c9.io/#api=editor&nav=api
- Some commonly used methods
focus
,blur
,selectAll
provided as shortcuts.
- Prop
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:
import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'; // For vite
import workerJsonUrl from 'file-loader?esModule=false!ace-builds/src-noconflict/worker-json.js'; // For webpack / vue-cli
ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
<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.
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-chrome';
To use dynamic loading to avoid first-load overhead
import ace from 'ace-builds';
import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
ace.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