nib

ib

デモ

HTMLでの豊富なテキスト編集に利用できるさまざまなオプションにもかかわらず、非常に挑戦的なエリアであり続けています。 Prosemirrorは、この問題に最適なソリューションであることがわかりました。著者のMarijn Haverbekeによる素晴らしい仕事です。

編集者をフレームワークからゼロにすることは依然として多くの作業であり、プロジェクトはProsemirrorを使用した豊富なテキスト編集のコンポーネントを構築することを目的としています。これらのコンポーネントは、反応または非反応アプリケーションにすばやく統合できます。

NIBは、優れたリッチテキスト編集機能を備えているだけでなく、ドキュメントに作成された追跡変更、ドキュメントにコメントの追加、共同編集などなどの複雑な編集要件にも対応しています...

設定

編集者のセットアップは非常に簡単です。 npmからインストールする必要があります。

パッケージのインストール：

npmまたはyarnコマンドのいずれかを使用できます。

 npm i nib-core --save

編集者コンポーネントの作成：

 import React from "react";
import Editor from "nib-core";

const MyEditor = () => <Editor />;

LIBはサーバー側に動作しないことに注意してください。

小道具

編集者がサポートする小道具。

s.no.	名前	説明
1	アドオン	コアエディターに機能を追加するためのプラグインの配列
2	オートフォーカス	デフォルトでエディターをフォーカスします
3	config	エディターでプラグイン、ツールバーなどの構成、デフォルトの構成は次のとおりです
4	defaultValue	エディターコンテンツを初期化する値
5	免許キー	NIB編集者のライセンスキー
6	onchange	エディターの変更に呼び出されるコールバック
7	スペルチェック	編集者でデフォルトのブラウザスペルチェックを有効にするためのブールプロパティ
8	styleconfig	エディターでより詳細なスタイルの変更を行うために使用されますが、デフォルトは次のとおりです
9	テーマ	編集者のテーマ、デフォルトのテーマは次のとおりです

特徴

1. ほぼすべてのブラウザとデバイスのサポート
2. 太字、イタリック、下線、ストライク、添え字、上付き文字、テキストカラー、フィルルカラーなどの複数のリッチテキストスタイリングオプション
3. さまざまなブロックタイプのサポートパラグラフ、H1 -H6、BlockQuoteなど
4. ハイパーリンクのサポート
5. ネストされた注文されていないリストのサポート
6. 画像のラッピング、アライディング、再サイジング、リンクなどのオプションを備えた画像のサポート
7. フローティングツールバーを使用したインラインモードのサポート
8. カスタマイズされたディスプレイのサポート - 完全なページ、ディスプレイなどの単語など
9. 元に戻して変更をやり直してください。
10. サポートされているフォーマットオプションとそのキーボードショートカットを表示するヘルプメニュー
11. さまざまなテーマを使用したエディターのルックアンドフィールを変更します
12. Prosemirror JsonをMarkdownに往復します
13. Prosemirror JSONをHTMLに変換します
14. ソースコード編集
15. 列/行の追加/削除、列のサイズ変更などの事前オプションを備えたテーブル
16. YouTubeやVimeoなどのソースからビデオを表示するためのサポート
17. カスタムプラグインを追加する柔軟性
18. ドキュメントの変更の変更と、ユーザー名、タイムスタンプなどの変更について保存されたメタデータとともに
19. ドキュメントへのコメントの追加 /編集
20. 同じドキュメントで複数のユーザーとの共同編集

ライセンス

GNU一般公開ライセンス。

接触

詳細またはクエリについては、[email protected]にメールをドロップします。