svelte jsoneditor
v2.3.3
เครื่องมือบนเว็บในการดูแก้ไขรูปแบบการแปลงและตรวจสอบ JSON
ลองใช้: https://jsoneditoronline.org
ห้องสมุดเขียนด้วย svelte แต่สามารถใช้ในจาวาสคริปต์ธรรมดาได้เช่นกันและในกรอบใด ๆ (solidjs, react, vue, angular ฯลฯ ) ต้องใช้เบราว์เซอร์ตั้งแต่เดือนมีนาคม 2565 หรือใหม่กว่า
สำหรับการใช้งานในโครงการ svelte:
npm install svelte-jsoneditor
สำหรับการใช้งานในวานิลลาจาวาสคริปต์หรือเฟรมเวิร์กเช่น SolidJs, React, Vue, Angular, ฯลฯ :
npm install vanilla-jsoneditor
สร้าง jsoneditor ด้วย bind:json :
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = {
text : undefined , // can be used to pass a stringified JSON document instead
json : {
array : [ 1 , 2 , 3 ] ,
boolean : true ,
color : '#82b92c' ,
null : null ,
number : 123 ,
object : { a : 'b' , c : 'd' } ,
string : 'Hello World'
}
}
</ script >
< div >
< JSONEditor bind:content />
</ div >หรือการผูกทางเดียว:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = {
text : undefined , // can be used to pass a stringified JSON document instead
json : {
greeting : 'Hello World'
}
}
function handleChange ( updatedContent , previousContent , { contentErrors , patchResult } ) {
// content is an object { json: unknown } | { text: string }
console . log ( 'onChange: ' , { updatedContent , previousContent , contentErrors , patchResult } )
content = updatedContent
}
</ script >
< div >
< JSONEditor {content} onChange =" {handleChange} " />
</ div > ห้องสมุดจัดเตรียมชุดวานิลลาของตัวแก้ไขผ่านทาง NPM Library vanilla-jsoneditor (แทนที่จะเป็น svelte-jsoneditor ) ซึ่งสามารถใช้ในสภาพแวดล้อมและกรอบของเบราว์เซอร์ใด ๆ ในเฟรมเวิร์กเช่น React, Vue หรือ Angular คุณจะต้องเขียนโค้ด wrapper รอบอินเทอร์เฟซคลาส
หากคุณมีการตั้งค่าสำหรับโครงการของคุณด้วย Bundler (เช่น Vite, Rollup หรือ Webpack) ควรใช้การนำเข้า ES เริ่มต้น:
// for use in a React, Vue, or Angular project
import { JSONEditor } from 'vanilla-jsoneditor'หากคุณต้องการใช้ไลบรารีตรงในเบราว์เซอร์ให้ใช้ชุดข้อมูล ES แบบสแตนด์อโลนที่ให้มา:
// for use directly in the browser
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js' มัดแบบสแตนด์อโลนมีการพึ่งพาทั้งหมดของ vanilla-jsoneditor เช่น lodash-es และ Ajv หากคุณใช้การพึ่งพาเหล่านี้ในโครงการของคุณด้วยเช่นกันหมายความว่าพวกเขาจะรวมสองครั้งในเว็บแอปพลิเคชันของคุณซึ่งนำไปสู่ขนาดแอปพลิเคชันขนาดใหญ่โดยไม่จำเป็น โดยทั่วไปแล้วมันจะดีกว่าที่จะใช้ import { createJSONEditor } from 'vanilla-jsoneditor' แทนที่จะเป็นชุดรวมแบบสแตนด์อโลนเพื่อให้สามารถนำกลับมาใช้ใหม่ได้
ตัวอย่างเบราว์เซอร์กำลังโหลดโมดูล ES แบบสแตนด์อโลน:
<!doctype html >
< html lang =" en " >
< head >
< title > JSONEditor </ title >
</ head >
< body >
< div id =" jsoneditor " > </ div >
< script type =" module " >
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'
// Or use it through a CDN (not recommended for use in production):
// import { createJSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/standalone.js'
// import { createJSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/standalone.js'
let content = {
text : undefined ,
json : {
greeting : 'Hello World'
}
}
const editor = createJSONEditor ( {
target : document . getElementById ( 'jsoneditor' ) ,
props : {
content ,
onChange : ( updatedContent , previousContent , { contentErrors , patchResult } ) => {
// content is an object { json: unknown } | { text: string }
console . log ( 'onChange' , { updatedContent , previousContent , contentErrors , patchResult } )
content = updatedContent
}
}
} )
// use methods get, set, update, and onChange to get data in or out of the editor.
// Use updateProps to update properties.
</ script >
</ body >
</ html >เพื่อให้ง่ายต่อการใช้ห้องสมุดในกรอบที่คุณเลือกคุณสามารถใช้ไลบรารี wrapper:
องค์ประกอบ svelte:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = { text : '[1,2,3]' }
</ script >
< div >
< JSONEditor {content} />
</ div >คลาส Javasscript:
import { createJSONEditor } from 'vanilla-jsoneditor' // or 'vanilla-jsoneditor/standalone.js'
const content = { text : '[1,2,3]' }
const editor = createJSONEditor ( {
target : document . getElementById ( 'jsoneditor' ) ,
props : {
content ,
onChange : ( updatedContent , previousContent , { contentErrors , patchResult } ) => {
// content is an object { json: unknown } | { text: string }
console . log ( 'onChange' , { updatedContent , previousContent , contentErrors , patchResult } )
}
}
} ) คุณสมบัติเช่น content และ mode จะถูกส่งผ่านเป็นแอตทริบิวต์ไปยังส่วนประกอบ svelte เช่น <JSONEditor {content} {mode} /> หรือผ่าน props ในกรณีของฟังก์ชั่นโรงงานวานิลลา JS: createJSONEditor({ target, props: { content, mode }
content: Content ผ่านเนื้อหา JSON ที่จะแสดงผลใน JsonEditor Content เป็นวัตถุที่มีคุณสมบัติ json (เอกสาร JSON ที่แยกวิเคราะห์) หรือ text (เอกสาร stringified JSON) ต้องกำหนดคุณสมบัติเพียงหนึ่งในสองคุณสมบัติ คุณสามารถส่งผ่านเนื้อหาทั้งสองประเภทไปยังตัวแก้ไขที่เป็นอิสระในโหมดใด คุณสามารถใช้การผูกสองทางผ่าน bind:content
สำคัญ: ทำการเปลี่ยนแปลง
contentที่ไม่เปลี่ยนรูป การเปลี่ยนแปลงที่ไม่แน่นอนจะทำให้ประวัติศาสตร์และเนื้อหาแสดงผล ดูส่วนที่ไม่สามารถเปลี่ยนแปลงได้
selection: JSONEditorSelection | undefined เนื้อหาที่เลือกในปัจจุบัน คุณสามารถใช้การผูกสองทางโดยใช้ bind:selection โหมด tree รองรับ MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection หรือ AfterSelection โหมด table รองรับ ValueSelection และโหมด text รองรับ TextSelection. -
mode: 'tree' | 'text' | 'table' เปิดโหมดตัวแก้ไขในโหมด 'tree' (ค่าเริ่มต้น), โหมด 'table' หรือโหมด 'text' (เดิมคือโหมด code )
mainMenuBar: boolean แสดงแถบเมนูหลัก ค่าเริ่มต้นเป็น true
navigationBar: boolean แสดงแถบการนำทางด้วยที่คุณสามารถดูเส้นทางที่เลือกและนำทางผ่านเอกสารของคุณจากที่นั่น ค่าเริ่มต้นเป็น true
statusBar: boolean แสดงแถบสถานะที่ด้านล่างของตัวแก้ไข 'text' แสดงข้อมูลเกี่ยวกับตำแหน่งเคอร์เซอร์และเนื้อหาที่เลือก ค่าเริ่มต้นเป็น true
askToFormat: boolean เมื่อ true (เริ่มต้น) ผู้ใช้จะถูกถามว่าเขา/เธอต้องการจัดรูปแบบเอกสาร JSON เมื่อมีการโหลดเอกสารขนาดกะทัดรัดหรือวางในโหมด 'text' ใช้ได้เฉพาะกับโหมด 'text'
readOnly: boolean เปิดตัวแก้ไขในโหมดอ่านอย่างเดียว: ไม่สามารถเปลี่ยนแปลงได้ปุ่มที่ไม่เกี่ยวข้องจะถูกซ่อนไว้จากเมนูและไม่เปิดใช้งานเมนูบริบท ค่าเริ่มต้นเป็น false
indentation: number | string จำนวนช่องว่างที่ใช้สำหรับการเยื้องเมื่อ stringifying JSON หรือสตริงที่จะใช้เป็นการเยื้องเช่น 't' เพื่อใช้แท็บเป็นการเยื้องหรือ ' ' เพื่อใช้ 4 ช่องว่าง (ซึ่งเทียบเท่ากับการกำหนดค่า indentation: 4 ) ดูเพิ่มเติม tabSize คุณสมบัติ
tabSize: number เมื่อการเยื้องถูกกำหนดค่าเป็นอักขระแท็บ ( indentation: 't' ) tabSize จะกำหนดค่าว่าอักขระแท็บมีขนาดใหญ่ ค่าเริ่มต้นคือ 4 ใช้ได้เฉพาะกับโหมด text
escapeControlCharacters: boolean เท็จโดยค่าเริ่มต้น เมื่อ true อักขระควบคุมเช่น Newline และ Tab จะแสดงเป็นอักขระที่หลบหนี n และ t ใช้เฉพาะโหมด 'tree' ในอักขระการควบคุมโหมด 'text' จะถูกหลบหนีเสมอ
escapeUnicodeCharacters: boolean เท็จโดยค่าเริ่มต้น เมื่อ true ตัวละคร Unicode เช่น☎และ? จะถูกหลบหนีเช่น u260e และ ud83dude00
flattenColumns: boolean จริงโดยค่าเริ่มต้น ใช้ได้เฉพาะกับโหมด 'table' เมื่อคุณสมบัติวัตถุที่ซ้อน true จะแสดงแต่ละในคอลัมน์ของตัวเองโดยมีเส้นทางซ้อนกันเป็นชื่อคอลัมน์ เมื่อวัตถุที่เป็น false จะมีการแสดงผลแบบอินไลน์และดับเบิลคลิกที่พวกเขาจะเปิดพวกเขาในป๊อปอัป
validator : function ( json : unknown ) : ValidationError [ ]ตรวจสอบเอกสาร JSON ตัวอย่างเช่นใช้ตัวตรวจสอบความถูกต้องของ JSON Schema ในตัวขับเคลื่อนโดย AJV:
import { createAjvValidator } from 'svelte-jsoneditor'
const validator = createAjvValidator ( { schema , schemaDefinitions } ) parser: JSON = JSON กำหนดค่าตัวแยกวิเคราะห์ JSON ที่กำหนดเองเช่น lossless-json โดยค่าเริ่มต้นใช้ตัวแยกวิเคราะห์ JSON ดั้งเดิมของ JavaScript อินเทอร์เฟซ JSON เป็นวัตถุที่มีฟังก์ชั่น parse และ stringify ตัวอย่างเช่น:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
import { parse , stringify } from 'lossless-json'
const LosslessJSONParser = { parse , stringify }
let content = { text : '[1,2,3]' }
</ script >
< div >
< JSONEditor {content} parser =" {LosslessJSONParser} " />
</ div > validationParser: JSONParser = JSON ใช้ได้เฉพาะเมื่อมี validator เท่านั้น นี่เป็นเช่นเดียวกับ parser ยกเว้นว่าตัวแยกวิเคราะห์นี้ใช้เพื่อแยกวิเคราะห์ข้อมูลก่อนที่จะส่งไปยังตัวตรวจสอบ กำหนดค่าตัวแยกวิเคราะห์ JSON แบบกำหนดเองที่ใช้ในการแยกวิเคราะห์ JSON ก่อนที่จะส่งผ่านไปยัง validator โดยค่าเริ่มต้นใช้ตัวแยกวิเคราะห์ JSON ในตัว เมื่อผ่าน validationParser ที่กำหนดเองตรวจสอบให้แน่ใจว่าเอาต์พุตของตัวแยกวิเคราะห์ได้รับการสนับสนุนโดย validator ที่กำหนดค่าไว้ ดังนั้นเมื่อ validationParser สามารถส่งออกตัวเลข bigint หรือประเภทตัวเลขอื่น ๆ validator จะต้องรองรับสิ่งนั้นด้วย ในโหมดต้นไม้เมื่อ parser ไม่เท่ากับ validationParser เอกสาร JSON จะถูกแปลงก่อนที่จะถูกส่งผ่านไปยัง validator ผ่าน validationParser.parse(parser.stringify(json))
pathParser: JSONPathParser วัตถุเสริมที่มีวิธีการแยกวิเคราะห์และสตริงเพื่อแยกวิเคราะห์และ stringify JSONPath ซึ่งเป็นอาร์เรย์ที่มีชื่อคุณสมบัติ pathParser ใช้ในตัวแก้ไขเส้นทางในแถบการนำทางซึ่งเปิดโดยคลิกที่ปุ่มแก้ไขทางด้านขวาของแถบนำทาง ฟังก์ชั่น pathParser.parse ได้รับอนุญาตให้โยนข้อผิดพลาดเมื่ออินพุตไม่ถูกต้อง โดยค่าเริ่มต้นมีการใช้สัญลักษณ์เส้นทาง JSON ซึ่งดูเหมือน $.data[2].nested.property อีกทางเลือกหนึ่งเป็นไปได้ที่จะใช้ตัวอย่างสัญลักษณ์ตัวชี้ JSON เช่น /data/2/nested/property หรือสิ่งที่กำหนดเอง ฟังก์ชั่นผู้ช่วยที่เกี่ยวข้อง: parseJSONPath และ stringifyJSONPath , parseJSONPointer และ compileJSONPointer
onError ( err : Error )การโทรกลับถูกยิงเมื่อเกิดข้อผิดพลาด การใช้งานเริ่มต้นคือการบันทึกข้อผิดพลาดในคอนโซลและแสดงข้อความแจ้งเตือนอย่างง่ายต่อผู้ใช้
onChange ( content : Content , previousContent : Content , changeStatus : { contentErrors : ContentErrors | undefined , patchResult : JSONPatchResult | undefined } ) การโทรกลับซึ่งเรียกใช้ในทุกการเปลี่ยนแปลงของเนื้อหาที่ทำโดยผู้ใช้จากภายในตัวแก้ไข มันจะไม่กระตุ้นการเปลี่ยนแปลงที่ใช้เป็นโปรแกรมผ่านวิธีการเช่น .set() , .update() หรือ .patch()
content ที่ส่งคืนบางครั้งเป็นประเภท { json } และบางครั้งของประเภท { text } สิ่งใดที่ส่งคืนทั้งสองขึ้นอยู่กับโหมดของตัวแก้ไขการเปลี่ยนแปลงที่ใช้และสถานะของเอกสาร (ถูกต้องไม่ถูกต้องว่างเปล่า) โปรดทราบว่า { text } สามารถมี JSON ไม่ถูกต้อง: ในขณะที่พิมพ์ในโหมด text เอกสาร JSON จะไม่ถูกต้องชั่วคราวเช่นเมื่อผู้ใช้พิมพ์สตริงใหม่ พารามิเตอร์ patchResult จะถูกส่งคืนจากการเปลี่ยนแปลงที่สามารถแสดงเป็นเอกสารแพทช์ JSON เท่านั้นและตัวอย่างเช่นเมื่อพิมพ์อย่างอิสระในโหมด text
onChangeMode ( mode : 'tree' | 'text' | 'table' )เรียกใช้เมื่อโหมดเปลี่ยน
onClassName ( path : JSONPath , value : any ) : string | undefined เพิ่มชื่อคลาสที่กำหนดเองลงในโหนดเฉพาะตามเส้นทางและ/หรือค่าของพวกเขา โปรดทราบว่าในคลาสที่กำหนดเองคุณสามารถแทนที่ตัวแปร CSS เช่น --jse-contents-background-color เพื่อเปลี่ยนสไตล์ของโหนดเช่นสีพื้นหลัง ตัวแปรที่เกี่ยวข้องคือ:
--jse-contents-background-color
--jse-selection-background-color
--jse-selection-background-inactive-color
--jse-hover-background-color
--jse-context-menu-pointer-hover-background
--jse-context-menu-pointer-background
--jse-context-menu-pointer-background-highlight
--jse-collapsed-items-background-color
--jse-collapsed-items-selected-background-color ในการปรับสีข้อความของคีย์หรือค่าสีของคลาส .jse-key และ .jse-value สามารถเขียนทับได้
onRenderValue ( props : RenderValueProps ) : RenderValueComponentDescription [ ] ปรับแต่งการแสดงผลของค่า โดยค่าเริ่มต้น renderValue จะถูกใช้ซึ่งทำให้ค่าเป็น div ที่แก้ไขได้และขึ้นอยู่กับค่ายังสามารถทำให้การสลับบูลีน, ตัวเลือกสีและแท็กการประทับเวลา ส่วนประกอบหลายส่วนสามารถแสดงผลซึ่งกันและกันได้เช่นการสลับบูลีนและตัวเลือกสีที่ถูกทิ้งไว้จาก Div ที่แก้ไขได้ เพื่อที่จะปิดการใช้งานตัวอย่างตัวเลือกสีในตัวหรือแท็ก Timestamp คุณสามารถค้นหาซอร์สโค้ดของ renderValue คัดลอกแล้วลบส่วนประกอบที่คุณไม่ต้องการออกจากฟังก์ชั่น ส่วนประกอบของตัวเรนเดอร์ที่สร้างขึ้น: EditableValue , ReadonlyValue , BooleanToggle , ColorPicker , TimestampTag , EnumValue
สำหรับ JSON Schema enums มีค่าเรนเดอร์ renderJSONSchemaEnum ทำสำเร็จแล้วซึ่งทำให้ enums โดยใช้องค์ประกอบ EnumValue สามารถใช้เช่น:
import { renderJSONSchemaEnum , renderValue } from 'svelte-jsoneditor'
function onRenderValue ( props ) {
// use the enum renderer, and fallback on the default renderer
return renderJSONSchemaEnum ( props , schema , schemaDefinitions ) || renderValue ( props )
} การโทรกลับ onRenderValue จะต้องส่งคืนอาร์เรย์ด้วยหนึ่งหรือหลายตัวเรนเดอร์ แต่ละ renderer สามารถเป็นองค์ประกอบ svelte หรือการกระทำ svelte:
interface SvelteComponentRenderer {
component : typeof SvelteComponent < RenderValuePropsOptional >
props : Record < string , unknown >
}
interface SvelteActionRenderer {
action : Action // Svelte Action
props : Record < string , unknown >
} อินเทอร์เฟซ SvelteComponentRenderer สามารถใช้เพื่อให้ส่วนประกอบ svelte เช่นองค์ประกอบ EnumValue ที่กล่าวถึงข้างต้น SvelteActionRenderer คาดว่าจะมีการกระทำของ Svelte เป็นสมบัติ action เนื่องจากอินเทอร์เฟซนี้เป็นอินเทอร์เฟซจาวาสคริปต์ธรรมดาสิ่งนี้จึงอนุญาตให้สร้างส่วนประกอบที่กำหนดเองในสภาพแวดล้อมวานิลลา JS โดยพื้นฐานแล้วมันเป็นฟังก์ชั่นที่ได้รับโหนด DOM และจำเป็นต้องส่งคืนวัตถุด้วย update และ destroy ฟังก์ชั่น:
const myRendererAction = {
action : ( node ) => {
// attach something to the HTML DOM node
return {
update : ( node ) => {
// update the DOM
} ,
destroy : ( ) => {
// cleanup the DOM
}
}
}
} onRenderMenu ( items : MenuItem [ ] , context : { mode : 'tree' | 'text' | 'table' , modal : boolean , readOnly : boolean } ) : MenuItem [ ] | undefined การโทรกลับซึ่งสามารถใช้ในการเปลี่ยนแปลงรายการเมนู สามารถเพิ่มรายการใหม่หรือรายการที่มีอยู่สามารถลบหรือจัดระเบียบใหม่ได้ เมื่อฟังก์ชั่นส่ง undefined items ต้นฉบับจะถูกนำไปใช้
การใช้ mode บริบทค่า modal และ readOnly การกระทำที่แตกต่างกันสามารถดำเนินการขึ้นอยู่กับโหมดของตัวแก้ไขและไม่ว่าตัวแก้ไขจะแสดงผลภายในโมดอลหรือไม่หรือขึ้นอยู่กับว่าเป็นการอ่านอย่างเดียว
รายการเมนู MenuItem สามารถเป็นหนึ่งในประเภทต่อไปนี้:
ปุ่ม:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}ตัวคั่น (เส้นแนวตั้งสีเทาระหว่างกลุ่มของรายการ):
interface MenuSeparator {
type : 'separator'
}พื้นที่ (เติมพื้นที่ว่าง):
interface MenuSpace {
type : 'space'
} onRenderContextMenu ( items : ContextMenuItem [ ] , context : { mode : 'tree' | 'text' | 'table' , modal : boolean , readOnly : boolean , selection : JSONEditorSelection | undefined } ) : ContextMenuItem [ ] | false | undefined การโทรกลับซึ่งสามารถใช้ในการเปลี่ยนแปลงรายการเมนูบริบท สามารถเพิ่มรายการใหม่หรือรายการที่มีอยู่สามารถลบหรือจัดระเบียบใหม่ได้ เมื่อฟังก์ชั่นส่ง undefined items ต้นฉบับจะถูกนำไปใช้และเมนูบริบทจะปรากฏขึ้นเมื่อ readOnly อย่างเป็น false เมื่อฟังก์ชั่นส่งคืน false เมนูบริบทจะไม่ปรากฏขึ้น การโทรกลับจะถูกเรียกเช่นกันเมื่อตัวแก้ไขเป็น readOnly และในกรณีส่วนใหญ่คุณต้องการกลับ false แล้ว
การใช้ mode ค่าบริบท, modal , readOnly และ selection การกระทำที่แตกต่างกันสามารถดำเนินการขึ้นอยู่กับโหมดของตัวแก้ไขไม่ว่าตัวแก้ไขจะแสดงผลภายในโมดอลหรือไม่ไม่ว่าจะเป็นตัวแก้ไขอย่างเดียวหรือไม่และขึ้นอยู่กับเส้นทางของการเลือก
รายการเมนู ContextMenuItem อาจเป็นหนึ่งในประเภทต่อไปนี้:
ปุ่ม:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}ปุ่มดรอปดาวน์:
interface MenuDropDownButton {
type : 'dropdown-button'
main : MenuButton
width ?: string
items : MenuButton [ ]
}ตัวคั่น (เส้นสีเทาระหว่างกลุ่มรายการ):
interface MenuSeparator {
type : 'separator'
}แถวเมนูและคอลัมน์:
interface MenuLabel {
type : 'label'
text : string
}
interface ContextMenuColumn {
type : 'column'
items : Array < MenuButton | MenuDropDownButton | MenuLabel | MenuSeparator >
}
interface ContextMenuRow {
type : 'row'
items : Array < MenuButton | MenuDropDownButton | ContextMenuColumn >
} onSelect : ( selection : JSONEditorSelection | undefined ) => void เรียกกลับมาเมื่อมีการเปลี่ยนแปลงการเลือก เมื่อการเลือกถูกลบออกการเรียกกลับจะถูกเรียกใช้ด้วยอาร์กิวเมนต์ undefined ในโหมด text จะถูก TextSelection ในโหมด tree และ table JSONSelection จะถูกยิง (ซึ่งสามารถเลือก MultiSelection , KeySelection , EditKeySelection ValueSelection , EditValueSelection , InsideSelection หรือ AfterSelection ) ใช้ typeguards เช่น isTextSelection และ isValueSelection เพื่อตรวจสอบประเภทที่เลือกมี
queryLanguages: QueryLanguage [ ]กำหนดค่าภาษาคิวรีหนึ่งหรือหลายภาษาที่สามารถใช้ใน Transform Modal ห้องสมุดมาพร้อมกับภาษาต่อไปนี้รวม:
ภาษาสามารถโหลดได้ดังนี้:
import {
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
} from 'svelte-jsoneditor'
const allQueryLanguages = [
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
] โดยค่าเริ่มต้นจะมีการโหลดเฉพาะ jsonQueryLanguage ในตัวแก้ไข
โปรดทราบว่าทั้ง lodashQueryLanguage และ javascriptQueryLanguage สามารถเรียกใช้รหัส JavaScript โดยพลการและใช้ new Function(...) เพื่อเรียกใช้รหัส ดังนั้นพวกเขาจึงไม่เหมาะสมโดยทั่วไปในการจัดเก็บหรือแบ่งปันแบบสอบถามเนื่องจากความเสี่ยงด้านความปลอดภัย ในบางสภาพแวดล้อมการพยายามใช้พวกเขาจะส่งผลให้เกิดข้อผิดพลาด CSP (นโยบายความปลอดภัยเนื้อหา) ขึ้นอยู่กับนโยบายความปลอดภัย
queryLanguageId: string id ของภาษาคิวรีที่เลือกในปัจจุบัน
onChangeQueryLanguage : ( queryLanguageId : string ) => voidฟังก์ชั่นการโทรกลับเรียกใช้เมื่อผู้ใช้เปลี่ยนภาษาคิวรีที่เลือกใน TransformModal ผ่านปุ่มการกำหนดค่าด้านบนขวา
onFocus() การโทรกลับยิงเมื่อบรรณาธิการได้รับความสนใจonBlur() การโทรกลับยิงเมื่อบรรณาธิการสูญเสียโฟกัสวิธีการสามารถเรียกได้ในอินสแตนซ์ JsonEditor ใน Svelte คุณสามารถสร้างการอ้างอิงและเรียกวิธีการเช่น:
< script >
let editor
function logContents () {
const content = editor . get () // using a method
console . log (content)
}
</ script >
< JSONEditor bind:this ={ editor } />ในตัวแก้ไขวานิลลาฟังก์ชันโรงงานใช้เพื่อสร้างอินสแตนซ์ของตัวแก้ไข:
const editor = createJSONEditor ( { ... } )
function logContents ( ) {
const content = editor . get ( ) // using a method
console . log ( content )
} โปรดทราบว่าวิธีการส่วนใหญ่เป็นแบบอะซิงโครนัสและจะแก้ไขหลังจากตัวแก้ไขจะแสดงซ้ำอีกครั้ง (ใน tick ถัดไป)
JSONEditor . prototype . get ( ) : Contentรับเอกสาร JSON ปัจจุบัน
สำคัญ: อย่ากลายพันธุ์
contentที่ได้รับซึ่งจะทำให้ประวัติศาสตร์และเนื้อหาที่แสดงผล ดูส่วนที่ไม่สามารถเปลี่ยนแปลงได้
JSONEditor . prototype . set ( content : Content ) : Promise < void > แทนที่เนื้อหาปัจจุบัน จะรีเซ็ตสถานะของบรรณาธิการ ดูเพิ่มเติมที่วิธี update(content)
JSONEditor . prototype . update ( content : Content ) : Promise < void > อัปเดตเนื้อหาที่โหลดโดยรักษาสถานะของตัวแก้ไข (เช่นวัตถุที่ขยาย) คุณยังสามารถเรียก editor.updateProps({ content }) ดูเพิ่มเติมที่ set(content)
สำคัญ: ใช้เฉพาะการเปลี่ยนแปลง
contentที่ไม่เปลี่ยนรูป การเปลี่ยนแปลงที่ไม่แน่นอนจะทำให้ประวัติศาสตร์และเนื้อหาแสดงผล ดูส่วนที่ไม่สามารถเปลี่ยนแปลงได้
JSONEditor . prototype . patch ( operations : JSONPatchDocument ) : Promise < JSONPatchResult >ใช้เอกสาร Patch JSON เพื่ออัปเดตเนื้อหาของเอกสาร JSON เอกสารแพทช์ JSON เป็นรายการที่มีการดำเนินการแพทช์ JSON
สำคัญ: ใช้เฉพาะการเปลี่ยนแปลงที่ไม่เปลี่ยนรูปกับเนื้อหา การเปลี่ยนแปลงที่ไม่แน่นอนจะทำให้ประวัติศาสตร์และเนื้อหาแสดงผล ดูส่วนที่ไม่สามารถเปลี่ยนแปลงได้
JSONEditor . prototype . updateProps ( props : Object ) : Promise < void > tpdate คุณสมบัติบางส่วนหรือทั้งหมด content ที่อัปเดตสามารถส่งผ่านได้เช่นกัน สิ่งนี้เทียบเท่ากับ update(content) ตัวอย่าง:
editor . updateProps ( {
readOnly : true
} ) JSONEditor . prototype . expand ( path : JSONPath , callback ?: ( relativePath : JSONPath ) = > boolean = expandSelf ) : Promise < void > ขยายหรือยุบเส้นทางในบรรณาธิการ โหนดทั้งหมดตาม path ที่ให้ไว้จะถูกขยายและมองเห็นได้ (แสดงผล) ดังนั้นตัวอย่างเช่นส่วนที่ยุบของอาร์เรย์จะถูกขยาย การใช้ callback ทางเลือกโหนดเองและโหนดลูกซ้อนกันบางส่วนหรือทั้งหมดก็สามารถขยายได้เช่นกัน ฟังก์ชั่น callback ซ้ำเฉพาะส่วนที่มองเห็นได้ของอาร์เรย์และไม่เกินส่วนใดส่วนหนึ่งที่ยุบ โดยค่าเริ่มต้น 100 รายการแรกของอาร์เรย์จะปรากฏและแสดงผล
ตัวอย่าง:
editor.expand([], () => true) ขยายทั้งหมดeditor.expand([], relativePath => relativePath.length < 2) ขยายเส้นทางทั้งหมดถึง 2 ระดับลึกeditor.expand(['array', '204']) ขยายวัตถุรูทอาร์เรย์ในวัตถุนี้และรายการ 204 ในอาร์เรย์editor.expand(['array', '204'], () => false) ขยายวัตถุรูทอาร์เรย์ในวัตถุนี้ แต่ไม่ใช่รายการ 204theditor.expand(['array', '204'], relativePath => relativePath.length < 2) ขยายวัตถุรูทอาร์เรย์ในวัตถุนี้และขยายรายการอาร์เรย์ 204 และเด็กทั้งหมดถึงระดับสูงสุด 2 ระดับ ห้องสมุดส่งออกฟังก์ชั่นยูทิลิตี้สองรายการสำหรับฟังก์ชั่น callback ที่ใช้กันทั่วไป:
expandAll : ขยายวัตถุและอาร์เรย์ที่ซ้อนกันทั้งหมดexpandNone : ขยายอะไรเลยไม่ใช่วัตถุรูทหรืออาร์เรย์expandSelf : ขยายอาร์เรย์รูทหรือวัตถุ นี่คือค่าเริ่มต้นสำหรับพารามิเตอร์ callbackexpandMinimal : ขยายรูทอาร์เรย์หรือวัตถุและในกรณีของอาร์เรย์ขยายรายการอาร์เรย์แรก JSONEditor . prototype . collapse ( path : JSONPath , recursive ?: boolean = false ) : Promise < void > ยุบเส้นทางในบรรณาธิการ เมื่อ recursive เป็น true วัตถุและอาร์เรย์ที่ซ้อนกันทั้งหมดจะถูกยุบเช่นกัน ค่าเริ่มต้นของ recursive เป็น false
JSONEditor . prototype . transform ( { id ?: string , rootPath ?: [ ] , onTransform : ( { operations : JSONPatchDocument , json : unknown , transformedJson : unknown } ) => void , onClose : ( ) => void } ) ทริกเกอร์การคลิกปุ่มแปลงในเมนูหลักเปิดรุ่นการแปลง หากมีการโทรกลับ onTransform มันจะแทนที่ตรรกะการสร้างเพื่อใช้การแปลงเพื่อให้คุณสามารถประมวลผลการดำเนินการแปลงในทางเลือก หากมีให้การโทรกลับ onClose จะทริกเกอร์เมื่อการแปลง Modal ปิดทั้งสองหลังจากผู้ใช้คลิกใช้หรือยกเลิก หากมีการให้ id การแปลงโมดัลจะโหลดสถานะก่อนหน้าของ id นี้แทนสถานะของการแปลงบรรณาธิการโมดอล
JSONEditor . prototype . scrollTo ( path : JSONPath ) : Promise < void > เลื่อนตัวแก้ไขในแนวตั้งเพื่อให้เส้นทางที่ระบุเข้ามาในมุมมอง ใช้ได้เฉพาะกับ tree โหมดและ table เส้นทางจะถูกขยายเมื่อจำเป็น สัญญาที่ส่งคืนได้รับการแก้ไขหลังจากการเลื่อนเสร็จสิ้น
JSONEditor . prototype . findElement ( path : JSONPath ) ค้นหาองค์ประกอบ DOM ของเส้นทางที่กำหนด ส่งคืน null เมื่อไม่พบ
JSONEditor . prototype . acceptAutoRepair ( ) : Promise < Content > ในโหมดต้นไม้ JSON ไม่ถูกต้องจะได้รับการซ่อมแซมโดยอัตโนมัติเมื่อโหลด เมื่อการซ่อมแซมประสบความสำเร็จเนื้อหาที่ซ่อมแซมจะถูกแสดงผล แต่ยังไม่ได้ใช้กับเอกสารของตัวเองจนกว่าผู้ใช้จะคลิก "ตกลง" หรือเริ่มแก้ไขข้อมูล แทนที่จะยอมรับการซ่อมแซมผู้ใช้ยังสามารถคลิก "ซ่อมแซมด้วยตนเองแทน" การเรียกใช้ .acceptAutoRepair() จะยอมรับการซ่อมแซมโดยทางโปรแกรม สิ่งนี้จะกระตุ้นการอัปเดตและวิธีการเองก็ส่งคืนเนื้อหาที่อัปเดต ในกรณีของโหมด text หรือเมื่อตัวแก้ไขไม่ได้อยู่ในสถานะ "ยอมรับการซ่อมแซมอัตโนมัติ" จะไม่มีอะไรเกิดขึ้นและเนื้อหาจะถูกส่งคืนตามที่เป็นอยู่
JSONEditor . prototype . refresh ( ) : Promise < void > รีเฟรชการแสดงผลของเนื้อหาเช่นหลังจากเปลี่ยนขนาดตัวอักษร สิ่งนี้มีเฉพาะในโหมด text
JSONEditor . prototype . validate ( ) : ContentErrors | undefinedรับข้อผิดพลาดในการแยกวิเคราะห์และข้อผิดพลาดในการตรวจสอบความถูกต้องทั้งหมด
JSONEditor . prototype . select ( newSelection : JSONEditorSelection | undefined ) เปลี่ยนการเลือกปัจจุบัน ดู selection ตัวเลือกด้วย
JSONEditor . prototype . focus ( ) : Promise < void >ให้โฟกัสบรรณาธิการ
JSONEditor . prototype . destroy ( ) : Promise < void >ทำลายตัวแก้ไขลบออกจาก DOM
ห้องสมุดส่งออกชุดฟังก์ชันยูทิลิตี้ คำจำกัดความที่แน่นอนของฟังก์ชั่นเหล่านั้นสามารถพบได้ใน TypeScript D
renderValuerenderJSONSchemaEnumBooleanToggleColorPickerEditableValueEnumValueReadonlyValueTimestampTaggetValueClasskeyComboFromEventcreateAjvValidatorjsonQueryLanguagejmespathQueryLanguagelodashQueryLanguagejavascriptQueryLanguageisContentisTextContentisJSONContentisLargeContenttoTextContenttoJSONContentestimateSerializedSizeexpandAllexpandMinimalexpandNoneexpandSelfisValueSelectionisKeySelectionisInsideSelectionisAfterSelectionisMultiSelectionisEditingSelectioncreateValueSelectioncreateEditValueSelectioncreateKeySelectioncreateEditKeySelectioncreateInsideSelectioncreateAfterSelectioncreateMultiSelectiongetFocusPathgetAnchorPathgetStartPathgetEndPathgetSelectionPathsisEqualParserparseJSONPathstringifyJSONPathresizeObserveronEscapevalueTypestringConvertisObjectisObjectOrArrayisBooleanisTimestampisColorisUrlisContentParseErrorisContentValidationErrorsimmutable-json-patch และใช้ฟังก์ชั่นของมัน:immutableJSONPatchrevertJSONPatchparseJSONPointerparsePathparseFromcompileJSONPointercompileJSONPointerPropgetInsetInupdateIninsertAtexistsIndeleteIn ประเภท typeScript (เช่น Content , JSONSelection และ JSONPatchOperation ) ถูกกำหนดไว้ในไฟล์ต้นฉบับต่อไปนี้:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/types.ts
ตัวแก้ไขสามารถจัดสไตล์โดยใช้ตัวแปร CSS ที่มีอยู่ รายการทั้งหมดที่มีตัวแปรทั้งหมดสามารถดูได้ที่นี่:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss
ตัวอย่างเช่นในการเปลี่ยนสีธีมสีน้ำเงินเริ่มต้นเป็นแอนทราไซต์:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = {
text : undefined , // can be used to pass a stringified JSON document instead
json : {
string : 'Hello custom theme color :)'
}
}
</ script >
< div class =" my-json-editor " >
< JSONEditor bind:content />
</ div >
< style >
.my-json-editor {
/* define a custom theme color */
--jse-theme-color: #383e42;
--jse-theme-color-highlight: #687177;
}
</ style >บรรณาธิการมาพร้อมกับธีมมืดในตัว เพื่อใช้ชุดรูปแบบนี้:
themes/jse-theme-dark.cssjse-theme-dark ของธีมมืดลงในองค์ประกอบคอนเทนเนอร์ HTML ที่โหลดตัวแก้ไข เป็นไปได้ที่จะโหลดสไตล์ของชุดรูปแบบหลายชุดและสลับพวกเขาโดยการเปลี่ยนชื่อคลาส (เช่น jse-theme-dark ) ที่แนบมากับองค์ประกอบคอนเทนเนอร์ HTML
ตัวอย่าง svelte เต็ม:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = {
text : undefined , // can be used to pass a stringified JSON document instead
json : {
string : 'Hello dark theme :)'
}
}
</ script >
<!-- use a theme by adding its name to the container class -->
< div class =" my-json-editor jse-theme-dark " >
< JSONEditor bind:content />
</ div >
< style >
/* load one or multiple themes */
@import 'svelte-jsoneditor/themes/jse-theme-dark.css';
</ style > เมื่ออัปเดตตัวแปร CSS แบบไดนามิกจำเป็นต้องรีเฟรช Via editorRef.refresh() เพื่ออัปเดตขนาดตัวอักษรของหมายเลขบรรทัดในรางน้ำและอัปเดตสีของเครื่องหมายการเยื้องในโหมด text :
< script >
let editorRef
function refresh ( ) {
editorRef ?. refresh ( )
}
</ script >
< JSONEditor bind:this =" {editorRef} " ... /> เป็นสิ่งสำคัญที่ content ของตัวแก้ไขจะได้รับการปรับปรุงในวิธีที่ไม่เปลี่ยนแปลงเท่านั้น การกลายพันธุ์ content จะทำลายประวัติ (ยกเลิก/ทำซ้ำ) และจะไม่อัปเดตส่วนต่อประสานผู้ใช้ทันทีตามการเปลี่ยนแปลง
เหตุผลที่ต้องมีการเปลี่ยนแปลงที่ไม่เปลี่ยนแปลงคือ:
ข้อได้เปรียบอื่น ๆ ของวิธีการทำงานที่ไม่เปลี่ยนรูปคือมันทำให้ข้อมูลที่คุณทำงานด้วยการทำนายและผิดพลาดได้ง่ายขึ้นมากขึ้น คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับความไม่สามารถเปลี่ยนแปลงได้โดยการค้นหาบทความหรือวิดีโอเกี่ยวกับเรื่องเช่นวิดีโอนี้หรือบทความนี้ ความไม่สามารถเปลี่ยนแปลงได้ไม่ใช่ตัวเลือกที่ดีที่สุด เสมอไป แต่ในกรณีของตัวแก้ไข JSON นี้เรากำลังจัดการกับโครงสร้างข้อมูลขนาดใหญ่และซ้อนกันซึ่งโดยทั่วไปแล้วเรามักจะทำการเปลี่ยนแปลงเล็กน้อยเช่นการอัปเดตค่าซ้อนเดียว วิธีการที่ไม่เปลี่ยนรูปส่องมาที่นี่ทำให้ svelte-jsoneditor สามารถแสดงผลและแก้ไขเอกสาร JSON ได้อย่างราบรื่นสูงถึง 512 MB
นี่คือตัวอย่างของการเปลี่ยนแปลงที่ไม่แน่นอน:
// mutable change (NOT SUPPORTED!)
function updateDate ( ) {
const lastEdited = new Date ( ) . toISOString ( )
const content = toJsonContent ( myJsonEditor . get ( ) )
content . json . lastEdited = lastEdited // <- this is a mutable change
myJsonEditor . update ( content )
// ERROR: The UI will not update immediately but only update after changing something
// inside the editor like the selection. And most importantly, history is broken now,
// because the original document is mutated. You cannot undo this action.
}แต่คุณสามารถใช้การเปลี่ยนแปลงแบบเดียวกันในวิธีที่ไม่เปลี่ยนแปลง มีตัวเลือกต่าง ๆ สำหรับสิ่งนั้น:
// immutable change using a libary like "mutative" or "immer" (efficient and easy to work with)
import { create } from 'mutative'
function updateDate1 ( ) {
const content = toJsonContent ( myJsonEditor . get ( ) )
const updatedContent = create ( content , ( draft ) => {
draft . json . lastEdited = new Date ( ) . toISOString ( )
} )
myJsonEditor . update ( updatedContent )
}
// immutable change using "immutable-json-patch"
import { setIn } from 'immutable-json-patch'
function updateDate2 ( ) {
const content = toJsonContent ( myJsonEditor . get ( ) )
const updatedContent = setIn ( content , [ 'json' , 'lastEdited' ] , new Date ( ) . toISOString ( ) )
myJsonEditor . update ( updatedContent )
}
// immutable change using the spread operator (not handy for updates in nested data)
function updateDate3 ( ) {
const content = toJsonContent ( myJsonEditor . get ( ) )
const updatedContent = {
json : {
... content . json ,
lastEdited : new Date ( ) . toISOString ( )
}
}
myJsonEditor . update ( updatedContent )
}
// immutable change by creating a deep clone (simple though inefficient)
import { cloneDeep } from 'lodash-es'
function updateDate4 ( ) {
const content = toJsonContent ( myJsonEditor . get ( ) )
const updatedContent = cloneDeep ( content )
updatedContent . json . lastEdited = new Date ( ) . toISOString ( )
myJsonEditor . update ( updatedContent )
} josdejong/svelte-jsoneditor และ josdejong/jsoneditor ห้องสมุดนี้ josdejong/svelte-jsoneditor เป็นผู้สืบทอดของ josdejong/jsoneditor ความแตกต่างหลักคือ:
josdejong/jsoneditor | josdejong/svelte-jsoneditor | |
|---|---|---|
| การสร้าง | ต้นฉบับ (เผยแพร่ครั้งแรกในปี 2011) | ผู้สืบทอด (ตีพิมพ์ครั้งแรกในปี 2564) |
| กรอบ | นำไปใช้ในจาวาสคริปต์ธรรมดาโดยใช้การดำเนินงาน DOM ระดับต่ำ | ใช้ svelte |
| โหมดต้นไม้ | มุมมองต้นไม้มีปุ่มเมนูบริบททางด้านซ้ายของทุกบรรทัด คีย์และค่านิยมอยู่ในสถานะที่แก้ไขได้เสมอ | มุมมองต้นไม้ที่ใช้คลิกขวาเพื่อเปิดเมนูบริบทและดับเบิลคลิกเพื่อเริ่มแก้ไขคีย์หรือค่า (คล้ายกับสเปรดชีตหรือตัวแก้ไขข้อความมากขึ้น) รองรับการคัดลอก/วางจากและไปยังคลิปบอร์ดระบบ |
| โหมดข้อความ | ขับเคลื่อนโดย Ace Editor | ขับเคลื่อนโดย Mirror Code |
| โหมดดูตัวอย่าง | ใช้ในการดูตัวอย่างเอกสารขนาดใหญ่ | ไม่จำเป็นต้องใช้ทั้งโหมด tree และ text สามารถจัดการเอกสารขนาดใหญ่ได้ |
เหตุผลหลักในการสร้างห้องสมุดใหม่แทนที่จะขยายห้องพักที่มีอยู่คือ:
josdejong/jsoneditor นั้นเรียบง่ายและตรงไปตรงมา แต่ก็มี จำกัด โหมดต้นไม้ใหม่ของ josdejong/svelte-jsoneditor ช่วยให้สามารถแก้ไขและโต้ตอบได้มากขึ้น มันทำงานได้ค่อนข้างคล้ายกับสเปรดชีตหรือตัวแก้ไขข้อความ นำทางและเลือกโดยใช้ปุ่มลูกศรและเปลี่ยนลูกศรหรือโดยการลากด้วยเมาส์ ดับเบิลคลิก (หรือกด Enter) เพื่อเริ่มแก้ไขคีย์หรือค่า เปิดเมนูบริบทโดยคลิกขวาที่รายการหรือการเลือกที่คุณต้องการใช้งาน ใช้การตัด/คัดลอก/วางเพื่อย้ายชิ้นส่วนของ JSON ไปรอบ ๆ และทำงานร่วมกับแอปพลิเคชันอื่น ๆเมื่อไลบรารีให้ข้อผิดพลาดในการรวบรวมในการตั้งค่า Svelte ของคุณอาจเกี่ยวข้องกับ Vite ที่มีปัญหาในการนำเข้าไลบรารี ESM/CommonJS อย่างถูกวิธี ข้อผิดพลาดอาจมีลักษณะ:
SyntaxError: โมดูลที่ร้องขอ '/node_modules/json-source-map/index.js?v=fda884be' ไม่ได้ให้การส่งออกที่ชื่อว่า 'เริ่มต้น' (ที่ jsonutils.js? v = fda884be: 2: 8)
วิธีแก้ปัญหาคือการเพิ่มสิ่งต่อไปนี้ในไฟล์ vite.config.js ของคุณ (อ่านเพิ่มเติม):
// ...
/** @type {import('vite').UserConfig} */
const config = {
// ...
optimizeDeps : {
include : [
'ajv-dist' ,
'immutable-json-patch' ,
'lodash-es' ,
'@fortawesome/free-regular-svg-icons' ,
'jmespath'
]
}
}
// ... ในการเริ่มต้น: โคลนพื้นที่เก็บข้อมูล Git ให้เรียกใช้ npm install จากนั้น npm run dev
สคริปต์ที่มีอยู่ทั้งหมด:
npm install # Install dependencies (once)
npm run dev # Start the demo project (at http://localhost:5173)
npm run build # Build the library (output in ./package and ./package-vanilla)
npm run test # Run unit tests in watch mode
npm run test-ci # Run unit tests once
npm run coverage # Run unit test coverage (output in ./coverage)
npm run check # Run Svelte checks
npm run lint # Run linter
npm run format # Automatically fix linting issues
npm run release-dry-run # To run the build and see the change list without actually publishing
npm run release # Publish to npm (requires login). This will test, check, lint, build,
# increase the version number, update the changelog, and publish to npm.
# Note that it will publish two npm packages: `svelte-jsoneditor`
# and `vanilla-jsoneditor`.
svelte-jsoneditor ได้รับการปล่อยตัวเป็นโอเพ่นซอร์สภายใต้ใบอนุญาต ISC ที่ได้รับอนุญาต
หากคุณใช้ svelte-jsoneditor ในเชิงพาณิชย์มีความคาดหวัง ทางสังคม (แต่ไม่มีกฎหมาย) ที่คุณจะช่วยกองทุนการบำรุงรักษา เริ่มต้นที่นี่
