vue-json-editor2z v1.0.0

Usage

Install the package

    npm install vue-json-editor2z

Import the module in the place you want to use:

    import TextEditor from 'vue-json-editor2z'
    import 'vue-json-editor2z/dist/styles.css'

    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

The following props are accepted:

language: (string)

`json` json editor (default)
`json_view` json view (json-viewer)
`text` like text-area
`...` other [ace](https://github.com/ajaxorg/ace)

dataSource

if language = `json || json_view`:  any
else: string

height

height of Editor. px, %, vh

width

width of Editor. px, %, vh

readOnly

lock editor

wrap (boolean)

true line break if long. (default)

false no break

options (object)

see ace. It's not necessary, the default has already configured enough info for the editor.

theme (string)

see ace theme

showSearch (boolean)

true search ctrl+f (default)

false disabled

disabledTab (boolean)

true disabled editor tab. (When keypress tab move next component)

false (default)

showAutoComplete (boolean)

true support ctrl+space (default)

false disabled

suggestDataComplete (array)

custom suggest snippet

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

isFetchLoading (boolean)

true when submit or fetch data api.

false request done.

make loading spinner when submit or fetch data (not necessary)

customLoading (boolean)

isFetchLoading = true && customLoading = true

=> <Editor><div>custom loading</div></Editor>

@change

See snippet

Example

A working example can be found in the example directory.

npm install

npm run dev
npm run start

License

MIT