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="content" @init="editorInit" lang="html" theme="chrome" />
prop
v-model
is requiredprop
lang
,theme
is same as ace-editor's doc
vue2-ace-editor
Deferences with- This component uses ace-builds directly, instead of the outdated wrapper brace
- Ace modes and themes are automatically resolved using
ace-builds/webpack-resolver
, no manual-import required. - 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. - 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
LICENSE
MIT