json schema editor

Json-schema-Editor

スキーマの構造を提示するツリービューと、スキーマ要素のプロパティを編集するプロパティインスペクターを提供するJSONスキーマの直感的な編集者。 Vue.js 2とFirebaseで開発します。詳細については、プロジェクトWebサイトを参照してください。

特徴

スキーマ要素のパレット

JSONスキーマのすべての要素のリストは、ツリービューにドラッグアンドドロップできます。

ユーザースキーマのパレット

Firebaseに保存されているすべてのユーザースキーマのリスト。ユーザーはスキーマを保存、ロード、削除、インポートすることができ、スキーマはドラッグアンドドロップにツリービューにドロップできます。

スキーマ要素のツリービュー

スキーマの構造は、あらゆるレベルで消費または崩壊する可能性があります。

コンテキストメニュー

ツリービューの要素を右クリックすると、その要素のコンテキストメニューが表示され、その要素に固有のアクションを実行できます。

スキーマ要素のプロパティインスペクター

スキーマ要素のプロパティを編集するパネル。

スキーマのテキストビュー

スキーマのコンテンツを表示するテキストビュー。

ドラッグアンドドロップ

JSONスキーマの要素は、パレットからツリービューまたはツリービュー内にドラッグアンドドロップできます。

元に戻す/やり直します

元に戻してredoは、スキーマのすべての更新を追跡できます。

スキーマリポジトリ

ユーザーは、ファイルからスキーマをfirebaseリポジトリに保存/ロードできます。ファイルからスキーマをインポートできます。

インストール

git clone https://github.com/tangram-js/json-schema-editor.git

建てる

 # install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

FireBase構成について

このプロジェクトでは、適切に機能するために有効なFireBase構成が必要です。firebase構成で構成を/src/firebase/index.jsに置き換えてください。

 // Initialize firebase
// Replace following config with your Firebase config
var config = {
  apiKey : 'your firebase api key' ,
  authDomain : 'your firebase auth domain' ,
  databaseURL : 'your firebase database url' ,
  projectId : 'your firebase project id' ,
  storageBucket : 'your firebase storage bucket' ,
  messagingSenderId : 'your firebase message sender id'
} 

JSONエディターについて

JSONエディターは、JSONスキーマを含むJSONドキュメントのスキーマアウェアエディターであるJSON Schema Editorの後継者です。 JSONドキュメントの構造を提示するツリービューを提供し、ユーザーはコンテキストメニューからJSONを操作できます。 JSONドキュメントのコンテンツを提示するテキストビューがあり、ユーザーは内部でJSONを編集することができます。ユーザーアカウントとユーザースキーマリポジトリを共有するため、ユーザーは1つのアカウントを使用してエディターとアクセススキーマの両方をログインできます。