# my-json-editor

**Repository Path**: geng-template/my-json-editor

## Basic Information

- **Project Name**: my-json-editor
- **Description**: 基于 `jsoneditor` 开发的vue3 json editor，支持全屏编辑，有完善的事件回调，可以在失去焦点时，对编辑器内容做校验。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-07-11
- **Last Updated**: 2024-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# my-json-editor

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

<img src="https://img.qiuzhihu.cn/mp/json-editor-vue3.png" style="width: 700px" />

## json-editor-vue3

参考[json-editor-vue3](https://www.npmjs.com/package/json-editor-vue3)实现，加入 vite 打包压缩，将 jsoneditor 集成打包，减少需要自主安装 jsoneditor 的工作量。

## 项目地址

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

## 依赖

-   Vue 3.0.0+
-   jsoneditor

## 安装方式

```
pnpm install my-json-editor
```

## 全局引入方式

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

## 局部引入方式

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

### 模板使用

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

### 参数

| Name        | Type   | Description                                                                                                                               | Default                                  |
| ----------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| modelValue  | Object | 要编辑的 json 值                                                                                                                          |                                          |
| options     | Object | jsoneditor 的 options，参考[configuration-options](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#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](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#configuration-options)对应参数，参数有重写，第一个参数为编辑器的实例，后续参数与官方参数相同 |
| selectionChange     | 同上                                                                                                                                                                                     |
| focus               | 同上                                                                                                                                                                                     |
| blur                | 同上                                                                                                                                                                                     |
| colorPicker         | 同上                                                                                                                                                                                     |