vue3-ace-editor
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

vue3-ace-editor

npm

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

Readme

Keywords

none

Package Sidebar

Install

npm i vue3-ace-editor@1.0.0

Version

1.0.0

License

MIT

Unpacked Size

7.36 kB

Total Files

7

Last publish

Collaborators

  • zhangsongcui