svelte jsoneditor
v2.3.3
Alat berbasis web untuk melihat, mengedit, memformat, mengubah, dan memvalidasi JSON.
Cobalah: https://jsoneditoronline.org
Perpustakaan ditulis dengan langsing, tetapi dapat digunakan dalam javascript biasa juga dan dalam kerangka apa pun (solidjs, react, vue, sudut, dll.). Dibutuhkan browser dari Maret 2022 atau yang lebih baru.
Untuk penggunaan dalam proyek langsing:
npm install svelte-jsoneditor
Untuk penggunaan dalam vanilla javascript atau kerangka kerja seperti solidjs, react, vue, angular, dll:
npm install vanilla-jsoneditor
Buat jsonEditor dengan 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 >Atau ikatan satu arah:
< 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 > Perpustakaan menyediakan bundel vanilla dari editor melalui perpustakaan NPM vanilla-jsoneditor (bukan svelte-jsoneditor ) yang dapat digunakan dalam lingkungan dan kerangka kerja browser apa pun. Dalam kerangka seperti React, Vue, atau Angular, Anda harus menulis beberapa kode pembungkus di sekitar antarmuka kelas.
Jika Anda memiliki pengaturan untuk proyek Anda dengan bundler (seperti Vite, Rollup, atau Webpack), yang terbaik adalah menggunakan Impor ES default:
// for use in a React, Vue, or Angular project
import { JSONEditor } from 'vanilla-jsoneditor'Jika Anda ingin menggunakan pustaka lurus di browser, gunakan bundel ES mandiri yang disediakan:
// for use directly in the browser
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js' Bundel mandiri berisi semua ketergantungan vanilla-jsoneditor , misalnya lodash-es dan Ajv . Jika Anda menggunakan beberapa dependensi ini dalam proyek Anda juga, itu berarti bahwa mereka akan dibundel dua kali dalam aplikasi web Anda, yang mengarah ke ukuran aplikasi yang tidak perlu. Secara umum, lebih baik menggunakan import { createJSONEditor } from 'vanilla-jsoneditor' alih-alih bundel mandiri sehingga dependensi dapat digunakan kembali.
Contoh browser Memuat modul ES mandiri:
<!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 >Untuk membuatnya lebih mudah menggunakan perpustakaan dalam kerangka pilihan Anda, Anda dapat menggunakan perpustakaan pembungkus:
Komponen Svelte:
< script >
import { JSONEditor } from 'svelte-jsoneditor'
let content = { text : '[1,2,3]' }
</ script >
< div >
< JSONEditor {content} />
</ div >Kelas 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 } )
}
}
} ) Properti seperti content dan mode dilewatkan sebagai atribut ke komponen SVELTE, seperti <JSONEditor {content} {mode} /> , atau melalui props jika fungsi pabrik vanilla JS: createJSONEditor({ target, props: { content, mode } .
content: Content Lulus konten JSON untuk diterjemahkan di JSONEDITOR. Content adalah objek yang berisi properti json (dokumen JSON yang diuraikan) atau text (dokumen JSON yang dirangkai). Hanya satu dari dua properti yang harus ditentukan. Anda dapat meneruskan kedua jenis konten ke editor yang terlepas dari mode apa itu. Anda dapat menggunakan ikatan dua arah melalui bind:content .
PENTING: Hanya membuat perubahan abadi pada
content. Perubahan yang dapat berubah akan mengacaukan sejarah dan konten yang diberikan. Lihat bagian kekebalan.
selection: JSONEditorSelection | undefined Konten yang dipilih saat ini. Anda dapat menggunakan pengikatan dua arah menggunakan bind:selection . Mode tree mendukung MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection , atau AfterSelection . Mode table mendukung ValueSelection , dan mode text mendukung TextSelection. .
mode: 'tree' | 'text' | 'table' Buka mode editor dalam mode 'tree' (Default), 'table' , atau mode 'text' (sebelumnya: mode code ).
mainMenuBar: boolean Tunjukkan bilah menu utama. Nilai default true .
navigationBar: boolean Tunjukkan bilah navigasi dengan, di mana Anda dapat melihat jalur yang dipilih dan menavigasi melalui dokumen Anda dari sana. Nilai default true .
statusBar: boolean Tunjukkan bilah status di bagian bawah editor 'text' , menunjukkan informasi tentang lokasi kursor dan konten yang dipilih. Nilai default true .
askToFormat: boolean Ketika true (default), pengguna akan ditanya apakah dia ingin memformat dokumen JSON ketika dokumen ringkas dimuat atau ditempelkan dalam mode 'text' . Hanya berlaku untuk mode 'text' .
readOnly: boolean Buka editor dalam mode read-only: Tidak ada perubahan yang dapat dilakukan, tombol tidak relevan disembunyikan dari menu, dan menu konteks tidak diaktifkan. Nilai default false .
indentation: number | string Jumlah spasi yang digunakan untuk indentasi saat merangkai JSON, atau string yang akan digunakan sebagai indentasi seperti 't' untuk menggunakan tab sebagai indentasi, atau ' ' untuk menggunakan 4 spasi (yang setara dengan mengonfigurasi indentation: 4 ). Lihat juga tabSize Properti.
tabSize: number Ketika indentasi dikonfigurasi sebagai karakter tab ( indentation: 't' ), tabSize mengkonfigurasi seberapa besar karakter tab diterjemahkan. Nilai default adalah 4 . Hanya berlaku untuk mode text .
escapeControlCharacters: boolean False secara default. Ketika true , karakter kontrol seperti Newline dan Tab diterjemahkan sebagai karakter yang melarikan diri n dan t . Hanya berlaku untuk mode 'tree' , dalam 'text' karakter kontrol mode selalu melarikan diri.
escapeUnicodeCharacters: boolean False secara default. Bila true , karakter unicode seperti ☎ dan? diterjemahkan melarikan diri seperti u260e dan ud83dude00 .
flattenColumns: boolean Benar secara default. Hanya berlaku untuk mode 'table' . Ketika true , properti objek bersarang akan ditampilkan masing -masing di kolom mereka sendiri, dengan jalur bersarang sebagai nama kolom. Ketika false , objek bersarang akan dianggap inline, dan mengklik dua kali akan membukanya dalam sembulan.
validator : function ( json : unknown ) : ValidationError [ ]Validasi dokumen JSON. Misalnya Gunakan validator skema JSON bawaan yang ditenagai oleh AJV:
import { createAjvValidator } from 'svelte-jsoneditor'
const validator = createAjvValidator ( { schema , schemaDefinitions } ) parser: JSON = JSON Konfigurasikan parser JSON khusus, seperti lossless-json . Secara default, parser JSON asli JavaScript digunakan. Antarmuka JSON adalah objek dengan fungsi parse dan stringify . Misalnya:
< 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 Hanya berlaku saat validator disediakan. Ini sama dengan parser , kecuali bahwa parser ini digunakan untuk menguraikan data sebelum mengirimnya ke validator. Konfigurasikan parser JSON khusus yang digunakan untuk parse JSON sebelum meneruskannya ke validator . Secara default, parser JSON bawaan digunakan. Saat melewati validationParser khusus, pastikan output parser didukung oleh validator yang dikonfigurasi. Jadi, ketika validationParser dapat mengeluarkan nomor bigint atau tipe numerik lainnya, validator juga harus mendukungnya. Dalam mode pohon, ketika parser tidak sama dengan validationParser , dokumen JSON akan dikonversi sebelum diteruskan ke validator melalui validationParser.parse(parser.stringify(json)) .
pathParser: JSONPathParser Objek opsional dengan metode parse dan stringify untuk mem -parsing dan merangkai JSONPath , yang merupakan array dengan nama properti. pathParser digunakan di Path Editor di bilah navigasi, yang dibuka dengan mengklik tombol Edit di sisi kanan bilah navigasi. Fungsi pathParser.parse diizinkan untuk melempar kesalahan saat input tidak valid. Secara default, notasi jalur JSON digunakan, yang terlihat seperti $.data[2].nested.property . Atau, dimungkinkan untuk menggunakan misalnya notasi pointer JSON seperti /data/2/nested/property atau sesuatu yang dibuat khusus. Fungsi Helper Terkait: parseJSONPath dan stringifyJSONPath , parseJSONPointer dan compileJSONPointer .
onError ( err : Error )Callback dipecat saat kesalahan terjadi. Implementasi default adalah mencatat kesalahan di konsol dan menampilkan pesan peringatan sederhana kepada pengguna.
onChange ( content : Content , previousContent : Content , changeStatus : { contentErrors : ContentErrors | undefined , patchResult : JSONPatchResult | undefined } ) Panggilan balik yang dipanggil pada setiap perubahan konten yang dibuat oleh pengguna dari dalam editor. Itu tidak akan memicu perubahan yang diterapkan secara terprogram melalui metode seperti .set() , .update() , atau .patch() .
content yang dikembalikan kadang -kadang tipe { json } , dan kadang -kadang tipe { text } . Manakah dari keduanya yang dikembalikan tergantung pada mode editor, perubahan yang diterapkan, dan keadaan dokumen (valid, tidak valid, kosong). Perlu diketahui bahwa { text } dapat berisi JSON yang tidak valid: Sementara mengetik dalam mode text , dokumen JSON akan sementara tidak valid, seperti ketika pengguna mengetik string baru. Parameter patchResult hanya dikembalikan pada perubahan yang dapat direpresentasikan sebagai dokumen patch JSON, dan misalnya tidak ketika secara bebas mengetik dalam mode text .
onChangeMode ( mode : 'tree' | 'text' | 'table' )Dipanggil saat mode diubah.
onClassName ( path : JSONPath , value : any ) : string | undefined Tambahkan nama kelas khusus ke node tertentu, berdasarkan jalur dan/atau nilainya. Perhatikan bahwa di kelas khusus, Anda dapat mengganti variabel CSS seperti --jse-contents-background-color untuk mengubah gaya node, seperti warna latar belakang. Variabel yang relevan adalah:
--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 Untuk menyesuaikan warna teks kunci atau nilai, warna kelas .jse-key dan .jse-value dapat ditimpa.
onRenderValue ( props : RenderValueProps ) : RenderValueComponentDescription [ ] Kustomisasi rendering nilai. Secara default, renderValue digunakan, yang menjadikan nilai sebagai div yang dapat diedit dan tergantung pada nilainya juga dapat membuat sakelar boolean, pemetik warna, dan tag cap waktu. Beberapa komponen dapat diterjemahkan bersama satu sama lain, seperti sakelar boolean dan pemetik warna yang diterjemahkan dari Div yang dapat diedit. Untuk menonaktifkan misalnya pemetik warna bawaan atau tag cap waktu, Anda dapat mencari kode sumber renderValue , menyalinnya, dan kemudian menghapus komponen yang tidak Anda inginkan dari fungsi. Komponen Renderer Value Built In Built: EditableValue , ReadonlyValue , BooleanToggle , ColorPicker , TimestampTag , EnumValue .
Untuk skema json enum, ada renderer renderer renderJSONSchemaEnum yang siap pakai yang membuat enum menggunakan komponen EnumValue . Ini bisa digunakan seperti:
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 )
} Callback onRenderValue harus mengembalikan array dengan satu atau beberapa renderer. Setiap renderer dapat berupa komponen langsing atau tindakan langsing:
interface SvelteComponentRenderer {
component : typeof SvelteComponent < RenderValuePropsOptional >
props : Record < string , unknown >
}
interface SvelteActionRenderer {
action : Action // Svelte Action
props : Record < string , unknown >
} Antarmuka SvelteComponentRenderer dapat digunakan untuk menyediakan komponen langsing seperti komponen EnumValue yang disebutkan di atas. SvelteActionRenderer mengharapkan tindakan langsing sebagai properti action . Karena antarmuka ini adalah antarmuka JavaScript biasa, ini memungkinkan untuk membuat komponen khusus di lingkungan Vanilla JS. Pada dasarnya ini adalah fungsi yang mendapatkan simpul DOM yang dilewati, dan perlu mengembalikan objek dengan update dan destroy fungsi:
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 Callback yang dapat digunakan untuk membuat perubahan pada item menu. Item baru dapat ditambahkan, atau item yang ada dapat dihapus atau direorganisasi. Ketika fungsi kembali undefined , items asli akan diterapkan.
Menggunakan mode nilai konteks, modal , dan readOnly , tindakan yang berbeda dapat diambil tergantung pada mode editor dan apakah editor diterjemahkan di dalam modal atau tidak, atau tergantung pada apakah itu hanya baca.
Menu item MenuItem dapat menjadi salah satu jenis berikut:
Tombol:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Pemisah (garis vertikal abu -abu antara sekelompok item):
interface MenuSeparator {
type : 'separator'
}Ruang (mengisi ruang kosong):
interface MenuSpace {
type : 'space'
} onRenderContextMenu ( items : ContextMenuItem [ ] , context : { mode : 'tree' | 'text' | 'table' , modal : boolean , readOnly : boolean , selection : JSONEditorSelection | undefined } ) : ContextMenuItem [ ] | false | undefined Callback yang dapat digunakan untuk membuat perubahan pada item menu konteks. Item baru dapat ditambahkan, atau item yang ada dapat dihapus atau direorganisasi. Ketika fungsi kembali undefined , items asli akan diterapkan dan menu konteks akan ditampilkan ketika readOnly false . Ketika fungsi mengembalikan false , menu konteks tidak akan pernah ditampilkan. Callback juga dipicu ketika editornya readOnly , dan dalam kebanyakan kasus Anda ingin mengembalikan false .
Menggunakan mode Nilai Konteks, modal , readOnly dan selection , tindakan yang berbeda dapat diambil tergantung pada mode editor, apakah editor diterjemahkan di dalam modal atau tidak, apakah editor hanya baca atau tidak, dan tergantung pada jalur seleksi.
Item menu ContextMenuItem dapat menjadi salah satu jenis berikut:
Tombol:
interface MenuButton {
type : 'button'
onClick : ( ) => void
icon ?: IconDefinition
text ?: string
title ?: string
className ?: string
disabled ?: boolean
}Tombol dropdown:
interface MenuDropDownButton {
type : 'dropdown-button'
main : MenuButton
width ?: string
items : MenuButton [ ]
}Pemisah (garis abu -abu antara sekelompok item):
interface MenuSeparator {
type : 'separator'
}Baris dan kolom menu:
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 Callback dipanggil saat pemilihan diubah. Ketika pemilihan dihapus, panggilan balik dipanggil dengan argumen undefined . Dalam Mode text , TextSelection akan dipecat. Dalam mode tree dan table , JSONSelection akan dipecat (yang dapat berupa MultiSelection , KeySelection , EditKeySelection , ValueSelection , EditValueSelection , InsideSelection , atau AfterSelection ). Gunakan Typeguards seperti isTextSelection dan isValueSelection untuk memeriksa jenis apa yang dimiliki pemilihan.
queryLanguages: QueryLanguage [ ]Konfigurasikan satu atau beberapa bahasa kueri yang dapat digunakan dalam modal transformasi. Perpustakaan dilengkapi dengan bahasa -bahasa berikut termasuk:
Bahasa dapat dimuat sebagai berikut:
import {
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
} from 'svelte-jsoneditor'
const allQueryLanguages = [
jsonQueryLanguage ,
jmespathQueryLanguage ,
jsonpathQueryLanguage ,
lodashQueryLanguage ,
javascriptQueryLanguage
] Secara default, hanya jsonQueryLanguage yang dimuat di editor.
Perhatikan bahwa baik lodashQueryLanguage dan javascriptQueryLanguage dapat menjalankan kode JavaScript sewenang -wenang dan menggunakan new Function(...) untuk menjalankan kode. Oleh karena itu, mereka tidak cocok secara umum untuk menyimpan atau berbagi pertanyaan karena risiko keamanan. Di beberapa lingkungan, mencoba menggunakannya akan menghasilkan kesalahan CSP (Kebijakan Keamanan Konten) tergantung pada kebijakan keamanan.
queryLanguageId: string id dari bahasa kueri yang saat ini dipilih.
onChangeQueryLanguage : ( queryLanguageId : string ) => voidFungsi callback dipanggil ketika pengguna mengubah bahasa kueri yang dipilih dalam transformModal melalui tombol konfigurasi kanan atas.
onFocus() Callback dipecat ketika editor mendapat fokus.onBlur() Callback dipecat ketika editor kehilangan fokus.Metode dapat dipanggil pada instance jsonEditor. Di Svelte, Anda dapat membuat referensi dan memanggil metode seperti:
< script >
let editor
function logContents () {
const content = editor . get () // using a method
console . log (content)
}
</ script >
< JSONEditor bind:this ={ editor } />Di editor vanilla, fungsi pabrik digunakan untuk membuat instance editor:
const editor = createJSONEditor ( { ... } )
function logContents ( ) {
const content = editor . get ( ) // using a method
console . log ( content )
} Perhatikan bahwa sebagian besar metode asinkron dan akan sembuh setelah editor diserahkan kembali (pada tick berikutnya).
JSONEditor . prototype . get ( ) : ContentDapatkan dokumen JSON saat ini.
Penting: Jangan bermutasi
contentyang diterima, yang akan mengacaukan sejarah dan konten yang diberikan. Lihat bagian kekebalan.
JSONEditor . prototype . set ( content : Content ) : Promise < void > Ganti konten saat ini. Akan mengatur ulang keadaan editor. Lihat juga Metode update(content) .
JSONEditor . prototype . update ( content : Content ) : Promise < void > Perbarui konten yang dimuat, menjaga status editor (seperti objek yang diperluas). Anda juga dapat menghubungi editor.updateProps({ content }) . Lihat juga set(content) .
PENTING: Hanya menerapkan perubahan yang tidak dapat diubah pada
content. Perubahan yang dapat berubah akan mengacaukan sejarah dan konten yang diberikan. Lihat bagian kekebalan.
JSONEditor . prototype . patch ( operations : JSONPatchDocument ) : Promise < JSONPatchResult >Terapkan dokumen patch JSON untuk memperbarui konten dokumen JSON. Dokumen patch JSON adalah daftar dengan operasi patch JSON.
PENTING: Hanya menerapkan perubahan yang tidak dapat diubah pada konten. Perubahan yang dapat berubah akan mengacaukan sejarah dan konten yang diberikan. Lihat bagian kekebalan.
JSONEditor . prototype . updateProps ( props : Object ) : Promise < void > Tpdate Beberapa atau semua properti. content yang diperbarui juga dapat dilewati; Ini setara dengan panggilan update(content) . Contoh:
editor . updateProps ( {
readOnly : true
} ) JSONEditor . prototype . expand ( path : JSONPath , callback ?: ( relativePath : JSONPath ) = > boolean = expandSelf ) : Promise < void > Perluas atau pingsan di editor. Semua node di sepanjang path yang disediakan akan diperluas dan menjadi terlihat (diberikan). Jadi misalnya bagian yang runtuh dari suatu array akan diperluas. Menggunakan callback opsional, simpul itu sendiri dan beberapa atau semua node anak bersarangnya juga dapat diperluas. Fungsi callback hanya mengulangi bagian yang terlihat dari suatu array dan tidak di atas bagian yang runtuh. Secara default, 100 item pertama dari suatu array terlihat dan diterjemahkan.
Contoh:
editor.expand([], () => true) memperluas semuaeditor.expand([], relativePath => relativePath.length < 2) Perluas semua jalur hingga 2 level dalameditor.expand(['array', '204']) memperluas objek root, array dalam objek ini, dan item ke -204 dalam array.editor.expand(['array', '204'], () => false) Perluas objek root, array dalam objek ini, tetapi bukan item ke -204 itu sendiri.editor.expand(['array', '204'], relativePath => relativePath.length < 2) Perluas objek root, array dalam objek ini, dan memperluas item array ke -204 dan semua anaknya hingga kedalaman level Max 2. Perpustakaan mengekspor beberapa fungsi utilitas untuk fungsi callback yang biasa digunakan:
expandAll : Perluas semua objek dan array bersarang secara rekursif.expandNone : Perluas tidak ada apa -apa, juga bukan objek atau array root.expandSelf : Perluas array atau objek root. Ini adalah default untuk parameter callback .expandMinimal : Perluas array atau objek root, dan dalam kasus array, perluas item array pertama. JSONEditor . prototype . collapse ( path : JSONPath , recursive ?: boolean = false ) : Promise < void > Runtuh jalan di editor. Ketika recursive itu true , semua benda dan array bersarang akan runtuh juga. Nilai default recursive false .
JSONEditor . prototype . transform ( { id ?: string , rootPath ?: [ ] , onTransform : ( { operations : JSONPatchDocument , json : unknown , transformedJson : unknown } ) => void , onClose : ( ) => void } ) Klik pemicu secara terprogram dari tombol Transform di menu utama, membuka model Transform. Jika callback onTransform disediakan, itu akan menggantikan logika build-in untuk menerapkan transformasi, memungkinkan Anda untuk memproses operasi transformasi dengan cara alternatif. Jika disediakan, callback onClose akan memicu ketika modal transformasi ditutup, baik setelah pengguna mengklik berlaku atau membatalkan. Jika id disediakan, modal transformasi akan memuat status id ini sebelumnya alih -alih status modal transformasi editor.
JSONEditor . prototype . scrollTo ( path : JSONPath ) : Promise < void > Gulir editor secara vertikal sehingga jalur yang ditentukan mulai terlihat. Hanya berlaku untuk tree dan table mode. Jalan akan diperluas saat dibutuhkan. Janji yang dikembalikan diselesaikan setelah pengguliran selesai.
JSONEditor . prototype . findElement ( path : JSONPath ) Temukan elemen DOM dari jalur yang diberikan. Kembali null saat tidak ditemukan.
JSONEditor . prototype . acceptAutoRepair ( ) : Promise < Content > Dalam mode pohon, JSON tidak valid secara otomatis diperbaiki saat dimuat. Ketika perbaikan berhasil, konten yang diperbaiki diberikan tetapi belum diterapkan pada dokumen itu sendiri sampai pengguna mengklik "OK" atau mulai mengedit data. Alih -alih menerima perbaikan, pengguna juga dapat mengklik "Perbaikan secara manual". Memohon .acceptAutoRepair() akan secara terprogram menerima perbaikan. Ini akan memicu pembaruan, dan metode itu sendiri juga mengembalikan konten yang diperbarui. Dalam hal mode text atau ketika editor tidak dalam status "terima perbaikan otomatis", tidak ada yang akan terjadi, dan isinya akan dikembalikan apa adanya.
JSONEditor . prototype . refresh ( ) : Promise < void > Refresh rendering konten, misalnya setelah mengubah ukuran font. Ini hanya tersedia dalam mode text .
JSONEditor . prototype . validate ( ) : ContentErrors | undefinedDapatkan semua kesalahan parse saat ini dan kesalahan validasi.
JSONEditor . prototype . select ( newSelection : JSONEditorSelection | undefined ) Ubah pilihan saat ini. Lihat juga selection Opsi.
JSONEditor . prototype . focus ( ) : Promise < void >Berikan fokus editor.
JSONEditor . prototype . destroy ( ) : Promise < void >Hancurkan editor, hapus dari DOM.
Perpustakaan mengekspor serangkaian fungsi utilitas. Definisi yang tepat dari fungsi -fungsi tersebut dapat ditemukan dalam naskah d
renderValuerenderJSONSchemaEnumBooleanToggleColorPickerEditableValueEnumValueReadonlyValueTimestampTaggetValueClasskeyComboFromEventcreateAjvValidatorjsonQueryLanguagejmespathQueryLanguagelodashQueryLanguagejavascriptQueryLanguageisContentisTextContentisJSONContentisLargeContenttoTextContenttoJSONContentestimateSerializedSizeexpandAllexpandMinimalexpandNoneexpandSelfisValueSelectionisKeySelectionisInsideSelectionisAfterSelectionisMultiSelection ,isEditingSelectioncreateValueSelectioncreateEditValueSelectioncreateKeySelectioncreateEditKeySelectioncreateInsideSelection ,createAfterSelectioncreateMultiSelectiongetFocusPathgetAnchorPathgetStartPathgetEndPathgetSelectionPathsisEqualParserparseJSONPathstringifyJSONPathresizeObserveronEscapevalueTypestringConvertisObjectisObjectOrArrayisBooleanisTimestampisColorisUrlisContentParseErrorisContentValidationErrorsimmutable-json-patch dan menggunakan fungsinya:immutableJSONPatchrevertJSONPatchparseJSONPointerparsePathparseFromcompileJSONPointercompileJSONPointerPropgetInsetInupdateIninsertAtexistsIndeleteIn Jenis TypeScript (seperti Content , JSONSelection , dan JSONPatchOperation ) didefinisikan dalam file sumber berikut:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/types.ts
Editor dapat ditata menggunakan variabel CSS yang tersedia. Daftar lengkap dengan semua variabel dapat ditemukan di sini:
https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss
Misalnya, untuk mengubah warna tema biru default menjadi antrasit:
< 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 >Editor hadir dengan tema gelap bawaan. Untuk menggunakan tema ini:
themes/jse-theme-dark.cssjse-theme-dark dari tema gelap ke elemen wadah HTML tempat editor dimuat. Dimungkinkan untuk memuat gaya beberapa tema, dan beralihnya dengan mengubah nama kelas (seperti jse-theme-dark ) yang terpasang pada elemen wadah HTML.
Contoh Lengkungan Lengkap:
< 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 > Saat memperbarui variabel CSS secara dinamis, perlu untuk menyegarkan via editorRef.refresh() untuk memperbarui ukuran font dari nomor baris di selokan dan memperbarui warna penanda lekukan dalam mode text :
< script >
let editorRef
function refresh ( ) {
editorRef ?. refresh ( )
}
</ script >
< JSONEditor bind:this =" {editorRef} " ... /> Penting bahwa content editor hanya diperbarui dengan cara yang tidak berubah. Mutasi content akan merusak riwayat (Undo/Redo), dan tidak akan selalu segera memperbarui antarmuka pengguna sesuai dengan perubahan.
Alasan untuk membutuhkan perubahan yang tidak dapat diubah adalah:
Keuntungan lain dari cara kerja yang tidak berubah adalah membuat data yang Anda kerjakan dengan lebih prediktif dan lebih sedikit rawan kesalahan. Anda dapat mempelajari lebih lanjut tentang kekekalan dengan mencari artikel atau video tentang subjek, seperti video ini atau artikel ini. Ketidakmampuan tidak selalu merupakan pilihan terbaik, tetapi dalam kasus editor JSON ini kami berurusan dengan struktur data yang besar dan sangat bersarang, di mana kami biasanya membuat hanya perubahan kecil seperti memperbarui nilai tunggal. Pendekatan abadi benar-benar bersinar di sini, memungkinkan svelte-jsoneditor untuk dengan lancar membuat dan mengedit dokumen JSON hingga 512 MB.
Berikut adalah contoh perubahan yang dapat berubah:
// 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.
}Sebaliknya, Anda dapat menerapkan perubahan yang sama dengan cara yang tidak berubah. Ada berbagai pilihan untuk itu:
// 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 dan josdejong/jsoneditor Perpustakaan ini josdejong/svelte-jsoneditor adalah penerus josdejong/jsoneditor . Perbedaan utamanya adalah:
josdejong/jsoneditor | josdejong/svelte-jsoneditor | |
|---|---|---|
| Penciptaan | Asli (pertama kali diterbitkan pada tahun 2011) | Penerus (pertama kali diterbitkan pada tahun 2021) |
| Kerangka | Diimplementasikan dalam JavaScript biasa, menggunakan operasi DOM tingkat rendah | Menggunakan Svelte |
| Mode pohon | Tampilan pohon yang memiliki tombol menu konteks di sebelah kiri setiap baris. Kunci dan nilainya selalu dalam keadaan edit. | Tampilan pohon yang memanfaatkan klik kanan untuk membuka menu konteks, dan klik dua kali untuk mulai mengedit kunci atau nilai (lebih mirip dengan spreadsheet atau editor teks). Ini mendukung salin/tempel dari dan ke System Clipboard. |
| Mode teks | Didukung oleh editor ace | Didukung oleh Code Mirror |
| Mode pratinjau | Digunakan untuk mempratinjau dokumen besar | Tidak diperlukan, baik mode tree dan text dapat menangani dokumen besar |
Alasan utama untuk membuat perpustakaan baru alih -alih memperluas yang sudah ada adalah:
josdejong/jsoneditor sederhana dan mudah, tetapi juga terbatas. Mode pohon baru josdejong/svelte-jsoneditor memungkinkan pengeditan dan interaksi yang lebih ramping. Ini berfungsi sangat mirip dengan spreadsheet atau editor teks. Navigasi dan pilih menggunakan tombol panah dan shift+panah atau dengan menyeret dengan mouse. Klik dua kali (atau tekan Enter) untuk mulai mengedit kunci atau nilai. Buka menu konteks dengan mengklik kanan pada item atau pilihan yang ingin Anda operasikan. Gunakan cut/copy/paste untuk memindahkan bagian JSON di sekitar dan beroperasi dengan aplikasi lain.Ketika perpustakaan memberikan kesalahan kompilasi dalam pengaturan langsing Anda, itu bisa terkait dengan vite mengalami kesulitan mengimpor pustaka ESM/CommonJS dengan cara yang benar. Kesalahannya bisa terlihat seperti:
SyntaxError: Modul yang diminta '/Node_Modules/json-source-map/index.js?v=fda884be' tidak memberikan ekspor bernama 'default' (di jsonutils.js? V = fda884be: 2: 8)
Solusi adalah untuk menambahkan yang berikut ke file vite.config.js Anda (Baca lebih lanjut):
// ...
/** @type {import('vite').UserConfig} */
const config = {
// ...
optimizeDeps : {
include : [
'ajv-dist' ,
'immutable-json-patch' ,
'lodash-es' ,
'@fortawesome/free-regular-svg-icons' ,
'jmespath'
]
}
}
// ... Untuk memulai: Kloning repositori git, jalankan npm install , dan kemudian npm run dev .
Semua skrip yang tersedia:
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 dirilis sebagai open source di bawah izin ISC.
Jika Anda menggunakan svelte-jsoneditor secara komersial, ada harapan sosial (tetapi tidak ada hukum) bahwa Anda membantu mendanai pemeliharaannya. Mulailah di sini.
