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', // 设置语言模式为 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编辑器，它们各有特点和优势：

  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', // 设置语言模式为 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;
  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 (<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系列的依赖

深度思考

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

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

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

相关文章

【数据结构】二叉树知识点详解

【数据结构】二叉树知识点详解

树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合有一个特殊的结点&#xff0c;称为根结点&#xff0c;根节点没有前驱结点除根节点外&#xff0c;其余结点被分成M(M>0)个互不相交的集合T1、T2、…
阅读更多...
【贪心算法】单源最短路径Python实现

【贪心算法】单源最短路径Python实现

文章目录 [toc]问题描述Dijkstra算法Dijkstra算法的正确性贪心选择性质最优子结构性质 Dijkstra算法应用示例Python实现时间复杂性 问题描述 给定一个带权有向图 G ( V , E ) G (V , E) G(V,E)&#xff0c;其中每条边的权是非负实数&#xff0c;给定 V V V中的一个顶点&…
阅读更多...
【busybox记录】【shell指令】expand

【busybox记录】【shell指令】expand

目录 内容来源&#xff1a; 【GUN】【expand】指令介绍 【busybox】【expand】指令介绍 【linux】【expand】指令介绍 使用示例&#xff1a; 把制表符转化为空格 - 默认输出 把制表符转化为空格 - 修改制表符转空格的个数 把制表符转化为空格 - 修改制表符转空格的个数…
阅读更多...
四川易点慧电子商务抖音小店：潜力无限的新零售风口

四川易点慧电子商务抖音小店：潜力无限的新零售风口

在当今数字化浪潮中&#xff0c;电子商务已经成为推动经济发展的重要引擎。四川易点慧电子商务有限公司凭借其敏锐的市场洞察力和创新精神&#xff0c;成功在抖音小店这一新兴平台上开辟出一片新天地。本文将探讨四川易点慧电子商务抖音小店的潜力及其在新零售领域的影响力。 一…
阅读更多...
多C段的美国站群服务器有什么用途?

多C段的美国站群服务器有什么用途?

多C段的美国站群服务器有什么用途? 多C段的美国站群服务器是一种常见的网络运营策略&#xff0c;其用途主要体现在以下几个方面&#xff1a; 多C段的美国站群服务器有什么用途? 1. 提高站点排名和流量 部署多个站点在不同的C段IP地址上&#xff0c;可以通过不同的IP地址发布…
阅读更多...
OpenGrok使用

OpenGrok使用

以前都是用的find&#xff0c;或者VScode里面的浏览&#xff0c;但是到了Android这个就不行了&#xff0c;代码太多了。都在用OpenGrok&#xff0c;所以俺也用一下。 这里有两个步骤&#xff0c;一个是安装&#xff0c;是一个使用。 1 安装 大概看了一下&#xff0c;安装是to…
阅读更多...
关于Clion开发stm32printf重定向问题简单解决问题方法

关于Clion开发stm32printf重定向问题简单解决问题方法

title: 关于Clion开发stm32printf重定向问题简单解决问题方法 tags: STM32Clion 参考来源1 这是另一种方法 在printf 重定向的基础上加上 一句 setbuf(stdout,NULL); 参考来源2 自己写的笔记啦
阅读更多...
小语言模型的潜力

小语言模型的潜力

想象一下这样一个世界&#xff1a;智能助手不在云端&#xff0c;而是在你的手机上&#xff0c;无缝了解你的需求并以闪电般的速度做出响应。这不是科幻小说&#xff0c;而是科幻小说。这是小语​​言模型 (SLM) 的希望&#xff0c;这是一个快速发展的领域&#xff0c;有可能改变…
阅读更多...
罗德与施瓦茨 SMC100A信号发生器9kHz至3.2 GHz

罗德与施瓦茨 SMC100A信号发生器9kHz至3.2 GHz

罗德与施瓦茨 SMC100A信号发生器&#xff0c;9 kHz - 3.2 GHz 罗德与施瓦茨 SMC100A 以极具吸引力的价格提供出色的信号质量。它覆盖的频率范围为 9 kHz 至 1.1 GHz 或 3.2 GHz。输出功率为典型值。> 17 dBm。所有重要功能&#xff08;AM/FM/φM/脉冲调制&#xff09;均已集…
阅读更多...
代码随想录算法训练营第六十天| 647. 回文子串，516.最长回文子序列，动态规划总结篇

代码随想录算法训练营第六十天| 647. 回文子串，516.最长回文子序列，动态规划总结篇

题目与题解 参考资料&#xff1a;动态规划总结篇 647. 回文子串 题目链接&#xff1a;647. 回文子串 代码随想录题解&#xff1a;647. 回文子串 视频讲解&#xff1a;动态规划&#xff0c;字符串性质决定了DP数组的定义 | LeetCode&#xff1a;647.回文子串_哔哩哔哩_bilibili …
阅读更多...
【busybox记录】【shell指令】unexpand

【busybox记录】【shell指令】unexpand

目录 内容来源&#xff1a; 【GUN】【unexpand】指令介绍 【busybox】【unexpand】指令介绍 【linux】【unexpand】指令介绍 使用示例&#xff1a; 空格转化成制表符 - 默认输出 空格转化成制表符 - 转换所有的空格 空格转化成制表符 - 指定制表位 常用组合指令&#…
阅读更多...
构造照亮世界——快速沃尔什变换 (FWT)

构造照亮世界——快速沃尔什变换 (FWT)

博客园 我的博客 快速沃尔什变换解决的卷积问题 快速沃尔什变换&#xff08;FWT&#xff09;是解决这样一类卷积问题&#xff1a; ci∑ij⊙kajbkc_i\sum_{ij\odot k}a_jb_k ci​ij⊙k∑​aj​bk​其中&#xff0c;⊙\odot⊙ 是位运算的一种。举个例子&#xff0c;给定数列 a,…
阅读更多...
小米手机miui14 android chrome如何取消网页自动打开app

小米手机miui14 android chrome如何取消网页自动打开app

搜索媒体打开应用 选择你要阻止打开的app&#xff0c;以github为例 取消勾选打开支持的链接。 参考&#xff1a;https://www.reddit.com/r/chrome/s/JBsGkZDkRZ
阅读更多...
创建禁止操作区域并且添加水印

创建禁止操作区域并且添加水印

css 设置 &#xff1a; 引用换成自己就好 .overlay {z-index: 1000;cursor: none; /*设置为不可点击*/user-select: none; /*设置为不可选择*/contenteditable: false; /*设置为不可编辑*/draggable: false; /*设置为不可拖动*/position: absolute;top: 0;left: 0;width: 100…
阅读更多...
git bash退出vim编译模式

git bash退出vim编译模式

解决方法&#xff1a; 1.按esc键&#xff08;回到命令模式&#xff09; 此时是没有分号让我们在后面输入命令的 2.按shift键: 3.再输入&#xff1a;wq&#xff0c;并按enter键 此时我们发现又回到git bash窗口 希望对大家有所帮助&#xff01;
阅读更多...
一览函数式编程

一览函数式编程

文章目录 一、 什么是函数式编程1.1 编程范式1.1.1 命令式编程(Imperative Programming)范式1.1.2 声明式编程(Declarative Programming)范式1.1.3 函数式编程(Functional Programming)范式1.1.4 面向对象编程(Object-Oriented Programming)范式1.1.5 元编程(Metaprogramming)范…
阅读更多...
(1day)致远M3 log 敏感信息泄露漏洞(Session)复现

(1day)致远M3 log 敏感信息泄露漏洞(Session)复现

前言 系统学习web漏洞挖掘以及项目实战也有一段时间了,发现在漏洞挖掘过程中难免会碰到一些历史漏洞,来帮助自己或是提高自己挖洞和及时发现漏洞效率,于是开始创建这个专栏,对第一时间发现的1day以及历史漏洞进行复现,来让自己更加熟悉漏洞类型以及历史漏洞,方便自己在后续的项…
阅读更多...
商家制作微信小程序有什么好处？微信小程序的制作有哪些步骤和流程

商家制作微信小程序有什么好处？微信小程序的制作有哪些步骤和流程

微信小程序全面指南 微信小程序是微信生态系统中一项革命性的功能&#xff0c;为希望与庞大的微信用户群体互动的企业提供了独特的融合便捷性和功能性的体验。本全面指南深入探讨了微信小程序的世界&#xff0c;强调了其重要性、工作原理以及实际用例&#xff0c;特别是针对企…
阅读更多...
开发组合php+mysql 人才招聘小程序源码搭建 招聘平台系统源码+详细图文搭建部署教程

开发组合php+mysql 人才招聘小程序源码搭建 招聘平台系统源码+详细图文搭建部署教程

随着互联网的快速发展&#xff0c;传统的招聘方式已经不能满足企业和求职者的需求。为了提高招聘效率&#xff0c;降低招聘成本&#xff0c;越来越多的人开始关注人才招聘小程序、在线招聘平台。分享一个人才招聘小程序源码及搭建&#xff0c;让招聘更加高效便捷。系统是运营级…
阅读更多...
windows安装ElasticSearch以及踩坑

windows安装ElasticSearch以及踩坑

1.下载 elasticsearch地址&#xff1a;Past Releases of Elastic Stack Software | Elastichttps://www.elastic.co/cn/downloads/past-releases#elasticsearch IK分析器地址&#xff1a;infinilabs/analysis-ik: &#x1f68c; The IK Analysis plugin integrates Lucene IK…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023