背景
项目中有低代码平台，由于历史脏数据和非同步编辑的问题，偶尔会出现数据错乱的问题，希望有一个快捷的方式修改数据
之前在用Formily的时候有注意到@designable/react 里面的json数据编辑功能非常不错如果能应用到项目里就完美了
@designable/react 官方demo
编码实战
import Editor from '@monaco-editor/react';
import React from 'react';const INIT_SCHEMA = {value: '', // 初始 JSON 内容language: 'json', // 设置语言模式为 JSONtheme: 'vs-dark' // 设置主题为深色
}const JsonEditor = () => {function handleEditorChange(value, event) {console.log('here is the current model value:', value);}return (<Editorheight="60vh"defaultLanguage="json"defaultValue={JSON.stringify(INIT_SCHEMA, null, 2)}onChange={handleEditorChange}options={{automaticLayout: true, // 此属性设定后，编辑器会自动调整其布局以适应容器的大小变化。minimap: { enabled: false }, // 用于控制编辑器旁边是否显示一个小型的地图（Minimap），它提供了整个文档的概览，帮助用户快速定位代码位置。scrollBeyondLastLine: false, // 编辑器默认允许用户滚动到文档的最后一行之后，这个空白区域没有实际内容，只是一个视觉效果。当你将此选项设置为false时，用户滚动到底部时会被限制在文档的最后一行，无法继续滚动到没有内容的区域，这有时可以改善用户体验，特别是在文档较短时}}/>);
};export default JsonEditor;demo地址
demo 基于 @monaco-editor/react
https://tiandisheng.top/tools/code-editor
实现过程
审查元素
一般情况下，依赖包的名字都会在css类名里有所体现，所以打开 @designable/react 官方demo的控制台看一下，找到根元素
放大图如下
出现频率最高的就是
monaco这个单词了，但当时没有细想，如果当时以monaco为关键词在github上搜一下就不会浪费那么多时间了
使用天工AI
Q： @designable/react实现对json数据的编辑是使用的哪个依赖
A：在@designable/react项目中，实现对JSON数据的编辑通常会依赖于一些专门的库，这些库提供了可视化的界面来让开发者能够方便地编辑JSON对象。虽然我无法直接确定@designable/react使用了哪一个具体的库，但有一些流行的库可以完成这样的任务，比如react-json-editor-ajrm、react-json-view或者react-json-editor等。
这些库都提供了丰富的API来创建可编辑的JSON树结构，并且可以很容易地集成到React应用程序中。如果你想了解@designable/react具体使用了哪一个库，你可能需要查看它的源代码或者官方文档来获取更详细的信息。
不想看源码，继续问吧
Q：除了JsonEditorAjrm还有哪些比较好用的Json编辑器
A：除了JsonEditorAjrm之外，还有一些其他比较受欢迎的JSON编辑器，它们各有特点和优势：
-
react-json-editor-ajrm：这是一个基于React的JSON编辑器，它提供了丰富的API来创建可编辑的JSON树结构，并可以很容易地集成到React应用程序中。 -
react-json-view：这个库也是一个React组件，它可以很方便地将JSON数据渲染成易于阅读和编辑的形式。它支持自动缩进和颜色编码，使得JSON数据的阅读和编辑变得更加直观和容易。 -
react-json-editor：这个库同样是一个React组件，它提供了一个可编辑的JSON树结构。它支持多种类型的节点，包括对象、数组、字符串、数值和布尔值，并且可以很容易地集成到React应用程序中。 -
Altova XMLSpy：这是一个商业级的XML编辑器，它包含了JSON编辑器的功能。最新的版本中，Altova XMLSpy对JSON Grid Editor进行了革命性的升级，增加了XULE支持和对US-GAAP XBRL归档文件的全面支持。
以上都是目前市场上比较流行的JSON编辑器，你可以根据自己的需求来选择合适的库进行使用。
这几个依赖库我都试了一下，不是我想要的效果
react-json-view 官方demo
使用通义千问
Q：JSON Editor 好用的js库推荐
A：推荐几个好用的JSON编辑器JavaScript库，这些库可以帮助您在网页上实现交互式的JSON数据查看和编辑功能：
-
JSONEditor
- 官网: https://json-editor.github.io/json-editor/
- 特点: 提供了一个强大的JSON schema验证支持的编辑器，用户界面友好，支持多种编辑模式，如表单视图、代码视图等。非常适合用来构建复杂的表单和配置界面。
-
jsoneditor
- GitHub: https://github.com/josdejong/jsoneditor
- 特点: 这是一个可嵌入式的Web组件，支持树状视图和代码视图编辑JSON数据，具有拖拽排序、增删改查等功能，非常适合开发人员调试和非技术人员查看数据。
-
codemirror
- 官网: https://codemirror.net/
- 特点: 虽然Codemirror不仅仅是一个JSON编辑器，但它通过添加相应的mode可以很好地支持JSON语法高亮和基本的编辑功能。对于需要高度定制或集成到现有文本编辑场景的应用来说，这是一个很好的选择。
-
ACE Editor
- 官网: https://ace.c9.io/
- 特点: ACE是一个非常强大的代码编辑器组件，支持多种语言，包括JSON。它提供了实时编辑、语法高亮、自动完成等功能，适合那些需要内嵌代码编辑功能的应用。
-
Monaco Editor
- GitHub: https://github.com/microsoft/monaco-editor
- 特点: 来自微软，是VS Code编辑器背后的编辑器组件，支持JSON编辑，拥有丰富的API，可以实现高度定制的编辑体验，特别适合需要复杂代码编辑功能的Web应用。
根据您的具体需求，如是否需要JSON Schema支持、界面定制程度、性能要求等因素，可以选择最适合您的库进行集成。
一眼就看到了Monaco Editor，VS Code都用了，那必是精品啊，而且
Monaco这个单词好眼熟啊
编写demo
Q：在React中使用Monaco Editor实现对JSON的增删改(天工AI)
A：在React中使用Monaco Editor实现对JSON的增删改，你需要做以下几个步骤：
-
安装Monaco Editor：
使用npm或yarn安装Monaco Editor：
import React, { useRef, useEffect } from 'react';
import * as monaco from 'monaco-editor';const JsonEditor = () => {const editorRef = useRef(null);useEffect(() => {if (editorRef.current) {const editor = monaco.editor.create(editorRef.current, {value: '', // 初始 JSON 内容language: 'json', // 设置语言模式为 JSONtheme: 'vs-dark' // 设置主题为深色});// 监听编辑器内容变化事件editor.onDidChangeModelContent(() => {const jsonContent = editor.getValue();try {// 尝试将内容解析为 JSON 对象const jsonObject = JSON.parse(jsonContent);console.log('JSON 对象:', jsonObject);} catch (e) {// 如果内容不是有效的 JSON 格式，则打印错误信息console.error('不是有效的 JSON 格式');}});}}, []);return <div ref={editorRef}></div>; // Monaco 编辑器将在这里渲染
};export default JsonEditor;
- 在你的 React 组件中使用
JsonEditor组件：
import React from 'react';
import JsonEditor from './JsonEditor';// 应用组件
const App = () => {// 渲染 JSON 编辑器组件return <JsonEditor />;
};// 导出应用组件
export default App;
- 在你的 HTML 文件中引入 Monaco Editor 的 CSS 文件：
---
- 在你的 React 组件中，你可以编写一些函数来处理JSON的增删改查操作。例如，我们可以定义一些函数来添加、删除、修改和查询JSON对象：
---
- 你可以在你的 React 组件中添加按钮或其他 UI 组件来调用这些函数来实现对JSON的增删改查。
请注意，这只是简单的例子，实际上，根据你的具体需求，你可能需要添加更多的逻辑来处理复杂的JSON结构和错误情况。同时，为了更好的用户体验，你可能还需要添加一些UI组件来允许用户选择不同的操作（如添加、删除、修改和查询），而不是直接在编辑器中输入JSON内容。
Q：在React中使用Monaco Editor实现对JSON的增删改(通义千问)
A：在React中使用Monaco Editor来实现对JSON的增删改查，你需要首先确保已经正确安装并配置了react-monaco-editor这个库，这是一个React组件，允许你在React应用中方便地嵌入Monaco Editor。以下是一些关键步骤和代码示例，展示如何实现基本的JSON编辑和操作功能。
安装 react-monaco-editor
首先，你需要通过npm或yarn安装react-monaco-editor和它的依赖：
npm install react-monaco-editor monaco-editor
基本设置
在React组件中引入MonacoEditor并进行基本设置。这里，我们将初始化编辑器以支持JSON语法高亮。
import React from 'react';
import MonacoEditor from 'react-monaco-editor';class JsonEditor extends React.Component {editorDidMount = (editor, monaco) => {// 可选：编辑器挂载后的回调，可以在这里做额外的配置};onChange = (newValue, e) => {// 当编辑器内容改变时的回调try {const json = JSON.parse(newValue);console.log('Parsed JSON:', json);// 这里可以处理解析后的JSON数据，比如进行增删改查操作} catch (error) {console.error('Invalid JSON:', error);}};render() {const code = '{"key": "value"}'; // 初始JSON字符串const options = {selectOnLineNumbers: true,automaticLayout: true,language: 'json',};return (<MonacoEditorwidth="800"height="600"language="json"theme="vs-dark"value={code}options={options}onChange={this.onChange}editorDidMount={this.editorDidMount}/>);}
}export default JsonEditor;
实现增删改查逻辑
上面的代码中，onChange函数会在每次编辑器内容发生变化时被调用。你可以在此处解析JSON并执行增删改查操作。以下是一个简单的示例，展示如何根据用户编辑的内容动态更新JSON数据：
// 假设你已经有了处理JSON数据的函数，例如添加新键值对、删除键、修改值等
function addToJson(jsonData, key, value) {jsonData[key] = value;return jsonData;
}// 在onChange中使用这些函数
onChange = (newValue, e) => {try {let json = JSON.parse(newValue);// 示例：添加一个新的键值对json = addToJson(json, 'newKey', 'newValue');// 将更新后的JSON字符串重新设置给编辑器，形成闭环this.setState({ code: JSON.stringify(json, null, 2) });} catch (error) {console.error('Invalid JSON:', error);}
};
注意：在真实应用中，你可能还需要处理状态管理和错误处理，以及根据业务需求实现更复杂的JSON操作逻辑。上面的代码仅作为一个基础示例，展示了如何接收编辑器内容的变更并尝试将其解析为JSON对象进行操作。
这里提到了
react-monaco-editor这个库，应该是方便monaco-editor在react中使用的，去看了一下对应的github，这个更新时间和版本号，看起来像个半成品，star3.7K
react-monaco-editor github
确认依赖库
以react和monaco-editor为关键词，我又找到了@monaco-editor/react这个库,看起来不错，文档也比较友好
这时我想起来monaco这个单词为什么这么眼熟了，审查元素的时候我看到过，然后重新审查了@designable/react 官方demo的所有下载的js文件：
看来@designable/react 用的就是monaco-editor系列的依赖
深度思考
如果最开始在审查元素的时候多思考一下就好了
)
