非常好用的json编译器jsoneditor

前言

今天给大家介绍一个非常好用的json编译器,jsoneditor,它支持五种查看模式: code、树形、文本、表单、视图,满足日常的开发需求。

安装

npm i jsoneditor

使用

code模式

可以进行编辑

tsx 复制代码
  const editorOptions: any = {
        mode: 'code', 
        history: true,
  };

输错了会有错误提示

树形模式

只能查看,右上角还可以搜索值

tsx 复制代码
  const editorOptions: any = {
        mode: 'view', 
        history: true,
  };

文本模式

tsx 复制代码
  const editorOptions: any = {
        mode: 'text', 
        history: true,
  };

隐藏工具栏

tsx 复制代码
  const editorOptions: any = {
        mode: 'text', 
        history: true,
        mainMenuBar: false,
  };

表单模式

表单模式就是value值可以编辑,key值不能改,查看还是树形的结构,可以折叠。

tsx 复制代码
  const editorOptions: any = {
        mode: 'form', 
        history: true,
  };

完整代码

react组件的封装

tsx 复制代码
import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.css';
import _ from 'lodash';
import {
  forwardRef,
  useCallback,
  useEffect,
  useImperativeHandle,
  useRef,
} from 'react';

type Props = {
  onChange?: (obj?: any) => void;
  value?: Record<string, any>;
  options?: Record<string, any>;
  height?: number;
};
export default forwardRef(
  ({ onChange = () => {}, value, options = {}, height = 400 }: Props, ref) => {
    const viewContainerRef = useRef<any>();
    const editorRef = useRef<any>();

    // 注意这边暴露到外面的是一个json
    const handleChange = useCallback(
      (value) => {
        try {
          const currenValue = value === '' ? null : editorRef.current.get();
          onChange(currenValue);
        } catch (err) {}
      },
      [onChange],
    );
    const onError = (errArr: any) => {
      console.log('errArr', errArr);
      // if (errArr.length > 0) {
      //   onChange(undefined);
      // }
    };
    useImperativeHandle(ref, () => ({
      editorRef: editorRef,
    }));

    useEffect(() => {
      const editorOptions: any = {
        mode: 'code', //可用值:'tree'(默认值)、'view'、'form'、'code'、'text'、'preview'
        history: true,
        onChangeText: handleChange,
        onValidationError: onError,
        // mainMenuBar: false, // 工具栏
        ...options,
      };
      if (!editorRef.current) {
        editorRef.current = new JSONEditor(
          viewContainerRef.current,
          editorOptions,
        );
      }
    }, [options]);

    // 监听外部传入的value
    useEffect(() => {
      try {
        // 深度比较两个值是否相等
        if (value && !_.isEqual(editorRef.current.get(), value)) {
          editorRef.current.update(value);
        }
      } catch (error) {
        // 当编辑器内容为空时,editorRef.current.get()会抛出异常,所以这里需要捕获
      }
    }, [value]);

    return (
      <div
        style={{ height: `${height}px` }}
        ref={(elem) => (viewContainerRef.current = elem)}
      />
    );
  },
);

其他的还有很多功能可以参考githup的文档

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt