my-json-editor

基于 jsoneditor 开发的 vue3 json editor，支持全屏编辑，有完善的事件回调，可以在失去焦点时，对编辑器内容做校验。

json-editor-vue3

参考json-editor-vue3实现，加入 vite 打包压缩，将 jsoneditor 集成打包，减少需要自主安装 jsoneditor 的工作量。

项目地址

• github : https://gitee.com/gengzhaoji/my-json-editor

依赖

• Vue 3.0.0+
• jsoneditor

安装方式

pnpm install my-json-editor

全局引入方式

//全局引入
import Vue from 'vue';
import JsonEditor from 'my-json-editor';
const app = createApp(App);
app.use(JsonEditor).mount('#app'); //使用方式：<JsonEditor></JsonEditor>

局部引入方式

//局部引入
import JsonEditor from 'my-json-editor';

模板使用

<json-editor class="editor" v-model="data" />

参数

| Name | Type | Description | Default | | ----------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | | modelValue | Object | 要编辑的 json 值 | | | options | Object | jsoneditor 的 options，参考configuration-options | | | currentMode | String | 当前编辑模式 | code | | modeList | Array | 可选的编辑模式列表 | ["tree", "code", "form", "text", "view"] | | language | Array | 语言 | en |

事件

| Name | Description | | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | update:modelValue | json 更新 | | change | json 更新 | | textSelectionChange | 参考configuration-options对应参数，参数有重写，第一个参数为编辑器的实例，后续参数与官方参数相同 | | selectionChange | 同上 | | focus | 同上 | | blur | 同上 | | colorPicker | 同上 |