Usage
Install the package
npm install vue-json-editor2zImport 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 installnpm run dev
npm run startLicense
MIT