تنزيل svelte jsoneditor - تنزيل رمز المصدر svelte jsoneditor

Svelte-Jsoneditor

أداة قائمة على الويب لعرض JSON وتحريرها وتنسيقها وتحويلها والتحقق منها.

جربها: https://jsoneditoronline.org

المكتبة مكتوبة مع svelte ، ولكن يمكن استخدامها في JavaScript العادي أيضا وفي أي إطار (solidjs ، رد فعل ، vue ، الزاوي ، إلخ). يتطلب متصفحًا من مارس 2022 أو أحدث.

سمات

عرض وتحرير JSON
يحتوي على محرر نص منخفض المستوى وعرض شجرة عالية المستوى وعرض الجدول
تنسيق (تجميل) و json المدمجة
الفرز والاستعلام والتصفية وتحويل JSON
إصلاح JSON
التحقق من صحة مخطط JSON والتحقق من صحة مخصصة قابلة للتوصيل
تسليط الضوء على اللون ، التراجع/إعادة ، البحث والاستبدال
المرافق مثل منتقي الألوان وعلامة الطابع الزمني
يتعامل مع مستندات JSON الكبيرة حتى 512 ميغابايت

ثَبَّتَ

للاستخدام في مشروع سفلت:

 npm install svelte-jsoneditor

للاستخدام في الفانيليا جافا سكريبت أو أطر مثل SolidJs ، React ، Vue ، Angular ، إلخ:

 npm install vanilla-jsoneditor

يستخدم

أمثلة

ممشوق:
- ملعب: https://stackblitz.com/edit/svelte-jsoneditor-basic-use
- أمثلة:/src/المسارات/الأمثلة
أمثلة JavaScript العادية:
- جربها: https://stackblitz.com/edit/svelte-jsoneditor-plain-javaScript
- أمثلة: /أمثلة /متصفح
مثال React: https://stackblitz.com/edit/svelte-jsoneditor-
مثال VUE: https://stackblitz.com/edit/svelte-jsoneditor-in-vue

استخدام الأسلحة

قم بإنشاء 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 >

حزمة الفانيليا (استخدم في React ، Vue ، Angular ، JavaScript ، ...)

توفر المكتبة حزمة الفانيليا من المحرر عبر مكتبة NPM vanilla-jsoneditor (بدلاً من svelte-jsoneditor ) والتي يمكن استخدامها في أي بيئة وإطار متصفح. في إطار مثل React أو Vue أو Angular ، ستحتاج إلى كتابة بعض رمز الغلاف حول واجهة الفصل.

إذا كان لديك إعداد لمشروعك باستخدام 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:

Vue:
- json-editor-vue
- vue3-ts-jsoneditor
Django:
- Django-svelte-jsoneditor

API

مُنشئ

مكون سفيلتي:

 < 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 في حالة وظيفة مصنع Vanilla JS: createJSONEditor({ target, props: { content, mode } .

محتوى

content: Content

تمرير محتويات JSON ليتم تقديمها في Jsoneditor. Content هو كائن يحتوي على خاصية json (مستند JSON محجوب) أو text (مستند 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

mainMenuBar: boolean

إظهار شريط القائمة الرئيسي. القيمة الافتراضية true .

NavigationBar

navigationBar: boolean

أظهر شريط التنقل معه ، حيث يمكنك رؤية المسار المحدد والتنقل عبر المستند الخاص بك من هناك. القيمة الافتراضية true .

statusbar

statusBar: boolean

اعرض شريط الحالة في أسفل محرر 'text' ، ويظهر معلومات حول موقع المؤشر والمحتويات المحددة. القيمة الافتراضية true .

ASKTOFORMAT

askToFormat: boolean

عندما true (افتراضيًا) ، سيتم سؤال المستخدم عما إذا كان هو/هي يريد تنسيق مستند JSON عند تحميل مستند مضغوط أو لصقه في وضع 'text' . ينطبق فقط على وضع 'text' .

قراءة

readOnly: boolean

افتح المحرر في وضع القراءة فقط: لا يمكن إجراء أي تغييرات ، يتم إخفاء الأزرار غير ذات الصلة من القائمة ، ولا يتم تمكين قائمة السياق. القيمة الافتراضية false .

المسافة البادئة

indentation: number | string

يستخدم عدد المساحات للمسافة البادئة عند تصويري JSON ، أو سلسلة لاستخدامها كمسافة بادئة مثل 't' لاستخدام علامة تبويب كمسافة بادئة ، أو ' ' لاستخدام 4 مسافات (وهو ما يعادل تكوين indentation: 4 ). انظر أيضا tabSize الخاصية.

TabSize

tabSize: number

عندما يتم تكوين المسافة البادئة كحرف علامة تبويب ( indentation: 't' ) ، تقوم tabSize بتكوين حجم حرف علامة تبويب كبيرة. القيمة الافتراضية هي 4 . ينطبق فقط على وضع text .

EscapeControlCharcers

escapeControlCharacters: boolean

خطأ بشكل افتراضي. عندما true ، يتم تقديم أحرف التحكم مثل NewLine و Tab كأحرف هاربة n و t . يتم تطبيق أحرف التحكم في وضع 'tree' القابل للتطبيق فقط ، في وضع 'text' .

EscapeUnicoDecharacters

escapeUnicodeCharacters: boolean

خطأ بشكل افتراضي. عندما true ، أحرف Unicode مثل ☎ و؟ يتم تقديمها هربًا مثل u260e و ud83dude00 .

Flattencolumns

flattenColumns: boolean

صحيح بشكل افتراضي. ينطبق فقط على وضع 'table' . عندما يكون true ، سيتم عرض خصائص الكائن المتداخلة لكل منها في العمود الخاص بها ، مع المسار المتداخل كاسم عمود. عندما يتم عرض الأشياء الخاطئة false ، وسوف يفتحها النقر المزدوج عليها في نافذة منبثقة.

المدقق

 validator : function ( json : unknown ) : ValidationError [ ]

التحقق من صحة وثيقة JSON. على سبيل المثال ، استخدم مدقق مخطط JSON المدمج مدعومًا بواسطة AJV:

 import { createAjvValidator } from 'svelte-jsoneditor'

const validator = createAjvValidator ( { schema , schemaDefinitions } )

محلل

parser: JSON = JSON

تكوين محلل JSON مخصص ، مثل lossless-json . بشكل افتراضي ، يتم استخدام محلل JSON الأصلي من JavaScript. واجهة JSON هي كائن stringify parse على سبيل المثال:

 < 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

pathParser: JSONPathParser

كائن اختياري ذو طريقة تحليل وطريقة متقلبة لتحليل وتوتيح JSONPath ، وهي صفيف مع أسماء الممتلكات. يتم استخدام pathParser في محرر المسار في شريط التنقل ، والذي يتم فتحه بالنقر فوق الزر "تحرير" على الجانب الأيمن من شريط التنقل. يُسمح لدالة pathParser.parse برمي خطأ عندما يكون الإدخال غير صالح. بشكل افتراضي ، يتم استخدام تدوين مسار JSON ، والذي يشبه $.data[2].nested.property . بدلاً من ذلك ، من الممكن استخدام تدوين مؤشر JSON مثل /data/2/nested/property أو شيء مخصص. وظائف المساعد ذات الصلة: parseJSONPath و stringifyJSONPath ، parseJSONPointer و compileJSONPointer .

onerror

 onError ( err : Error )

تم إطلاق رد الاتصال عند حدوث خطأ. التنفيذ الافتراضي هو تسجيل خطأ في وحدة التحكم وإظهار رسالة تنبيه بسيطة للمستخدم.

onchange

 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

 onChangeMode ( mode : 'tree' | 'text' | 'table' )

استدعاء عند تغيير الوضع.

onClassName

 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

 onRenderValue ( props : RenderValueProps ) : RenderValueComponentDescription [ ]

تخصيص تقديم القيم. بشكل افتراضي ، يتم استخدام renderValue ، مما يجعل قيمة كإدارة قابلة للتحرير ، واعتمادًا على القيمة ، يمكن أن يؤدي أيضًا إلى تبديل منطقي ، ومسار ألوان ، وعلامة الطابع الزمني. يمكن تقديم مكونات متعددة جنبًا إلى جنب مع بعضها البعض ، مثل التبديل المنطقي ومنتقي الألوان الذي يتم تقديمه إلى اليسار من Div قابل للتحرير. من أجل تعطيل على سبيل المثال منتقي الألوان المدمج أو علامة الطابع الزمني ، يمكنك البحث عن رمز المصدر لـ renderValue ، ونسخه ، ثم قم بإزالة المكونات التي لا تريدها من الوظيفة. مكونات عارض القيمة المدمجة: EditableValue ، ReadonlyValue ، BooleanToggle ، ColorPicker ، TimestampTag ، EnumValue .

بالنسبة إلى json schema ، هناك عروض قيمة جاهزة renderJSONSchemaEnum مما يجعل التعداد باستخدام مكون 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 صفيفًا مع أحد العروض أو متعددة. يمكن أن يكون كل عارض إما مكونًا مفعمًا أو عملًا رائعًا:

 interface SvelteComponentRenderer {
  component : typeof SvelteComponent < RenderValuePropsOptional >
  props : Record < string , unknown >
}

interface SvelteActionRenderer {
  action : Action // Svelte Action
  props : Record < string , unknown >
}

يمكن استخدام واجهة SvelteComponentRenderer لتوفير مكونات Svelte مثل مكون EnumValue المذكور أعلاه. يتوقع 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

 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

 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

 onSelect : ( selection : JSONEditorSelection | undefined ) => void

تم استدعاء رد الاتصال عند تغيير التحديد. عند إزالة التحديد ، يتم استدعاء رد الاتصال مع undefined كوسيطة. في وضع text ، سيتم إطلاق TextSelection . في وضع tree table ، سيتم إطلاق JSONSelection (والذي يمكن أن يكون MultiSelection ، KeySelection ، أو EditKeySelection ، ValueSelection ، أو EditValueSelection ، أو InsideSelection ، أو AfterSelection ). استخدم typeguards مثل isTextSelection و isValueSelection للتحقق من النوع الذي يتمتع به التحديد.

QueryLanguages

queryLanguages: QueryLanguage [ ]

تكوين لغة استعلام واحدة أو متعددة يمكن استخدامها في وسيط التحويل. تأتي المكتبة مع اللغات التالية بما يلي:

jsonquery
jmespath
Jsonpath
JavaScript + Lodash
جافا سكريبت

يمكن تحميل اللغات على النحو التالي:

 import {
  jsonQueryLanguage ,
  jmespathQueryLanguage ,
  jsonpathQueryLanguage ,
  lodashQueryLanguage ,
  javascriptQueryLanguage
} from 'svelte-jsoneditor'

const allQueryLanguages = [
  jsonQueryLanguage ,
  jmespathQueryLanguage ,
  jsonpathQueryLanguage ,
  lodashQueryLanguage ,
  javascriptQueryLanguage
]

بشكل افتراضي ، يتم تحميل jsonQueryLanguage فقط في المحرر.

لاحظ أن كلا من lodashQueryLanguage و javascriptQueryLanguage يمكن أن ينفذوا رمز JavaScript التعسفي واستخدام new Function(...) لتنفيذ الرمز. لذلك ، فهي ليست مناسبة بشكل عام لتخزين أو مشاركة الاستفسارات بسبب المخاطر الأمنية. في بعض البيئات ، ستؤدي محاولة استخدامها إلى أخطاء CSP (سياسة أمان المحتوى) اعتمادًا على سياسة الأمان.

QueryLanguageid

queryLanguageId: string

id لغة الاستعلام المحددة حاليًا.

onchangequerylanguage

 onChangeQueryLanguage : ( queryLanguageId : string ) => void

تم استدعاء وظيفة رد الاتصال عندما يقوم المستخدم بتغيير لغة الاستعلام المحددة في التحويلات عبر الزر من أعلى إلى اليمين.

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 Patch لتحديث محتويات وثيقة JSON. وثيقة تصحيح JSON هي قائمة مع JSON PATCLES.

هام: فقط تطبيق التغييرات غير القابلة للتغيير على المحتويات. التغييرات القابلة للتغيير سوف تعبث التاريخ والمحتويات المقدمة. انظر قسم الثبات.

UpdateProps

 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) قم بتوسيع جميع المسارات حتى مستويين عميق
editor.expand(['array', '204']) قم بتوسيع كائن الجذر ، الصفيف في هذا الكائن ، والبند 204 في الصفيف.
editor.expand(['array', '204'], () => false) قم بتوسيع كائن الجذر ، الصفيف في هذا الكائن ، ولكن ليس العنصر 204 نفسه.
editor.expand(['array', '204'], relativePath => relativePath.length < 2) قم بتوسيع كائن الجذر ، الصفيف في هذا الكائن ، وتوسيع عنصر الصفيف 204 وكل طفلها يصل إلى عمق مستويات MAX 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 ، فسيقوم Modal Modal بتحميل الحالة السابقة لهذا id بدلاً من حالة المحررين Modal Modal.

التمرير

 JSONEditor . prototype . scrollTo ( path : JSONPath ) : Promise < void >

قم بتمرير المحرر رأسياً بحيث يتم عرض المسار المحدد. ينطبق فقط على الأوضاع tree table . سيتم توسيع المسار عند الحاجة. يتم حل الوعد الذي تم إرجاعه بعد الانتهاء من التمرير.

FindElement

 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.

وظائف الأداة المساعدة

تصدر المكتبة مجموعة من وظائف الأداة المساعدة. يمكن العثور على التعريفات الدقيقة لتلك الوظائف

تقديم القيم:
- renderValue
- renderJSONSchemaEnum
- عناصر:
  - BooleanToggle
  - ColorPicker
  - EditableValue
  - EnumValue
  - ReadonlyValue
  - TimestampTag
- HTML:
  - getValueClass
  - keyComboFromEvent
تصديق:
- createAjvValidator
لغات الاستعلام:
- jsonQueryLanguage
- jmespathQueryLanguage
- lodashQueryLanguage
- javascriptQueryLanguage
محتوى:
- isContent
- isTextContent
- isJSONContent
- isLargeContent
- toTextContent
- toJSONContent
- estimateSerializedSize
يوسع:
- expandAll
- expandMinimal
- expandNone
- expandSelf
اختيار:
- isValueSelection
- isKeySelection
- isInsideSelection
- isAfterSelection
- isMultiSelection ،
- isEditingSelection
- createValueSelection
- createEditValueSelection
- createKeySelection
- createEditKeySelection
- createInsideSelection ،
- createAfterSelection
- createMultiSelection
- getFocusPath
- getAnchorPath
- getStartPath
- getEndPath
- getSelectionPaths
المحلل:
- isEqualParser
طريق:
- parseJSONPath
- stringifyJSONPath
الإجراءات:
- resizeObserver
- onEscape
اكتب التحقق:
- valueType
- stringConvert
- isObject
- isObjectOrArray
- isBoolean
- isTimestamp
- isColor
- isUrl
typeguards:
- isContentParseError
- isContentValidationErrors
المزيد: يمكنك تثبيت immutable-json-patch واستخدام وظائفه:
- immutableJSONPatch
- revertJSONPatch
- parseJSONPointer
- parsePath
- parseFrom
- compileJSONPointer
- compileJSONPointerProp
- getIn
- setIn
- updateIn
- insertAt
- existsIn
- deleteIn

الأنواع

يتم تعريف أنواع 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 >

موضوع مظلم

يأتي المحرر مع موضوع مظلم مدمج. لاستخدام هذا الموضوع:

قم بتحميل ملف CSS للموضوع المظلم: themes/jse-theme-dark.css
أضف اسم الفصل jse-theme-dark للموضوع المظلم إلى عنصر حاوية HTML حيث يتم تحميل المحرر.

من الممكن تحميل تصميم موضوعات متعددة ، وتبديلها عن طريق تغيير اسم الفصل (مثل jse-theme-dark ) المرفقة بعنصر حاوية HTML.

مثال كامل:

 < 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 ديناميكيًا ، من الضروري تحديث editorRef.refresh() لتحديث حجم الخط لأرقام الخط في الحضيض وتحديث ألوان علامات المسافة البادئة في وضع text :

 < script >
  let editorRef

  function refresh ( ) {
    editorRef ?. refresh ( )
  }
</ script >
< JSONEditor bind:this =" {editorRef} " ... />

ثبات

من المهم أن يتم تحديث content المحرر فقط بطريقة غير قابلة للتغيير. إن تحديث content سيؤدي إلى كسر السجل (التراجع عن/إعادة) ، ولن يقوم دائمًا بتحديث واجهة المستخدم على الفور وفقًا للتغييرات.

أسباب طلب تغييرات ثابتة هي:

من الضروري لدعم السجل (التراجع/إعادة).
يسمح بإعادة تقديم فعالة فقط من الأقسام التي تم تغييرها فقط من واجهة المستخدم.

المزايا الأخرى لطريقة العمل غير القابلة للتغيير هي أنها تجعل البيانات التي تعمل معها أكثر تنبؤة وأقل عرضة للخطأ. يمكنك معرفة المزيد حول عدم التسلط عن طريق البحث عن مقالات أو مقاطع فيديو حول الموضوع ، مثل هذا الفيديو أو هذه المقالة. لا تعتبر عدم القدرة على التأثير دائمًا الخيار الأفضل ، ولكن في حالة محرر JSON هذا ، نتعامل مع هياكل البيانات الكبيرة والمتداخلة العميقة ، والتي عادةً ما نقوم بإجراء تغييرات صغيرة فقط مثل تحديث قيمة متداخلة واحدة. إن نهجًا ثابتًا يضيء حقًا هنا ، مما يتيح svelte-jsoneditor تقديم وثائق JSON بسلاسة حتى 512 ميغابايت.

فيما يلي مثال على تغيير قابل للتغيير:

 // 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)
نطاق	تم تنفيذها في JavaScript العادي ، باستخدام عمليات DOM منخفضة المستوى	يستخدم Svelte
وضع الشجرة	عرض شجرة لها أزرار السياق على يسار كل سطر. المفاتيح والقيم دائمًا في حالة قابلة للتحرير.	عرض شجرة تستخدم النقر بزر الماوس الأيمن لفتح قائمة السياق ، وانقر نقرًا مزدوجًا لبدء تحرير مفتاح أو قيمة (أكثر تشابهًا مع جدول البيانات أو محرر النصوص). وهو يدعم النسخ/لصق من وإلى حافظة النظام.
وضع النص	مدعوم من محرر ACE	مدعوم من مرآة الرمز
وضع المعاينة	تستخدم لمعاينة المستندات الكبيرة	غير مطلوب ، يمكن لكل من وضع `tree` `text` التعامل مع المستندات الكبيرة

الأسباب الرئيسية لإنشاء مكتبة جديدة بدلاً من توسيع نطاقها الحالية هي:

أصبح من الصعب الحفاظ على قاعدة بيانات الكود ، حيث كانت البنية تحتاج إلى إصلاح كبير. تستخدم قاعدة الشفرة JavaScript العادية لإنشاء وتحديث DOM بناءً على التغييرات في حالة التطبيق. هذا معقد. إن ترك إطار عمل مثل Svelte تفعل هذا من أجلك يجعل قاعدة التعليمات البرمجية أكثر بساطة.
قيود الأداء في المحرر القديم.
وضع الشجرة: وضع الأشجار الكلاسيكي لـ josdejong/jsoneditor بسيط ومباشر ، ولكنه محدود أيضًا. يتيح وضع الأشجار الجديد لـ josdejong/svelte-jsoneditor إجراء المزيد من التحرير والتفاعل. إنه يشبه إلى حد كبير جدول البيانات أو محرر النصوص. انتقل وحدد باستخدام مفاتيح السهم و Shift+Arrow أو عن طريق السحب بالماوس. انقر نقرًا مزدوجًا (أو اضغط على Enter) لبدء تحرير مفتاح أو قيمة. افتح قائمة السياق بالنقر بزر الماوس الأيمن على العنصر أو التحديد الذي تريد تشغيله. استخدم CUT/Copy/Faste لنقل أجزاء من JSON حولها وتداخلها مع التطبيقات الأخرى.
الكود أو وضع النص: تستخدم مكتبة محرر ACE نظام الوحدة النمطية القديمة (AMD) والطريقة التي يتم بها تجميعها ونشرها من الصعب دمجها في مشاريع JavaScript الحديثة. يعتبر Code Mirror 6 واضحًا للغاية لدمجه ، ولديه أداء أفضل بكثير ، ويمكن توسيعه للغاية (يمهد الطريق للميزات المستقبلية).

القضايا المعروفة

عندما تعطي المكتبة أخطاء ترجمة في إعداد Svelte الخاص بك ، يمكن أن يكون مرتبطًا بوجود مشكلة في استيراد مكتبات 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 تجاريًا ، فهناك توقع اجتماعي (ولكن لا يوجد قانوني) بمساعدتك في تمويل صيانته. ابدأ هنا.

يوسع

svelte jsoneditor

Svelte-Jsoneditor

سمات

ثَبَّتَ

يستخدم

أمثلة

استخدام الأسلحة

حزمة الفانيليا (استخدم في React ، Vue ، Angular ، JavaScript ، ...)

مكتبات الغلاف لأطر محددة

API

مُنشئ

ملكيات

محتوى

اختيار

وضع

Mainmenubar

NavigationBar

statusbar

ASKTOFORMAT

قراءة

المسافة البادئة

TabSize

EscapeControlCharcers

EscapeUnicoDecharacters

Flattencolumns

المدقق

محلل

التحقق من الصحة

Pathparser

onerror

onchange

Onchangemode

onClassName

onrendervalue

onrendermenu

onrendercontextmenu

onselect

QueryLanguages

QueryLanguageid

onchangequerylanguage

طُرق

يحصل

تعيين

تحديث

رقعة

UpdateProps

يوسع

ينهار

تحول

التمرير

FindElement

قبول

ينعش

التحقق

يختار

ركز

تدمير

وظائف الأداة المساعدة

الأنواع

التصميم

لون موضوع مخصص

موضوع مظلم

تحديث الأنماط ديناميكيا

ثبات

الاختلافات بين josdejong/svelte-jsoneditor و josdejong/jsoneditor

القضايا المعروفة

يطور

رخصة

الاختلافات بين `josdejong/svelte-jsoneditor` و `josdejong/jsoneditor`