js实现json数据可编辑

背景

项目中有低代码平台，由于历史脏数据和非同步编辑的问题，偶尔会出现数据错乱的问题，希望有一个快捷的方式修改数据

之前在用Formily的时候有注意到@designable/react 里面的json数据编辑功能非常不错如果能应用到项目里就完美了
在这里插入图片描述

@designable/react 官方demo

编码实战

import Editor from '@monaco-editor/react';
import React from 'react';


const INIT_SCHEMA = {
  value: '', // 初始 JSON 内容
  language: 'json', // 设置语言模式为 JSON
  theme: 'vs-dark' // 设置主题为深色
}


const JsonEditor = () => {
  function handleEditorChange(value, event) {
    console.log('here is the current model value:', value);
  }

  return (
    <Editor
      height="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编辑器，它们各有特点和优势：

  1. react-json-editor-ajrm：这是一个基于React的JSON编辑器，它提供了丰富的API来创建可编辑的JSON树结构，并可以很容易地集成到React应用程序中。

  2. react-json-view：这个库也是一个React组件，它可以很方便地将JSON数据渲染成易于阅读和编辑的形式。它支持自动缩进和颜色编码，使得JSON数据的阅读和编辑变得更加直观和容易。

  3. react-json-editor：这个库同样是一个React组件，它提供了一个可编辑的JSON树结构。它支持多种类型的节点，包括对象、数组、字符串、数值和布尔值，并且可以很容易地集成到React应用程序中。

  4. 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数据查看和编辑功能：

  1. JSONEditor

    • 官网: https://json-editor.github.io/json-editor/
    • 特点: 提供了一个强大的JSON schema验证支持的编辑器，用户界面友好，支持多种编辑模式，如表单视图、代码视图等。非常适合用来构建复杂的表单和配置界面。

  2. jsoneditor

    • GitHub: https://github.com/josdejong/jsoneditor
    • 特点: 这是一个可嵌入式的Web组件，支持树状视图和代码视图编辑JSON数据，具有拖拽排序、增删改查等功能，非常适合开发人员调试和非技术人员查看数据。

  3. codemirror

    • 官网: https://codemirror.net/
    • 特点: 虽然Codemirror不仅仅是一个JSON编辑器，但它通过添加相应的mode可以很好地支持JSON语法高亮和基本的编辑功能。对于需要高度定制或集成到现有文本编辑场景的应用来说，这是一个很好的选择。

  4. ACE Editor

    • 官网: https://ace.c9.io/
    • 特点: ACE是一个非常强大的代码编辑器组件，支持多种语言，包括JSON。它提供了实时编辑、语法高亮、自动完成等功能，适合那些需要内嵌代码编辑功能的应用。

  5. 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的增删改，你需要做以下几个步骤：

  1. 安装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', // 设置语言模式为 JSON
        theme: '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;
  1. 在你的 React 组件中使用 JsonEditor 组件：
import React from 'react';
import JsonEditor from './JsonEditor';

// 应用组件
const App = () => {
  // 渲染 JSON 编辑器组件
  return <JsonEditor />;
};

// 导出应用组件
export default App;
  1. 在你的 HTML 文件中引入 Monaco Editor 的 CSS 文件：
---
  1. 在你的 React 组件中，你可以编写一些函数来处理JSON的增删改查操作。例如，我们可以定义一些函数来添加、删除、修改和查询JSON对象：
---
  1. 你可以在你的 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 (
      <MonacoEditor
        width="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系列的依赖

深度思考

如果最开始在审查元素的时候多思考一下就好了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/602032.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

UE灯光：点光和聚光灯的强度单位（cd、lm）

UE灯光：点光和聚光灯的强度单位（cd、lm）

在虚幻引擎&#xff08;UE&#xff09;中&#xff0c;点光和聚光灯的光强使用两种不同的单位进行度量&#xff1a; 坎德拉&#xff08;cd&#xff09;&#xff1a;坎德拉是光强度的国际单位&#xff08;SI单位&#xff09;。它代表光源在特定方向上每单位立体角发出的光通量。…
阅读更多...
Chromium编译指南2024 Windows11篇-获取 Chromium 的源代码（五）

Chromium编译指南2024 Windows11篇-获取 Chromium 的源代码（五）

前言 在《Chromium编译指南2024&#xff08;四&#xff09;》中&#xff0c;我们完成了Git 的初始化配置。 现在&#xff0c;我们将进一步讨论如何获取 Chromium 的源代码&#xff0c;并准备构建所需的文件。 1. 获取Chromium的源代码 在合适的位置准备一个文件夹&#xff…
阅读更多...
47. UE5 RPG 实现角色死亡效果

47. UE5 RPG 实现角色死亡效果

在上一篇文章中&#xff0c;我们实现了敌人受到攻击后会播放受击动画&#xff0c;并且还给角色设置了受击标签。并在角色受击时&#xff0c;在角色身上挂上受击标签&#xff0c;在c里&#xff0c;如果挂载了此标签&#xff0c;速度将降为0 。 受击有了&#xff0c;接下来我们将…
阅读更多...
PDF批量编辑技巧：高效PDF转txt批量处理，轻松管理大量文档

PDF批量编辑技巧：高效PDF转txt批量处理，轻松管理大量文档

随着信息技术的飞速发展&#xff0c;文档管理已成为日常工作中不可或缺的一部分。特别是当我们需要处理大量的PDF文件时&#xff0c;如何高效地进行编辑、转换和管理成为了一个重要的问题。本文将介绍一些PDF批量编辑的技巧&#xff0c;特别是如何将PDF批量转换为txt格式&#…
阅读更多...
C语言——文件描述符、系统调用操作文件

C语言——文件描述符、系统调用操作文件

文件描述符 在Unix-like操作系统中&#xff0c;文件描述符&#xff08;file descriptor&#xff09;是一个用于标识打开文件或I/O设备的整数值。它是对底层文件系统的抽象&#xff0c;用于在应用程序和操作系统之间传递文件信息。 文件描述符是一个非负整数&#xff0c;通常是…
阅读更多...
【MsSQL】数据库基础 库的基本操作

【MsSQL】数据库基础 库的基本操作

目录 一&#xff0c;数据库基础 1&#xff0c;什么是数据库 2&#xff0c;主流的数据库 3&#xff0c;连接服务器 4&#xff0c;服务器&#xff0c;数据库&#xff0c;表关系 5&#xff0c;使用案例 二&#xff0c;库的操作 1&#xff0c;创建数据库 2&#xff0c;创建…
阅读更多...
抖音小店是什么？为什么要去做呢？这几点原因告诉你真相！

抖音小店是什么？为什么要去做呢？这几点原因告诉你真相！

大家好&#xff0c;我是电商小V 抖音小店就是抖音平台进军电商行业的踏板&#xff0c;也是抖音内的电商购物业务&#xff0c;咱们就可以理解成可以在抖音平台上面卖货&#xff0c;和淘宝&#xff0c;多多店铺&#xff0c;线下超市都是一个性质的&#xff0c;但是运营的模式不同…
阅读更多...
虚拟机镜像文件qcow2格式转vmdk

虚拟机镜像文件qcow2格式转vmdk

一、在esxi上虚拟机导出qcow2镜像文件 1、卸载数据盘、网卡 2、登录虚拟机所在物理服务器&#xff0c;查找系统盘名为vm-101-disk-0的文件位置 find / -name "vm-101-disk-0"使用命令导出qcow2镜像&#xff08;进度条走完就完成了&#xff09;&#xff1a; qemu…
阅读更多...
ROS服务器通信

ROS服务器通信

目录 一、角色 二、流程 注意 三、例子描述 四、srv文件 编译配置文件 vscode配置 五、Server.cpp编写例子 编写CMakeList 六、观察server的效果 七、Client编写例子 编写CMakeList 八、观察Client的结果 九、Client优化&#xff08;动态输入&#xff09; 了解argc…
阅读更多...
linux之ssh

linux之ssh

SSH远程连接协议 SSH远程管理 定义 SSH&#xff08;Secure Shell &#xff09;是一种安全通道协议&#xff0c;主要用来实现字符界面的远程的登录、远程复制等功能。 SSH协议对通信双方的数据传输进行了加密处理&#xff0c;其中包括用户登录时输入的用户口令。因此SSH协议具…
阅读更多...
docker容器技术篇：rancher管理平台部署kubernetes集群

docker容器技术篇：rancher管理平台部署kubernetes集群

rancher管理平台部署kubernetes集群 Rancher 是一个 Kubernetes 管理工具&#xff0c;让你能在任何地方和任何提供商上部署和运行集群。 Rancher 可以创建来自 Kubernetes 托管服务提供商的集群&#xff0c;创建节点并安装 Kubernetes&#xff0c;或者导入在任何地方运行的现…
阅读更多...
CAN报文总线仲裁机制

CAN报文总线仲裁机制

对于标准帧而言&#xff0c;有11位的标识符&#xff0c;也就是报文的ID。报文的ID值越小&#xff0c;优先级越高。如果有两个以上的ECU同时发送CAN报文&#xff0c;ID值小的报文可以发送成功。总线仲裁机制是一种非破坏性仲裁&#xff0c;是一种既不会造成已发送数据的延迟&…
阅读更多...
矾液回收矾树脂

矾液回收矾树脂

五氧化二钒溶液提取矾树脂A-654的过程&#xff0c;是一个涉及五氧化二钒提纯的重要步骤。我们将详细介绍这一提取过程。 首先&#xff0c;我们需要了解五氧化二钒和净化矾树脂A-654的基本性质。五氧化二钒是一种无机化合物&#xff0c; 净化矾树脂A-654 是一款加载了复杂的多胺…
阅读更多...
el-tabs 借助 sortablejs 实现 tab 拖拽功能

el-tabs 借助 sortablejs 实现 tab 拖拽功能

sortable.js 是一款 js 拖拽库&#xff0c;支持ie9及以上版本ie浏览器和现代浏览器&#xff0c;也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库&#xff0c;如Bootstrap、Element UI。你可以用来拖拽div、table等元素…
阅读更多...
终端安全管理措施有哪些？好用终端安全管理软件推荐（建议收藏）

终端安全管理措施有哪些？好用终端安全管理软件推荐（建议收藏）

在当今数字化时代&#xff0c;信息安全已成为企业运营不可或缺的一部分。其中&#xff0c;终端安全为您详细介绍&#xff0c;并推荐几款好用的终端安全管理软件&#xff0c;帮助您更好地保护企业信息安全。管理是确保企业信息安全的重要环节。那么&#xff0c;终端安全管理措施…
阅读更多...
基于 Wireshark 分析 ICMP 协议

基于 Wireshark 分析 ICMP 协议

一、ICMP 协议 ICMP&#xff08;Internet Control Message Protocol&#xff09;即互联网控制报文协议&#xff0c;是TCP/IP协议簇的一个子协议。它主要用于在IP主机、路由器之间传递控制消息&#xff0c;这些消息涉及网络是否通畅、主机是否可达、路由是否可用等关于网络本身…
阅读更多...
Quartz怎么简单创建一个定时执行的任务

Quartz怎么简单创建一个定时执行的任务

1.安装Quartz包 2.编写Job任务 继承 IJob编辑自定义任务 3.调用job&#xff0c;以指定时间策略执行 定时600s执行一次 StdSchedulerFactory factory new StdSchedulerFactory(); IScheduler scheduler await factory.GetScheduler(); await scheduler.Start();// 定义…
阅读更多...
2024年营销技术远景图发布：14,106种营销技术产品（同比增长27.8%）

2024年营销技术远景图发布：14,106种营销技术产品（同比增长27.8%）

每年五月的第一个星期二&#xff08;美国东部时间&#xff09;&#xff0c;Scott Brinker设定为Martech Day&#xff0c;以此来庆祝营销技术行业和所有有才华的营销技术专家和营销运营专业人士的工作&#xff0c;「为你们在开拓这片荒野所做的一切而欢呼&#xff01;」 同时&a…
阅读更多...
解决硬盘灯不停的闪硬盘不停的读cpu占用率高的Microsoft Windows Search

解决硬盘灯不停的闪硬盘不停的读cpu占用率高的Microsoft Windows Search

可能你发现了&#xff0c;你的硬盘灯一直亮着&#xff0c;为什么&#xff1f;&#xff1f;可能你发现了&#xff0c;你的CPU占用率一直居高不下&#xff0c;为什么&#xff1f;也许就是因为Microsoft Windows Search这个进程 一、windowsSearch的罪证 SearchIndexer和Search…
阅读更多...
GWO-CNN|多输入回归预测|灰狼算法优化卷积神经网络|Matlab

GWO-CNN|多输入回归预测|灰狼算法优化卷积神经网络|Matlab

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、算法介绍&#xff1a; 四、完整程序下载&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matlab平台编译&am…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站