vue-json-editor-z v1.1.2

Description

• Simple vue-json-editor
• Apply perfect scrollbar

Usage

Install the package

    npm install vue-json-editor-z

Import the module in the place you want to use:

    import TextEditor from 'vue-json-editor-z'
    import 'vue-json-editor-z/dist/styles.css'
    import 'perfect-scrollbar/css/perfect-scrollbar.css'; // perfect-scrollbar

    Vue.component('editor', TextEditor)

Snippet

    // json-edtor
    <Editor :dataSource="dataSource" height="400px" @change="editorChange" />
    /*
    editorChange({ error, dataSource }) {
        if (error) {
            this.label = 'JSON syntax error'
            return
        }
        this.dataSource = dataSource
    }
    */

    // =============================
    // =============================
    <Editor :dataSource="dataSource" :showHeader="false" />

    // =============================
    // =============================
    <Editor :dataSource="dataSource" :isFetchLoading="isFetchLoading" />
    <button @click="isFetchLoading = !isFetchLoading">Submit</button> // make lock editor when save api

    // =============================
    // =============================
    <Editor :dataSource="dataSource" :readOnly="true" />

    // =============================
    // no break (scroll x)
    <Editor :dataSource="dataSource" :wrap="false" /> //

    // =============================
    // =============================
    // ace options
    <Editor :dataSource="dataSource" :options="{showGutter : false}" />

    // =============================
    // =============================
    // text-area
    <Editor :dataSource="text" language="text" />

Props

options and theme: see brace It's not necessary, the default has already configured enough info for the editor.

suggestDataComplete (array)

custom suggest snippet => It's not necessary

suggestDataComplete  = [
   { caption: 'imr', value: 'import react', meta: 'static' },
   ...more
]

Example

A working example can be found in the example directory.

npm install

npm run dev
npm run start

License

MIT