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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。