非常好用的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的文档

相关推荐
贩卖纯净水.33 分钟前
网站部署及CSS剩余模块
前端·css
Justinc.42 分钟前
CSS3_BFC(十二)
前端·css·css3
梅子酱~44 分钟前
Vue 学习随笔系列十七 -- 表格样式修改
javascript·vue.js·学习
刺客-Andy1 小时前
React第四节 组件的三大属性之state
前端·javascript·react.js
黄毛火烧雪下1 小时前
React 表单Form 中的 useWatch
前端·javascript·react.js
爱健身的小刘同学1 小时前
钉钉免登录接口
前端·javascript·钉钉
啵咿傲1 小时前
跨域相关的一些问题 ✅
前端
命运之光1 小时前
生日主题的烟花特效HTML,CSS,JS
前端·javascript·css
Cshaosun2 小时前
js版本之ES5特性简述【String、Function、JSON、其他】(二)
前端·javascript·es
__WanG2 小时前
Flutter将应用打包发布到App Store
前端·flutter·ios