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

相关推荐
web Rookie29 分钟前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust37 分钟前
css:基础
前端·css
帅帅哥的兜兜37 分钟前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
工业甲酰苯胺40 分钟前
C# 单例模式的多种实现
javascript·单例模式·c#
yi碗汤园40 分钟前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称41 分钟前
购物车-多元素组合动画css
前端·css
编程一生1 小时前
回调数据丢了?
运维·服务器·前端
丶21361 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao2 小时前
npm install慢
前端·npm·node.js
程序员爱技术4 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js