推荐一款好用的Web端JSON在线编辑器svelte-jsoneditor
JSON编辑器
今天推荐一款Web前端好用的JSON编辑器,适用于 Chrome, Firefox, Safari, Opera, Edge, Internet Explorer 11主流浏览器,并且可以使用Javascript、Vue、React开发。
支持功能:
- JSON编辑
- JSON格式化
- 树形结构
- 收起展开
- 搜索
- 上一步和下一步
- 对齐文本
- 复制粘贴
- 显示行号
JSON Editor简介
JSON Editor仓库地址,拥有9.7k+的 star。
在线JSON解析工具就是使用了JSON Editor的功能。
官方介绍:
JSON Editor is a web-based tool to view, edit, format, and validate JSON. It has various modes such as a tree editor, a code editor, and a plain text editor.
The editor can be used as a component in your own web application. The library can be loaded as CommonJS module, AMD module, or as a regular javascript file.
Supported browsers: Chrome, Firefox, Safari, Opera, Edge, Internet Explorer 11.
svelte-jsoneditor简介
svelte-jsoneditor是JSON Editor项目的继承者,可以直接使用。
svelte-jsoneditor仓库地址
官方介绍:
A web-based tool to view, edit, format, transform, and validate JSON
The library is written with Svelte, but can be used in any framework (React, Vue, Angular, plain JavaScript)
集成使用
先看一下效果图:
code模式:
树形模式:
安装依赖
npm install svelte-jsoneditor
代码示例
下面是Vue代码实现,其他框架可以查看官网文档。
<template><div class="login"><div style="width: 40%; height: 50%; margin: 0 auto" ref="editor"></div></div>
</template><script>
// 引入组件
import {JSONEditor} from "svelte-jsoneditor";
export default {mounted() {let manifest = `{"platformId": "","supports": ["android","ios"],"statusbar": {"immersed": true,"style": "light"}}`// 将json字符串转成对象manifest = JSON.parse(manifest);// 设置contentlet content = {text: undefined,json: manifest}// 创建对象this.editor = new JSONEditor({target: this.$refs["editor"],props: { // 设置属性content: content,mode: "code",mainMenuBar: true,navigationBar: true,indentation: 4,tabSize: 4,escapeControlCharacters: false,onChange: (updatedContent, previousContent, patchResult) => {console.log('onChange', updatedContent, previousContent, patchResult)content = updatedContent}}});},beforeUnmount() {// 销毁对象,释放内存this.editor.destroy();this.editor = null;}
}
</script><style lang="less" scoped>
/*去除右侧外链文字*/
/deep/ .jse-powered-by.svelte-1yyupsl {display: none;
}
</style>
参数属性
svelte-jsoneditor
提供了很多的属性和方法可以对编辑器进行配置:
这里只截图一部分,其他部分还需要去官网查看。
使用技巧
如果想要对编辑器样式进行定制,需要F12进入调试模式,然后找到相应的样式进行改造。
例如:需要去掉工具栏右侧的外链。
在Vue代码的样式中需要重写它的class:
<style lang="less" scoped>
/*去除右侧外链文字*/
/deep/ .jse-powered-by.svelte-1yyupsl {display: none;
}
</style>
今天的分享就到这里,希望能够帮助大家,JSON Editor的其他功能还需要大家去研究探索。
推荐一款好用的Web端JSON在线编辑器svelte-jsoneditor相关推荐
- 【新项目开发】vue3+ts+elementPlus+ffmpegjs开发纯web端的视频编辑器
新项目开发的流程 当在项目中使用新技术时,我们应该首先进行调研,了解其特点和使用方法.在实现功能时,我们可以采用最简单的方式,而不必过于关注项目的设计和结构.一旦掌握了新技术,我们可以根据其API属性 ...
- 推荐几款精致的前端web UI框架,建议收藏
如果你在找Web UI框架,不妨看看百度的NoahV框架:https://github.com/baidu/NoahV 主要包含如下特性: 1.上手简单,提供常用的各类组件,快速开始前端开发 2.导航 ...
- 推荐10款优秀的JavaScript Web UI库 框架和套件
在进行Web开发时,并非所有的库都适合你的项目,但真正开发的时候,你任然需要依赖一款UI框架.特别在你时间紧迫的时候,它是你忠实的朋友. 他们都是些广泛使用包含不同语言实现的WEB UI框架.今天我就 ...
- 推荐一款自己常用的web前端框架
不知道现在大家使用的web前端框架都是什么?也许有人和我一样会想到jQuery,但今天给大家介绍的确实另外一款比较受欢迎的web前端框架,把我用的体验和大家分享一下,希望这款web前端框架能够被大家认 ...
- 网页前台推荐一款配色软件:Adobe kuler(在线升级,ADOBE官方产品)
首先安装AdobeAIRInstaller.exe文件(安装后才能读取.air文件) 下载地址:http://airdownload.adobe.com/air/win/download/latest ...
- WEB端代码文本编辑器ACE的使用指南(附代码)
快速导航 一.ACE的介绍 二.快速开始 1. package.json引入ace-builds 2. vue页面引入相应script 3. 初始化ace编辑器 4.展示效果 三.进阶使用 1. 代码 ...
- 良心推荐,一款PDF转JPG图片的免费在线工具
PDF和JPG文档这两种格式的文件,在工作中很常遇到,有时候由于工作的需要,在对文本.图片进行处理时,可能会将PDF文件转化为JPG格式.那该如何转换?今天小编和大家分享一种方法,无需软件直接网页打开 ...
- 推荐两款可以将图片无损放大的在线工具
文章目录 一.waifu2x 网站预览 传送地址 二.BigJPG 网站预览 传送地址 好不容易找到合适的图片素材但尺寸太小?那这里的工具正好适合你,能把你的小图放大几倍都不模糊. 一.waifu2x ...
- 推荐几款Web性能测试工具
专业的软件测试工程师至少要掌握一到两种测试工具,而作为普通软件开发者,或多或少掌握一些测试方法和技巧.随着用户对科技产品用户体验度的上升,产品发布前的测试工作变得尤为重要. 工欲善其事必先利其器,下面 ...
- 宝塔面板+轻松部署一款二次元的Web多人在线网络聊天系统fiora聊天室
前言 Fiora是一款偏二次元的Web多人在线聊天应用,是使用Node.js.Mongodb.Socket.io和React编写的,使用起来简洁.方便,在这里使用宝塔面板+Fiora安装教程分享给大家 ...
最新文章
- 场效应晶体管的几点使用知识!
- YourSQLDba的翻译(十一)
- (0093)iOS开发自己账号跑真机报错:conflicting provisioning
- sql之left join、right join、inner join的区别,连接自己时的查询结果测试
- 快速搞懂监控、链路追踪、日志三者的区别
- mysql链接丢失_mysql 连接丢失错误解决(转载)
- hive udaf_谈笑间学会大数据初识Hive
- html div图片定位,html中div定位练习
- java程序开发个人笔记_Java程序开发入门笔记
- POJ 1860 Currency Exchange 最短路+负环
- C#类对象转换成XML
- excel二极管伏安特性曲线_【电子知识点】半导体二极管amp;三极管
- ncbi查找目的基因序列_献给初学者:如何使用 NCBI 查找基因序列、mRNA、Promoter...
- 汽车智能电气技术分析
- python 数据集中随机选择作为测试集、验证集
- 夜神模拟器Nox.exe支持命令行参数列表
- 支付宝支付 62009
- int和字符串的类型转换
- python里load什么意思_【python】json中load和loads区别
- layui数据表格显示序号