JSON编辑器

https://github.com/josdejong/svelte-jsoneditor
https://jsoneditoronline.org/docs/index.html
JSON相关文档 https://jsoneditoronline.org/indepth
在线 JSON解析器 https://jsoneditoronline.org

可以展开，压缩，排序，精确报错，command+f搜索，格式化，前进回退；
基本能满足 JSON 查看、编辑、格式化、转换和验证需求；
重要的是：复制粘贴长一点的json，页面不卡顿。

1. 查看和编辑 JSON
2. 具有低级文本编辑器和高级树视图和表格视图
3. 格式化（美化）和压缩 JSON
4. 排序、查询、过滤和转换 JSON
5. 修复 JSON，Repair JSON
6. JSON 模式验证和可插入的自定义验证
7. 颜色突出显示、撤消/重做、搜索和替换
8. 颜色选择器和时间戳标签等实用程序
9. JSON文件最大不要超过 512 MB

五种编辑查看模式

1. code
2. 树形
3. 文本
4. 表单
5. 视图

属性

mainMenuBar={false} 不显示工具条
content支持 json对象，和 text字符串json，只能二选一

const props = {
  content: {
    text: undefined, // 解析字符串的 json
    json: {}, // 解析的 json文档
  }
}

readOnly 只读

text 代码模式

mode=’text’，默认 mode=tree
https://jsoneditoronline.org/docs/index.html#text-mode

JsonEditor

json编辑器的 React版本

import React, { useEffect, useRef }  from 'react';
import {
  bool,
  object, 
  oneOf,
  number,
  func,
} from 'prop-types';
import { JSONEditor } from 'vanilla-jsoneditor';
import { noop, isFunction } from 'lodash-es';
const defaultContent = {
  text: undefined,
  json: {},
  mode: 'text',
}
JsonEditor.propTypes = {
  content: object,
  mode: oneOf(['text', 'tree', 'table']),
  tabSize: number,
  indentation: number,
  readOnly: bool,
  mainMenuBar: bool,
  navigationBar: bool,
  onChange: func,
};
JsonEditor.defaultProps = {
  content: defaultContent,
  mode: 'text',
  tabSize: 2, // Tab 默认 4
  indentation={2} // 缩进默认 4
    readOnly: false,
  mainMenuBar: false,
  navigationBar: false,
    onChange: noop,
}
function JsonEditor(props) {
  const refContainer = useRef(null);
  const refEditor = useRef(null);
  useEffect(() => {
    // create editor
    refEditor.current = new JSONEditor({
      target: refContainer.current,
      props: {}
    });
    return () => {
      // destroy editor 销毁
      refEditor.current?.destroy();
      refEditor.current = null;
    };
  }, []);
  // update props
  useEffect(() => {
    refEditor.current?.updateProps(props);
  }, [props]);
  return (
    <div
      className="flex flex-1"
      ref={refContainer}
    />
  );
}
export default JsonEditor;

onRenderMenu 自定义菜单

import JsonEditor from '../JsonEditor'
function App() {
  const [content, setContent] = useState({ json: {} });
  function handleRenderMenu(items, context) {
    // console.log('handleRenderMenu', { items, context })
    // 分割线
    // const separator = {  separator: true }
    // 自定义按钮
    // const customCopyButton = {
    //   onClick: handleCopy,
    //   icon: <CopyOutlined />,
    //   title: 'Copy document to clipboard',
    //   className: 'custom-copy-button'
    // }
    // 空格
    // const space = { space: true  }
    const result = items.filter((it: any, i: number) => i > 3);
    return result;
    // const itemsWithoutSpace = items.slice(0, items.length - 2)
    // return itemsWithoutSpace.concat([separator, customCopyButton, space])
  }
  function handleChange(updatedContent, previousContent, { contentErrors, patchResult }) {
    console.log('onChange: ', { updatedContent, previousContent, contentErrors, patchResult })
    setContent(updatedContent)
  }
  return (
    <JsonEditor
      content={content}
      onChange={handleChange}
      onRenderMenu={handleRenderMenu}
      // parser 自定义 JSON解析器 
      // validationParser 自定义 JSON验证器
    />
  )
}

validationParser

自定义 JSON验证器
无损json解析 https://github.com/josdejong/lossless-json

树形

方便的查看模式，支持展开折叠，基本的编辑功能，甚至类型的确定，位置的转换，全局搜索精确定位

图标不显示问题
原因：调用的是一张大的雪碧图，来源是本地静态地址；css里通过background-position去确定其位置从而决定用哪个图标

jsoneditor常见问题

光标错位问题

设置字体为12px即可