re editor

再編集者・

箱から出してReact Rich Text Editor

• 使い方
  • 箱から出して、ANTDスタイルのツールバーを提供します
  • カスタム - エディターコアのみを紹介し、ツールバーをカスタマイズします
• よくある質問
• サポートされている機能

特徴

• 箱から出して、構成は必要ありません
• カスタマイズして、自分でスタイルとフォームのツールバーを開発できます[API完了]
• 画像サイズの変更など、要素機能の設定をサポートします
• マークダウン構文をサポートします
• もっと参照してください

使い方

さまざまな開発ニーズに適応するために、編集者は次の2つの使用方法を提供します。

箱から出してください

Reeditorは、インストール後に使用できるカプセル化されたコンポーネントです。 @reeditor/coreと @reeditor/toolbar-antdが含まれています。ツールバーは、デフォルトでANTDスタイルを使用します。他のツールバーを使用する場合は、次のカスタムドキュメントを参照してください

インストール依存関係

$ npm install re-editor

スタイルを紹介します

JSで紹介

 import 're-editor/lib/styles/index.css'

また、CSSで紹介することができます（CSSの前処理サポートが必要です）

 @import 're-editor/lib/styles/index.css'

小道具

財産	説明します	タイプ
価値	編集者の価値	物体
onchange	エディターのコンテンツを変更するためのコールバック	（値：値）=> void
プレースホルダー	プレースホルダーテキスト	弦
読みます	読み取り専用モード	ブール
onimageupload	カスタム画像ベッド	（file：file）=> promise <url：string>
ツール	ツールバーの表示コンテンツを設定します	配列<配列

ツールバーを設定してコンテンツを表示します

tools propsサポート配列フォーム、2次元配列の場合、グループに表示されます

 tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
  [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
  [ 'orderedlist' , 'unorderedlist' ]
] }

名前	関数
大胆な	大胆な
イタリック	イタリック
下線	下線
strikethrough	行を削除します
OrderedList	注文リスト
UnoderedList	順序付けられていないリスト
見出し	タイトル
整列します	アライメント
画像	写真
テーブル	シート
コード	コード
元に戻します	取り消す
やり直します	やり直し
全画面表示	全画面表示

カスタマイズ

編集者は、コンテンツ編集領域とツールバーの2つの部分に分割されます。以下は、ツールバーをカスタマイズする方法について説明します

エディターコアをインストールします

$ npm install @re-editor/core

ツールバーを作成します

エディターツールバーを何らかの形で作成できます。エディターインスタンスをツールバーに渡す必要があります。 Reeditorと @Reeditor/Toolbar-ANTDの実装を参照して、詳細についてはAPIドキュメントを表示できます（ドキュメントのこの部分はまだ記述されていませんが、近い将来に完了しますか？）

たとえば、大胆な関数を実装します。

 import { command } from '@re-editor/core' ;

const Demo = ( props ) => {
  function handleClick ( ) {
    command ( props . editor ) ( 'bold' )
  }
  return < div onClick = { handleClick } > bold </ div >
}

パッケージの紹介

• Reeditor：ツールバー付きのカプセル化されたエディター
• @Reeditor/Core：Editor Core
• @Reeditor/Toolbar-AntD：ANTDに基づくツールバー、デフォルト
• @Reeditor/Examples：デモプロジェクト

よくある質問

スレートまたはドラフトJSとの比較の違いは何ですか？

スレートやドラフトは純粋な編集者ではなく、編集者を構築するためのフレームワークのようなものです。 Reeditorはスレートに基づいて開発されているため、构建编辑器プロセスに注意を払う必要はありません。

スタイルを変更する方法

スタイルは、ノード（太字、H1、H2など）とツールバーの2つの部分に分かれています。彼らはすべてCSSを介して基本的なスタイルを書き直すことができ、ツールバーはCSSを通じてスタイルを完全に書き直すこともできます。

保存されたデータの量が毎回大きすぎる場合はどうすればよいですか？

インクリメンタルアップデートを使用すると、オンチェンジコールバックの値は不変の形式です。 Immutable-JS-Diffおよびその他の方法を使用して、Incremental UpdateのためにDIFFのコンテンツを取得できます

アップロード画像サーバーを指定する方法

画像はデフォルトでBase64として保存されます。指定されたサーバーに画像をアップロードする必要がある場合は、 onImageUpload関数を使用できます（file：file）=> promise <url：string> sample code

関数

テキスト装飾

粗体斜体下划线删除线下标を削除します

リスト

有序列表无序列表

アライメント

左对齐右对齐居中对齐两端对齐

タイトル

h1 h2 h3 h4 h5 h6

他の

• 图片
  • サイズを設定します
  • クリップボードからコピーします
  • 写真サーバーアドレスのカスタムアップロードをサポートします
• 表格
  • 行を追加します
  • 列を追加します
  • 行を削除します
  • 列を削除します
• 代码高亮
  • JS
  • CSS
  • HTML
• markdown
  • H1-H6： #
  • 引用： >
  • 注文リスト： -
  • 順序付けられていないリスト： 1.
• フルスクリーン編集

他の機能は増加し続けています...