loonghe/json-editor-vue3

json-editor-vue3

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

安装

npm install json-editor-vue3

使用

全局引入

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue3'

Vue.use(JsonEditorVue)

组件引入

import JsonEditorVue from 'json-editor-vue3'

export default {
  name: 'app',
  components: {
    JsonEditorVue
  },
  data() {
    return {
      data: {
        "hello": "vue"
      }
    }
  },
  methods: {}
}

模板使用

<json-editor-vue 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	同上

常见问题

vue3+ts无法渲染，报错jsoneditor does not provide an export named 'default'

这是因为vite对commonjs兼容性太差，导致无法引入jsoneditor，可以使用@originjs/vite-plugin-commonjs插件解决。

// vite.config.js
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
export default defineConfig({
  plugins: [vue(),viteCommonjs()],
})

Vite的 官方文档 也有提到：Pre-bundle them to improve page loading speed and convert CommonJS / UMD modules to ESM.所以不需要这个plugin，不过得直接在项目源代码里 import 'jsoneditor' 才会转换。

参考 issue #4

公众号

欢迎关注作者公众号前端方程式，如果您有任何问题，也可以通过该公众号联系作者。

捐赠 json-editor-vue3 的开发

json-editor-vue3 的文档和代码完全开源，如果该项目有帮助到你的开发工作，你可以捐赠json-editor-vue3的研发工作，捐赠无门槛，哪怕是一杯可乐也好。