svelte jsoneditor
v2.3.3
JSONを表示、編集、フォーマット、変換、および検証するためのWebベースのツール。
試してみてください：https：//jsoneditoronline.org
ライブラリはSvelteで書かれていますが、Plain JavaScriptおよびあらゆるフレームワーク（SolidJs、React、Vue、Angularなど）でも使用できます。 2022年3月以降のブラウザが必要です。
Svelteプロジェクトでの使用について：
npm install svelte-jsoneditor
Vanilla JavaScriptまたはSolidJs、React、Vue、Angularなどのフレームワークでの使用：
npm install vanilla-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ライブラリバニラvanilla-jsoneditor編集者（ svelte-jsoneditorの代わりに）を介して編集者のバニラバンドルを提供します。 React、Vue、Angularなどのフレームワークでは、クラスインターフェイスの周りにラッパーコードを記述する必要があります。
バンドラー（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 。プロジェクトでこれらの依存関係の一部を使用する場合、Webアプリケーションに2回バンドルされ、不必要に大きなアプリケーションサイズになります。一般に、スタンドアロンバンドルの代わりに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 >選択したフレームワークでライブラリを簡単に使用できるようにするには、ラッパーライブラリを使用できます。
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などのプロパティは、 <JSONEditor {content} {mode} />のようなスベルテコンポーネントの属性として渡されるか、バニラJS工場機能の場合のpropsを介してcreateJSONEditor({ target, props: { content, mode } 。
content: Content JSoneditorでレンダリングされるJSONコンテンツを渡します。 Content 、プロパティjson （解析されたJSONドキュメント）またはtext （Stringified JSONドキュメント）を含むオブジェクトです。 2つのプロパティのうち1つのみを定義する必要があります。両方のコンテンツタイプを、それがどのモードであるかとは無関係にエディターに渡すことができます。 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 （デフォルト）の場合、ユーザーは、コンパクトドキュメントが'text'モードでロードまたは貼り付けられているときにJSONドキュメントをフォーマットするかどうかを尋ねられます。 'text'モードにのみ適用されます。
readOnly: boolean読み取り専用モードでエディターを開きます。変更は行われず、関連性のないボタンがメニューから隠されており、コンテキストメニューが有効になっていません。デフォルト値はfalseです。
indentation: number | string JSONを弦楽化するときのインデントに使用するスペースの数、またはインデントとしてタブを使用するために't'などのインデントとして使用する文字列、または' ' indentation: 4構成に相当する4つのスペースを使用する」。 Property tabSizeも参照してください。
tabSize: numberインデントがタブ文字（ indentation: 't' ）として構成されている場合、 tabSizeタブ文字のレンダリングの大きさを構成します。デフォルト値は4です。 textモードにのみ適用されます。
escapeControlCharacters: booleanデフォルトでfalse。 trueの場合、NewlineやTabなどのコントロール文字は、逃げられた文字nおよびtとしてレンダリングされます。 'tree'モード、 'text'モードコントロール文字には常に逃げられます。
escapeUnicodeCharacters: booleanデフォルトでfalse。 true場合、☎や？のようなユニコード文字は？ u260eおよびud83dude00のように脱出されます。
flattenColumns: booleanデフォルトで真です。 'table'モードにのみ適用されます。 trueの場合、ネストされたパスを列名として、ネストされたオブジェクトのプロパティがそれぞれ独自の列に表示されます。 falseの場合、ネストされたオブジェクトはインラインになり、それらをダブルクリックするとポップアップで開きます。
validator : function ( json : unknown ) : ValidationError [ ]JSONドキュメントを検証します。たとえば、AJVを搭載した組み込みのJSONスキーマバリデーターを使用してください。
import { createAjvValidator } from 'svelte-jsoneditor'
const validator = createAjvValidator ( { schema , schemaDefinitions } ) parser: JSON = JSON lossless-jsonのようなカスタムJSONパーサーを構成します。デフォルトでは、JavaScriptのネイティブJSONパーサーが使用されます。 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パーサーが使用されます。 Custom validationParserを渡すときは、パーサーの出力が設定されたvalidatorによってサポートされていることを確認してください。したがって、 validationParser bigint番号または他の数値タイプを出力できる場合、 validatorもそれをサポートする必要があります。ツリーモードでは、 parser validationParserに等しくない場合、JSONドキュメントは、 validationParser.parse(parser.stringify(json))を介してvalidatorに渡される前に変換されます。
pathParser: JSONPathParserプロパティ名を持つ配列であるJSONPath解析およびstringiyするための解析とstringifyメソッドを備えたオプションのオブジェクト。 pathParserは、ナビゲーションバーの右側にある編集ボタンをクリックして開くナビゲーションバーのパスエディターで使用されます。 pathParser.parse関数は、入力が無効な場合にエラーをスローすることができます。デフォルトでは、JSONパス表記が使用されます。これは$.data[2].nested.propertyのように見えます。または、たとえば/data/2/nested/propertyなどのJSONポインター表記など、カスタムメイドを使用することもできます。関連ヘルパー機能： 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 }です。返される2つのうちどれがエディターのモード、適用される変更、およびドキュメントの状態（有効、無効、空）に依存します。 { text }無効なJSONを含めることができることに注意してください： textモードで入力する間、ユーザーが新しい文字列を入力しているときのように、JSONドキュメントは一時的に無効になります。パラメーターpatchResultは、JSONパッチドキュメントとして表現できる変更に対してのみ返されます。たとえば、 textモードで自由に入力する場合はそうではありません。
onChangeMode ( mode : 'tree' | 'text' | 'table' )モードが変更されたときに呼び出されます。
onClassName ( path : JSONPath , value : any ) : string | undefinedパスおよび/または値に基づいて、特定のノードにカスタムクラス名を追加します。カスタムクラスでは、 --jse-contents-background-colorなどのCSS変数をオーバーライドして、背景色のようにノードのスタイリングを変更できることに注意してください。関連する変数は次のとおりです。
--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から左にレンダリングされるなど、複数のコンポーネントを互いに並んでレンダリングできます。組み込みのカラーピッカーやタイムスタンプのタグを無効にするために、 renderValueのソースコードを調べてコピーしてから、機能から不要なコンポーネントを削除できます。ビルトイン値レンダラーコンポーネント： EditableValue 、 ReadonlyValue 、 BooleanToggle 、 ColorPicker 、 TimestampTag 、 EnumValue 。
JSON Schema Enumsの場合、既製の値レンダラーrenderJSONSchemaEnumがあり、 EnumValueコンポーネントを使用してenumsをレンダリングします。これは次のように使用できます。
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 、1つまたは複数のレンダラーを使用して配列を返す必要があります。各レンダラーは、SvelteコンポーネントまたはSvelteアクションのいずれかにすることができます。
interface SvelteComponentRenderer {
component : typeof SvelteComponent < RenderValuePropsOptional >
props : Record < string , unknown >
}
interface SvelteActionRenderer {
action : Action // Svelte Action
props : Record < string , unknown >
} SvelteComponentRendererインターフェイスを使用して、上記のEnumValueコンポーネントのようなSvelteコンポーネントを提供できます。 SvelteActionRendererはactionプロパティとして膨大なアクションを期待しています。このインターフェイスは単純なJavaScriptインターフェイスであるため、これによりバニラ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が適用され、Contextメニューが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 ）になります。 isTextSelectionやisValueSelectionなどのタイプガードを使用して、選択のタイプを確認します。
queryLanguages: QueryLanguage [ ]変換モーダルで使用できる1つまたは複数のクエリ言語を構成します。ライブラリには、次の言語が付属しています。
言語は次のようにロードできます。
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 >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) rootオブジェクト、このオブジェクトの配列を展開しますが、204番目のアイテム自体は展開しません。editor.expand(['array', '204'], relativePath => relativePath.length < 2)ルートオブジェクト、このオブジェクトの配列を展開し、204番目の配列アイテムとそのすべての子供のすべての深さを最大2レベルまで展開します。ライブラリは、一般的に使用されるcallback関数について、いくつかのユーティリティ関数をエクスポートします。
expandAll ：ネストされたすべてのオブジェクトと配列を再帰的に拡張します。expandNone ：ルートオブジェクトや配列ではなく、何も展開しません。expandSelf ：ルート配列またはオブジェクトを展開します。これは、 callbackパラメーターのデフォルトです。expandMinimal ：ルート配列またはオブジェクトを展開し、配列の場合は最初の配列アイテムを展開します。 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コールバックがトリガーされます。 idが提供されている場合、Transform Modalは、編集者変換モーダルのステータスではなく、このidの以前のステータスをロードします。
JSONEditor . prototype . scrollTo ( path : JSONPath ) : Promise < void >指定されたパスが表示されるように、エディターを垂直にスクロールします。モードtreeとtableにのみ適用されます。必要に応じてパスが拡張されます。復帰した約束は、スクロールが終了した後に解決されます。
JSONEditor . prototype . findElement ( path : JSONPath )特定のパスのDOM要素を見つけます。見つからないときにnullを返します。
JSONEditor . prototype . acceptAutoRepair ( ) : Promise < Content >ツリーモードでは、無効なJSONがロード時に自動的に修復されます。修理が成功した場合、修理されたコンテンツはレンダリングされますが、ユーザーが「OK」をクリックするか、データの編集を開始するまで、ドキュメント自体にまだ適用されていません。修理を受け入れる代わりに、ユーザーは「代わりに手動で修理」をクリックすることもできます。 .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から削除します。
ライブラリは、一連のユーティリティ関数をエクスポートします。これらの関数の正確な定義は、タイプスクリプトDにあります
renderValuerenderJSONSchemaEnumBooleanToggleColorPickerEditableValueEnumValueReadonlyValueTimestampTaggetValueClasskeyComboFromEventcreateAjvValidatorjsonQueryLanguagejmespathQueryLanguagelodashQueryLanguagejavascriptQueryLanguageisContentisTextContentisJSONContentisLargeContenttoTextContenttoJSONContentestimateSerializedSizeexpandAllexpandMinimalexpandNoneexpandSelfisValueSelectionisKeySelectionisInsideSelectionisAfterSelectionisMultiSelection 、isEditingSelectioncreateValueSelectioncreateEditValueSelectioncreateKeySelectioncreateEditKeySelectioncreateInsideSelection 、createAfterSelectioncreateMultiSelectiongetFocusPathgetAnchorPathgetStartPathgetEndPathgetSelectionPathsisEqualParserparseJSONPathstringifyJSONPathresizeObserveronEscapevalueTypestringConvertisObjectisObjectOrArrayisBooleanisTimestampisColorisUrlisContentParseErrorisContentValidationErrorsimmutable-json-patchをインストールして、その機能を使用できます。immutableJSONPatchrevertJSONPatchparseJSONPointerparsePathparseFromcompileJSONPointercompileJSONPointerPropgetInsetInupdateIninsertAtexistsIndeleteInタイプスクリプトタイプ（ 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など）を変更して切り替えることができます。
完全なスベルトの例：
< 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変数を動的に更新する場合、gir editorRef.refresh()を更新して、溝のライン番号のフォントサイズを更新し、 textモードのインデントマーカーの色を更新する必要があります。
< script >
let editorRef
function refresh ( ) {
editorRef ?. refresh ( )
}
</ script >
< JSONEditor bind:this =" {editorRef} " ... /> 編集者のcontentが不変の方法でのみ更新されることが重要です。 contentを変えると、履歴が破損し（元に戻す/やり直し）、変更に応じて常にユーザーインターフェイスをすぐに更新するとは限りません。
不変の変更を必要とする理由は次のとおりです。
不変の作業方法の他の利点は、より予測的でエラーが発生しにくいデータで作業するデータを作成することです。このビデオやこの記事など、主題に関する記事やビデオを検索することで、不変性について詳しく知ることができます。不変性が必ずしも最良の選択ではありませんが、このJSONエディターの場合、私たちは通常、単一のネストされた値を更新するなどの小さな変更のみを行います。ここで不変のアプローチが実際に輝いているため、 svelte-jsoneditor 512 MBまでのJSONドキュメントをスムーズにレンダリングおよび編集できます。
これが可変変化の例です。
// 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年に最初に公開） | 後継者（2021年に最初に公開） |
| フレームワーク | 低レベルDOM操作を使用して、Plain JavaScriptに実装されています | Svelteを使用します |
| ツリーモード | すべての行の左側にコンテキストメニューボタンを持つツリービュー。キーと値は常に編集可能な状態です。 | 右クリックしてコンテキストメニューを開き、ダブルクリックしてキーまたは値の編集を開始するツリービュー（スプレッドシートまたはテキストエディターに似ています）。システムクリップボードからのコピー/貼り付けをサポートします。 |
| テキストモード | ACEエディターを搭載 | コードミラーを搭載しています |
| プレビューモード | 大きなドキュメントをプレビューするために使用されます | 必要ありません、 treeとtextモードの両方が大きなドキュメントを処理できます |
既存のライブラリを拡張する代わりに新しいライブラリを作成する主な理由は次のとおりです。
josdejong/jsoneditorの古典的なツリーモードは、シンプルで簡単ですが、限られています。 josdejong/svelte-jsoneditorの新しいツリーモードにより、より合理化された編集と相互作用が可能になります。スプレッドシートやテキストエディターに非常に似ています。矢印とシフト+矢印キーを使用してナビゲートして選択するか、マウスでドラッグします。ダブルクリック（またはEnterを押して）キーまたは値の編集を開始します。操作するアイテムまたは選択を右クリックして、コンテキストメニューを開きます。カット/コピー/貼り付けを使用して、JSONの一部を移動し、他のアプリケーションと相互操作します。ライブラリがSvelteセットアップでコンパイルエラーを提供すると、ESM/CommonJSライブラリを正しい方法でインポートするのに問題があることに関連している可能性があります。エラーは次のように見えます：
syntaxerror：要求されたモジュール '/node_modules/json-source-map/index.js?v=fda884be'は、「デフォルト」という名前のエクスポートを提供しません（at 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を商業的に使用している場合、そのメンテナンスに資金を提供するのに役立つ社会的（ただし、法的な）期待はありません。ここから始めます。
