react json editor ajrm
Locale Support & Other
警告：
すでにご存知かもしれませんが、react-json-editor-ajrm の元のプロジェクトは積極的にメンテナンスされておらず、最終的には非推奨になる予定です。そこで、正式な廃止日を設定することにしました。暫定的な日付は 2023 年 6 月 15 日です。
プロジェクトでこれを使用した人々、およびプロジェクトに何らかの形で貢献した人々に感謝したいと思います。私はもうこのプロジェクトを維持したくありません。これは私のソフトウェア エンジニアとしてのキャリアの初期に作成されたもので、今日の基準にも私の基準にも追いついていません。
でも心配しないでください。私はこのプロジェクトに新たな命を吹き込み、ゼロから書き直すつもりです。
過去の教訓を生かして、react-json-editor-ajrm が現在抱えている問題のいくつかを回避したいと考えています。また、うまくいった点は強調したいと思いますし、続けていきたいと思います。
私はこの新しいプロジェクトのホームをここ enio に設定しました。質問やコメントがある場合は、ここでディスカッションも設定しました。
JavaScript オブジェクト構文を表示、編集、デバッグするための、スタイリッシュでエディター風のモジュール式反応コンポーネントです。
$ npm i --save react-json-editor-ajrm
import JSONInput from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';
<JSONInput
id = 'a_unique_id'
placeholder = { sampleObject }
colors = { darktheme }
locale = { locale }
height = '550px'
/>
ヒント: react-json-editor-ajrm/esつの異なるルート パスreact-json-editor-ajrmあります。 1 つ目はポリフィルされた ES5 コードを含み、2 つ目はポリフィルされていない ES6 コードを含みます。 react-json-editor-ajrm/esバージョンは、 create-react-appと互換性がありません。どれが必要かわからない場合は、最初のものを選択してください。ツールやブラウザとの互換性が最も優れています。
./examplesフォルダーには 2 つの例が含まれています。
$ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
$ npm i
$ npm start
http://localhost:8080を開きます。 placeholderプロパティで JavaScript オブジェクトを受け入れます。English 、 German 、 Spanish 、 Chinese 、 French 、 Indonesian 、 Russian 、 Hindi 、 Japanese 、 Tamilのロケールをサポートします。 | 名前 | 説明 | タイプ | 必須 |
|---|---|---|---|
| ロケール | エディタのロケール。次のようにロケールをインポートします: import locale from 'react-json-editor-ajrm/locale/en' 。もっと詳しく知る | 物体 | 必須 |
| ID | 実際のテキスト入力 DOM ノードに割り当てるオプションのid 。テキスト入力とは別に、次のノードも ID を受け取ります: {id}-outer-box 、 {id}-container 、 {id}-warning-box 、 {id}-labels | 弦 | オプション |
| プレースホルダー | コンポーネントがマウントされたときに表示される有効な JavaScript オブジェクトを送信します。コンポーネントの初期コンテンツを再レンダリングするには、別の値を割り当てます。 | 物体 | オプション |
| リセット | true送信すると、コンポーネントは常に再レンダリングされるか、 placeholderプロパティで指定された値に「リセット」されます。 | ブール値 | オプション |
| 表示のみ | コンテンツを編集できないように表示したい場合は、 true送信します。 | ブール値 | オプション |
| onChange | onKeyPressイベントが発生するたびに、コンテンツ値が返されます。 | 物体 | オプション |
| オンブラー | onBlurイベントが発生するたびに、コンテンツ値が返されます。 | 物体 | オプション |
| 確認しました良い | 構文が適切であることを確認するチェックマークを非表示にしたい場合は、 false送信します。 | ブール値 | オプション |
| 身長 | コンポーネント全体の特定の高さを設定するための短縮プロパティ。 | 弦 | オプション |
| 幅 | コンポーネント全体の特定の幅を設定するための短縮プロパティ。 | 弦 | オプション |
| onKeyPressUpdate | キーを押したときにコンポーネントが自動的に更新されないようにするには、 false送信します。 | ブール値 | オプション |
| キーを押した後待つ | キーを押した後にコンテンツを再レンダリングするまで待機するミリ秒数。指定しない場合、値はデフォルトの1000になります。つまり、最後のキーストロークの後に 1 秒以内に追加のキーストロークがない場合、コンポーネントは更新されます。 100ミリ秒未満では違いはありません。 | 番号 | オプション |
| エラーテキストの変更 | コンポーネントの元の警告テキストを変更するカスタム関数。この関数はstring型の単一パラメータを受け取り、同様にstring返す必要があります。 | 関数 | オプション |
| エラー | 次のプロパティが含まれます。 | 物体 | オプション |
| エラー.理由 | カスタムエラーメッセージを含む文字列 | 弦 | オプション |
| エラー行 | カスタムエラーメッセージに関連する行番号を示す番号 | 番号 | オプション |
| テーマ | 使用する組み込みテーマを指定します。 | 弦 | オプション |
| 色 | 次のプロパティが含まれます。 | 物体 | オプション |
| 色.デフォルト | 中bracesやcommaなどの記号の 16 進数のカラー コード。 | 弦 | オプション |
| 色.文字列 | string値として識別されるトークンの 16 進数のカラー コード。 | 弦 | オプション |
| 色.番号 | integeter 、 double 、またはfloat値として識別されるトークンの 16 進数のカラー コード。 | 弦 | オプション |
| 色.コロン | colonとして識別されるトークンの 16 進カラー コード。 | 弦 | オプション |
| 色.キー | keysまたはプロパティ名として識別されるトークンの 16 進数のカラー コード。 | 弦 | オプション |
| color.keys_whiteSpace | 引用符で囲まれたkeysとして識別されるトークンの 16 進カラー コード。 | 弦 | オプション |
| 色.プリミティブ | boolean値および null として識別されるトークンの 16 進カラー コード。 | 弦 | オプション |
| 色.エラー | errorタグでマークされたトークンの 16 進数のカラーコード。 | 弦 | オプション |
| 色.背景 | コンポーネントの背景の 16 進数のカラー コード。 | 弦 | オプション |
| 色.背景_警告 | コンポーネントの上部に表示される警告メッセージの 16 進数のカラー コード。 | 弦 | オプション |
| スタイル | 次のプロパティが含まれます。 | 物体 | オプション |
| スタイル.アウターボックス | コンポーネントの外側のコンテナ div のデフォルトのスタイルを変更するプロパティ。 | 物体 | オプション |
| スタイル.コンテナ | コンポーネントのcontainerのデフォルトのスタイルを変更するプロパティ。 | 物体 | オプション |
| style.warningBox | 警告メッセージのコンテナ div のデフォルトのスタイルを変更するプロパティ。 | 物体 | オプション |
| style.errorMessage | 警告メッセージのデフォルトのスタイルを変更するプロパティ。 | 物体 | オプション |
| スタイル.ボディ | 行ラベルとコードのコンテナ div のデフォルトのスタイルを変更するプロパティ。 | 物体 | オプション |
| style.labelColumn | 行ラベルのコンテナ div のデフォルトのスタイルを変更するプロパティ。 | 物体 | オプション |
| style.labels | 各行ラベルのデフォルトのスタイルを変更するプロパティ。 | 物体 | オプション |
| style.contentBox | コードのコンテナ div のデフォルトのスタイルを変更するプロパティ。 | 物体 | オプション |
outerBox
+-- container
+--- warningBox
+---- errorMessage
+--- body
+---- labelColumn
+----- labels
+---- contentBox
+----- auto generated markup
RJEA がそのコンテンツを再レンダリングするたびに、 onChangeプロパティに渡される関数は、次のキーと値を持つ単一のオブジェクト パラメーターを受け取ります。
| 鍵 | 説明 |
|---|---|
| プレーンテキスト | 改行とインデントを含むコンテンツの文字列表現。 console.log() に最適 |
| マークアップテキスト | コンテンツのレンダリングに使用される自動生成マークアップの文字列表現。 |
| json | コンテンツの JSON.stringify バージョン。 |
| jsオブジェクト | コンテンツのjavascript objectバージョン。コンテンツの構文が間違っている場合は、 undefinedを返します。 |
| 行 | 表示されるコンテンツに対してレンダリングされる行数。 |
| エラー | コンテンツの構文が正しくない場合を除き、 falseを返します。その場合、 tokenと、エラーが発生した場所に対応するline番号およびそのreason含むオブジェクトが返されます。 |
RJEA は組み込みテーマをサポートしています。こちらがリストです。
このプロジェクトは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE.md ファイルを参照してください。
これらの素晴らしい人々に感謝します ?:
アンドリュー・レディカン ? ? | パトリック・サックス ? | アラン・ケール ? | エスベンブ | マルクス・ペトリコウスキー | リック・ブランシュテット | ADダーティキャット ? |
セドリック ? | ラディット ? | アスケテス ? | CGヴェダント ? | シェバズ・ジャフリ ? | バサンサ・クマールRB ? | アディティア・ペリワル ? |
アレクセイ・リャホフ | テレンス・ハイン | リチャード・ハル | トニングイエニット18 |
このプロジェクトは、全員参加者の仕様に従っています。あらゆる種類の貢献を歓迎します!
