js实现json数据可编辑

news2024/10/7 10:20:44

背景

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

之前在用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.coloradmin.cn/o/1649072.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

《架构风清扬-Java面试系列第29讲》聊聊DelayQueue的使用场景

《架构风清扬-Java面试系列第29讲》聊聊DelayQueue的使用场景

DelayQueue是BlockingQueue接口的一个实现类之一 这个属于基础性问题&#xff0c;老规矩&#xff0c;我们将从使用场景和代码示例来进行讲解 来&#xff0c;思考片刻&#xff0c;给出你的答案 1&#xff0c;使用场景 实现&#xff1a;延迟队列&#xff0c;其中元素只有在其预定…
阅读更多...
图片编辑工具-Gimp

图片编辑工具-Gimp

一、前言 GIMP&#xff08;GNU Image Manipulation Program&#xff09;是一款免费开源的图像编辑软件&#xff0c;具有功能强大和跨平台的特性。 GIMP作为一个图像编辑器&#xff0c;它提供了广泛的图像处理功能&#xff0c;包括但不限于照片修饰、图像合成以及创建艺术作品…
阅读更多...
Day28：ElasticSearch入门、Spring整合ES、开发社区搜索功能

Day28：ElasticSearch入门、Spring整合ES、开发社区搜索功能

ElasticSearch入门 Elasticsearch简介 一个分布式的、Restful风格的搜索引擎。支持对各种类型的数据的检索&#xff08;非结构化的也可以&#xff09;。搜索速度快&#xff0c;可以提供实时的搜索服务。便于水平扩展&#xff08;集群式部署&#xff09;&#xff0c;每秒可以处…
阅读更多...
练习项目后端代码解析注解篇（annotation）

练习项目后端代码解析注解篇（annotation）

前言 本来想从接口处入手的&#xff0c;但是一下看到接口里几十个方法&#xff0c;眼睛有点抗拒&#xff0c;想想还是先看作者写的自定义注解吧。 项目里有三个自定义注解&#xff1a; 分别是AccessLimit注解、OperationLogger注解、VisitLogger注解 AccessLimit注解 这是一…
阅读更多...
为什么下载卡在idealTree:NodeJS: sill idealTree buildDeps

为什么下载卡在idealTree:NodeJS: sill idealTree buildDeps

可能使用的是npm config set registry https://registry.npm.taobao.org而这个镜像文件已经过期了 解决方法如下&#xff1a; 先使用 npm cache clean --force 清除缓存 再切换镜像源 再使用npm config get registry 进行查看是否换源成功 再使用 npm install -g vue/cli 就…
阅读更多...
数据结构算法题day01

数据结构算法题day01

积累基本的写代码方式&#xff0c;其实都大同小异 王道、天勤、算法1800题、中选择 【day01】在带头节点的链表中&#xff0c;删除所有值为X的结点&#xff0c;并释放空间。 假设值为X的结点不唯一&#xff0c;试编写算法一实现上述操作。算法思路&#xff1a; a.首先找到x结点…
阅读更多...
加速乐 js解混淆 __jsl_clearance_s生成

加速乐 js解混淆 __jsl_clearance_s生成

提示&#xff01;本文章仅供学习交流&#xff0c;严禁用于任何商业和非法用途&#xff0c;未经许可禁止转载&#xff0c;禁止任何修改后二次传播&#xff0c;如有侵权&#xff0c;可联系本文作者删除&#xff01; 目标网站 aHR0cHM6Ly9jcmVkaXQuaGVmZWkuZ292LmNuL2NyZWRpdC13…
阅读更多...
nginx 启动，查看，停止

nginx 启动，查看，停止

nginx 启动&#xff0c;查看&#xff0c;停止 启动 start nginx 查看是否启动成功 tasklist | findstr nginx 停止 nginx -s stop 测试配置文件的语法是否有误 nginx -t 重启nginx nginx-s reload
阅读更多...
分享天某云对象存储开发的体验

分享天某云对象存储开发的体验

最近体验了天某云对象存储的功能&#xff0c;作为一名资深开发者&#xff0c;开发体验差强人意&#xff0c;与阿里云存在一定的差距。 首先在开发文档上居然没有基于nodejs的代码示例&#xff0c;只有java,c#,go等的代码示例&#xff0c;虽然有javascript的&#xff0c;但那也只…
阅读更多...
面试经验分享 | 蓝队面试经验

面试经验分享 | 蓝队面试经验

关于蓝队面试经验 1.自我介绍能力 重要性 为什么将自我介绍能力放在第一位&#xff0c;实际上自我介绍才是面试中最重要的一点&#xff0c;因为护网面试并没有确定的题目&#xff0c;让面试官去提问 更多是的和面试官的一种 “交谈” &#xff0c;面试的难易程度也自然就取决…
阅读更多...
Kubernetes 教程：在 Containerd 容器中使用 GPU

Kubernetes 教程：在 Containerd 容器中使用 GPU

原文链接：Kubernetes 教程：在 Containerd 容器中使用 GPU 云原生实验室本文介绍了如何在使用 Containerd 作为运行时的 Kubernetes 集群中使用 GPU 资源。https://fuckcloudnative.io/posts/add-nvidia-gpu-support-to-k8s-with-containerd/ 前两天闹得沸沸扬扬的事件不知道…
阅读更多...
C++ | Leetcode C++题解之第71题简化路径

C++ | Leetcode C++题解之第71题简化路径

题目&#xff1a; 题解&#xff1a; class Solution { public:string simplifyPath(string path) {auto split [](const string& s, char delim) -> vector<string> {vector<string> ans;string cur;for (char ch: s) {if (ch delim) {ans.push_back(mov…
阅读更多...
深度学习之基于YOLOv5目标检测可视化系统

深度学习之基于YOLOv5目标检测可视化系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 随着深度学习技术的快速发展&#xff0c;目标检测在多个领域中的应用日益广泛&#xff0c;包括…
阅读更多...
CMakeLists.txt语法规则：foreach 循环基本用法

CMakeLists.txt语法规则：foreach 循环基本用法

一. 简介 cmake 中除了 if 条件判断之外&#xff0c;还支持循环语句&#xff0c;包括 foreach()循环、while()循环。 本文学习 CMakeLists.txt语法中的循环语句。 CMakeLists.txt语法中 有两种 循环实现方式&#xff1a;foreach循环与 while循环。 二. CMakeLists.txt语法规则…
阅读更多...
【vue3-pbstar-big-screen】一款基于vue3、vite、ts的大屏可视化项目

【vue3-pbstar-big-screen】一款基于vue3、vite、ts的大屏可视化项目

vue3-pbstar-big-screen是一款基于vue3、vite、ts的大屏可视化项目&#xff0c;项目已内置axios、sass&#xff0c;如element、echarts等需要自行安装。 屏幕适配方案 本项目主要通过transform: scale()缩放核心区域实现屏幕适配效果 //html <div class"container-wr…
阅读更多...
编程算法赛

编程算法赛

1偶数累加 2、统计字符的数量 3、计算表达式的值 4、哥德巴赫猜想 5、进制的转换
阅读更多...
【一刷《剑指Offer》】面试题 16：反转链表

【一刷《剑指Offer》】面试题 16：反转链表

力扣对应题目链接&#xff1a;206. 反转链表 - 力扣&#xff08;LeetCode&#xff09; 牛客对应题目链接&#xff1a;反转链表_牛客题霸_牛客网 (nowcoder.com) 核心考点 &#xff1a;链表操作&#xff0c;思维缜密程度。 一、《剑指 Offer》内容 二、分析题目 解题思路&#…
阅读更多...
CoPilot 产品体验：提升 OpenNJet 的控制管理和服务提供能力

CoPilot 产品体验：提升 OpenNJet 的控制管理和服务提供能力

文章目录 前言系统架构介绍CoPilot 配置CoPilot 插件规范 体验 CoPilot 实例CoPilot: Broker 实例CoPilot: Ctrl 实例 开发其他语言编写的 CoPilot目标主要思路具体实现执行 go 程序代码 功能扩展总结 前言 CoPilot 是 OpenNJet 的一个重要组成部分&#xff0c;它在 Master-Wo…
阅读更多...
【QA】Java常见运算符

【QA】Java常见运算符

前言 本文主要讲述Java常见的运算符 运算符的概念 两个基本概念&#xff1a; 运算符&#xff1a;对字面量或者变量进行操作的符号 表达式&#xff1a;用运算符把字面量或者变量连接起来符合java语法的式子就可以称为表达式 示例&#xff1a; int a 10; int b 20; int …
阅读更多...
【一看就懂】UART、IIC、SPI、CAN四种通讯协议对比介绍

【一看就懂】UART、IIC、SPI、CAN四种通讯协议对比介绍

UART、IIC、SPI、CAN四种通信协议对比 通信方式传输线通讯方式标准传输速度使用场景UARTTX(发送数据线)、RX(接收数据线)串行、异步、全双工115.2 kbit/s(常用)计算机和外部设备通信&#xff08;打印机&#xff09;IICSCL(时钟线)、SDA(数据线)串行、同步、半双工100 kbit/s(标…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023