React Rich Text Editor - WYSIWYG Markdown エディター
- 豊富なツールでHTML/Markdownを編集できるWYSIWYG。
- ブログエディターやHTMLメール等のアプリに簡単に組み込めます。
- 編集可能要素を選んでその場で編集できるツールバーやインラインエディターを作成できます。
Quick Overview Video
Trusted by the world’s leading companies
概要
React Rich Text Editor は、機能豊富な WYSIWYG HTML エディターおよび WYSIWYG Markdown エディターです。Rich Text Editor は、ブログ、フォーラム投稿、メモセクション、サポートチケット（インシデント）、コメントセクション、メッセージングアプリケーションなどの作成に広く使用されています。このコントロールは、モバイルサポートを備えた優れた編集体験のための効率的なユーザーインターフェースを提供します。リッチコンテンツを編集およびフォーマットし、有効な HTML マークアップまたは Markdown (MD) コンテンツを返すためのさまざまなツールを備えています。モジュール式アーキテクチャにより、ユーザーは画像、リンク、テーブル、リストを挿入できます。
Syncfusion React Rich Text Editor を選ぶ理由
WYSIWYG エディター
React Rich Text Editor コンポーネントは、WYSIWYG HTML エディター または Markdown エディター として使用でき、構成可能な Iframe 特性を備えた Iframe 編集もサポートしています。
簡単な操作
ユーザーは、エディターの前景色と背景色の設定、番号付きおよび箇条書きのカスタムリストの追加、フォント、斜体、下線、打ち消し線、太字の指定により、テキストや段落を簡単にフォーマット できます。
柔軟な編集
より良い編集体験のために、React Rich Text Editor コンポーネントはさまざまなツールと選択肢を提供します。ユーザーは、画像、ビデオ、ハイパーリンク、テーブル を素早く挿入したり、テーブルのセル を結合したり、キーの構成 を行ったりできます。
HTML コードのプレビュー
ソースコード内で直接 HTML コードを確認および編集し、プレビュー結果を表示 します (HTML ライブエディター)。
豊富なツールセットを備えたツールバー
React 用 WYSIWYG Rich Text Editor は、完全にカスタマイズ可能な 多様なツールバー オプションを提供します。オプションにより、複数行、拡張、クイック、およびフローティングツールバーが可能です。ツールコマンドは、関連する機能に基づいてグループ化されています。
あらゆる解像度に対応
Rich Text Editor は、デスクトップ、タッチスクリーン、スマートフォン向けに高度にレスポンシブなレイアウトと最適化された設計を備えています。iOS、Android、または Windows OS を使用するすべての携帯電話で正常に動作します。
サードパーティライブラリとの統合
React HTML テキストエディターのコンテンツを改善するために、スペルチェッカーやコードミラーなどの サードパーティライブラリを統合 するのが簡単です。
グローバル化とローカライズ
日付、通貨、番号などを好みに合わせてフォーマットすることで、さまざまな地域のユーザー が Rich Text Editor を使用できるようになります。
よりスマートな執筆のための AI 対応 Rich Text Editor
AI 対応 Rich Text Editor で執筆を強化しましょう。文法の修正、コンテンツの言い換え、言語の切り替え、テキストの要約をエディター内ですべて即座に行うことができます。
React Rich Text Editor コード例
以下に示すように、数行のシンプルな TSX コードを使用して React Rich Text Editor を使い始めることができます。また、React でエディターをレンダリングおよび構成する方法を示す React Rich Text Editor の例 もご覧ください。
import { HtmlEditor, Link, Image, Inject, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
public render() {
return (
<RichTextEditorComponent>
<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling Markdown editing.</p>
</li>
</ul>
<Inject services={[Toolbar, HtmlEditor, Link, Image]} />
</RichTextEditorComponent>
);
}
}
export default App;HTML エディターのツールバー
React WYSIWYG テキストエディターのツールバーは、コンテンツの編集とフォーマットのためのさまざまなコマンドを提供します。ツールバーを使用して、テキストや段落をフォーマットしたり、画像、ハイパーリンク、テーブル、リストなどを挿入したりできます。ツールコマンドは、関連する機能に基づいてグループ化されています。
複数行ツールバー
ツールバーで溢れたコマンドは、ツールバー内の次の行に折り返されます。
ツールバーの拡張
次の行に隠れているオーバーフローツールバーコマンドは、拡張アイコンを使用してツールバーを拡張すると表示されます。
クイックツールバー
このツールバーには、テキスト、画像、テーブル、およびリンクに関連する頻繁に使用されるコマンドが含まれています。要素に素早くアクセスしてフォーマットできるだけでなく、カスタマイズも容易にします。
ツールバーのフローティング
HTML WYSIWYG エディターのツールバーは、エディターの上部に固定されるのではなく、現在のページをスクロールするとエディター領域内に浮遊します。
完全にカスタマイズ可能
React Rich Text Editor コンポーネントのツールバーボタンは完全にカスタマイズ可能です。ボタンを追加または削除したり、カテゴリに基づいてコマンドをグループ化したりできます。これにより、HTML ブログエディターや HTML メール作成画面など、アプリケーションのニーズに基づいたツールバーの設計が可能になります。
インラインモード
React Rich Text Editor は、編集可能領域のコンテンツがクリックまたは選択されると、インライン HTML エディターを表示します。
メンションとハッシュタグ
React Rich Text Editor でコンテンツを作成するときに、提案リストからユーザーやグループをタグ付けしたり選択したりできます。
編集体験
React Rich Text Editor コンポーネントは、より良い編集体験のために幅広いツールとオプションを提供します。
画像の挿入
ローカルパスまたはサーバーパスから画像キャプション付きでコンテンツに画像を挿入し、画像に URL をリンクします。ドラッグアンドドロップまたはファイルアップロードを使用して画像をサーバーにアップロードします。さらに、エディターには BLOB または Base64 形式で画像を挿入するオプションもあります。
ハイパーリンクの挿入
表示テキスト、ツールチップ、新しいウィンドウで開くリンクなどのカスタマイズオプションを使用して、ハイパーリンクを挿入または変更します。
テーブルの挿入
WYSIWYG Rich Text Editor でグリッド状の表データを表示するために、HTML テーブルを挿入および編集します。テーブルとその要素を動的に操作します（行や列の挿入・削除、テーブル全体や行・列のサイズ変更、テーブルの削除）。
テキストの配置
コンテンツを左、中央、右に配置したり、両端揃えにしたりできます。
Enter および Shift+Enter キーの構成
React Rich Text Editor では、Enter キーおよび Shift+Enter キーを押したときに挿入されるタグをカスタマイズできます。以下のタグを構成できます：
- P: ‘P’ が構成されている場合、Enter または Shift+Enter を押すと ‘p’ タグが作成されます。
- DIV: ‘DIV’ が構成されている場合、Enter または Shift+Enter を押すと ‘div’ タグが作成されます。
- BR: ‘BR’ が構成されている場合、Enter または Shift+Enter を押すと ‘br’ タグが作成されます。
テキストのフォーマット
- 選択したコンテンツ、段落全体、または特定の単語や文字をフォーマットします。
- 見出し、引用、コード、段落などをフォーマットします。
- 文字や単語の太字、斜体、下線、打ち消し線、大文字化を行います。
- 段落のインデントと間隔を変更します。
- フォントとそのサイズの値を指定します。
- 下付き文字と上付き文字を使用します。
- コンテンツのフォントの色と背景の色を選択します。
Markdown 構文の自動フォーマット
自動フォーマットにより、Markdown 風のショートコードを使用してコンテンツを素早くフォーマットできます。これにより、一般的なフォーマットのためにツールバーのボタンやドロップダウンを使用する必要がなくなります。見出しの #、太字の **、斜体の * などの Markdown 構文が入力されると、エディターはそれを自動的に HTML 要素に変換します。
チェックリスト
Rich Text Editor 内で直接チェックリスト（ToDo リスト）を作成できます。ユーザーはインタラクティブなチェックボックス項目をコンテンツに簡単に追加でき、ドキュメント内でのタスクの追跡と管理が可能になります。
カスタムリストの追加
React Rich Text Editor でコンテンツを整理するために、番号付きリストまたは箇条書きリストを作成します。箇条書きリストの記号を円や四角に変更することをサポートしています。また、小文字のギリシャ文字や大文字のローマ数字など、番号付きリストのさまざまな番号形式もサポートしています。
テーブルの行と列のクイック挿入
ユーザーはテーブルに行と列を素早く挿入できます。テーブルの端にマウスを合わせると「＋」アイコンが表示され、クリック1つで行や列を追加できます。
行の高さ
ユーザーはテキストの行間の垂直方向の間隔を調整でき、段落内でのテキストの密度を制御できます。これにより、読みやすさとコンテンツレイアウトの視覚的なバランスが向上します。
全画面テキストエディター
React Rich Text Editor を全画面サイズ（フルページエディター）にしてコンテンツを編集できます。
Microsoft Word および Excel からの貼り付け
React Rich Text Editor は、タグ、属性、スタイルをフィルタリングすることで、Microsoft Word、Microsoft Outlook、および Microsoft Excel から画像を含むコンテンツを貼り付ける組み込みオプションを提供します。さらに、コンテンツをプレーンテキストとして貼り付けるか、スタイルをクリアするか、ソースの書式を維持するかを選択するオプションもあります。
URL の自動ハイパーリンク化
React Rich Text Editor は、URL がプレーンテキストとして入力されたときに、自動的にテキストをハイパーリンクに変換するように構成されています。
React フォームバリデーション
React Rich Text Editor はフォームをシームレスにサポートし、フォーム送信アクションで値を取得します。バリデーションの2つのタイプは次のとおりです。
- 必須項目バリデーション
- 最大文字数バリデーション
サイズ変更可能なエディター
React Rich Text Editor はサイズ変更が可能で、ユーザーがコンテンツ領域を広げたり縮めたりできます。
ファイルマネージャーによる画像の挿入
エディターに統合されたファイルマネージャーは、クラウドストレージやサーバーから画像を挿入・アップロードします。
書式指定ツール
書式指定ツール（フォーマットペインター）を使用して、書式を簡単にコピーしてコンテンツに適用します。手動での再フォーマットが不要になり、貴重な時間を節約できます。素早く簡単に適用するには、ツールバーまたは便利なキーボードショートカットから書式指定ツールにアクセスしてください。ツールバーボタンをダブルクリックしてスティッキーモードを利用すれば、複数の場所にシームレスに書式を適用できます。
切り取り、コピー、貼り付け
クリップボード操作（切り取り、コピー、貼り付け）を使用します。
元に戻す・やり直しマネージャー
React Rich Text Editor は元に戻す・やり直し操作の履歴を管理し、ユーザーが編集の取り消し手順をカスタマイズできるようにします。
エディターコンテンツの印刷
ツールバーの印刷オプションを使用するか、プログラムによって、適用された書式スタイルのまま WYSIWYG Rich Text Editor のコンテンツを印刷します。
タッチ対応でレスポンシブな WYSIWYG エディター
React Rich Text Editor (モバイル HTML エディター) はタッチジェスチャーを認識し、ユーザーは左右にスワイプしてツールバーを移動できます。レスポンシブでモバイルフレンドリーな設計により、モバイル、タブレット、デスクトップのすべてのフォームファクタで最高のユーザーエクスペリエンスを提供します。
組み込みおよびカスタマイズ可能なテーマ
React Rich Text Editor には、Tailwind CSS、Bootstrap 5、Bootstrap 4、Bootstrap、Material、Fabric、Fluent、高コントラストなどの複数の組み込みテーマが用意されています。
HTML エディターのアクセシビリティ
キーボードナビゲーション
RTE は、すべてのセルがキーボードを使用してアクセス可能であることを保証します。並べ替え、選択、編集などの主要な機能は、キーボードコマンドのみで実行でき、マウス操作は不要です。これは、このコンポーネントを使用して高度にアクセシブルなアプリケーションを作成するのに役立ちます。
スクリーンリーダー
エディタービューは、完全な WAI-ARIA アクセシビリティをサポートしています。Rich Text Editor UI には、視覚障害のある方が最高の視聴体験を得られるよう、高コントラストの視覚要素が含まれています。また、有効な UI の説明は、スクリーンリーダーなどの支援技術を通じて簡単にアクセスできます。
右から左 (RTL)
RTE は右から左へのレンダリングをサポートしており、テキストエディターのテキスト方向とレイアウトを右から左に表示できます。これにより、アラビア語、ペルシャ語、ヘブライ語などの RTL 言語의 ユーザーエクスペリエンスとアクセシビリティが向上します。
Syncfusionの完全なReactコンポーネントエコシステムを発見しよう
確立された本番環境対応のコントロールと、モダンなウェブアプリ開発のためにネイティブに構築された最新の純粋なReactコンポーネントを特徴とする、145+以上のReact UIコンポーネントをご覧ください。
-
Reactコンポーネント
-
純粋なReactコンポーネント
-
スマートコンポーネントグリッドドロップダウンインプットデータビジュアライゼーションナビゲーションボタンインタラクティブチャット
-
グリッドデータ可視化ナビゲーション
よくある質問
なぜ Syncfusion React Rich Text Editor を選ぶべきなのですか？
Syncfusion React Rich Text Editor は、以下の機能をサポートしています：
モダンな Web およびモバイルアプリケーション向けの豊富なツールセットを使用して WYSIWYG HTML および Markdown コンテンツを編集します。
ブログエディター、メッセージ、HTML メール作成画面、ディスカッションフォーラムのようなアプリケーションに簡単に組み込むことができます。
ページ上の編集可能な項目を選択してその場で編集できる フローティングツールバー または インラインエディター を作成できます。
- ソフトウェアと対話するための機能豊富な UI を提供します。
- 簡単な構成と API。
- 市場で最高の React Rich Text Editor の1つであり、ソフトウェアを操作するための機能豊富な UI を提供します。
- すべてのモダンブラウザをサポート。
- モバイルフレンドリーでレスポンシブ。
React Rich Text Editor を素早く学び、使い始めるための、デモ や ドキュメント などの広範な学習リソース。
Syncfusion React Rich Text Editor の価格はいくらですか？
React Rich Text Editor を個別に販売することはありません。Syncfusion チームライセンス の一部としてのみ購入可能です。これには React Rich Text Editor を含む 1,600 以上のコンポーネントと Framework が含まれています。チームライセンスの価格は、開発者5名で 月額 395ドル からで、サブスクリプションが期限切れになるまでのサポートとアップデートが含まれます。さらに、現在実施中のプロモーションに基づいて割引を提供できる場合があります。追加の割引の対象となるかどうかは、今すぐ当社の 製品スペシャリスト までお問い合わせください。
Syncfusion React Rich Text Editor のデモはどこにありますか？
Rich Text Editor のレンダリングと構成方法を示す React Rich Text Editor のデモ をご覧いただけます。
Syncfusion React Rich Text Editor コンポーネントを個別に購入できますか？
いいえ、React Rich Text Editor を含む、Web、モバイル、およびデスクトップ向けの 1,600 以上のコンポーネントと Framework は個別には販売されていません。これらはチームライセンスの一部としてのみ提供されます。ただし、製品の価格競争力を維持しており、他のベンダーが Rich Text Editor コンポーネント単体で請求するのとそれほど変わらない費用で済みます。また、当社の経験では、お客様は通常、当社の製品の1つを使い始めると、すぐに複数の製品に拡張されることが多いため、すべての 1,600 以上のコンポーネントと Framework を、5人の開発者チームで 月額 395ドル からのサブスクリプション料金で提供するのが最善であると考えています。さらに、現在実施中のプロモーションに基づいて割引を提供できる場合もあります。追加の割引の対象となるかどうかは、今すぐ当社の 製品スペシャリスト までお問い合わせください。
Syncfusion React Rich Text Editor を無料でダウンロードして利用できますか？
いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間総収益が 100万米ドル未満で開発者が5名以下の組織および個人の方は、無料のコミュニティライセンスも利用可能です。
Syncfusion React Rich Text Editor を使い始めるにはどうすればよいですか？
まずは、当社の包括的な スタートガイドドキュメント をご覧いただくのが良いでしょう。
お客様は私たちを愛しています
優れたツール群と充実したサポートチームにより、Syncfusion® はお客様の開発時間を短縮します。お客様の体験談の一部をご紹介します。
Nice suite of components
A very complete set of components, that has an edge on other major vendors which offer components. A lot less code required to use and code samples for more complete components. Integrates well with other 3rd party components.
John A.
C# Developer (Contract)
Perfect for any developer
The Syncfusion Essential Studio has excellent features that are updated or added constantly on a regular basis. The support is exceptional—fast and professional responses. The support team provides you with code samples. As for the bugs, they always try to include the fix in the next release.
Dejan D.
Chief Executive Officer
実際の成功事例を見る
世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロール ライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。
ケーススタディを探る産業
ソフトウェア開発
75% コスト削減
50% より迅速な開発
産業
公益事業 (石油・ガス)
450+ 節約された時間
プロセスを合理化し、開発工数を大幅に削減
高度で柔軟な機能
強力で多用途な機能によりユーザーを支援
産業
ソフトウェアと技術
1000+ 節約された時間
エンタープライズ対応の UI コンポーネントで開発を加速
効率的なファイル管理
ドキュメント ライブラリにより、ゼロから構築することなくワークフローを合理化
産業
ソフトウェアと技術
2年 回避された遅延
プロアクティブな計画により 2 年間の遅延を防止
予定どおりの納品
信頼性の高いコントロールを使用してプロジェクトを期日どおりに納品
産業
ITサービスとITコンサルティング
パフォーマンスの向上
大規模データセットを簡単なカスタマイズと迅速なデバッグで処理
高いカスタマイズ性
プラグアンドプレイ方式のコントロールによりテンプレートを素早く統合
産業
プロフェッショナルサービス
即時アクセス
機能とリソースをすぐに利用可能
依存関係の削減
開発を高速化するための依存関係を最小限に
世界中のユーザーからの評価
Syncfusion React Rich Text Editor リソース
UI キット
Figma ダウンロード
Figma ダウンロード
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。
React Rich Text Editor チュートリアルとブログの最近のアクティビティ
React Rich Text Editor のチュートリアルビデオとブログ投稿は、この React コンポーネントを使用した最初のアプリ構築をガイドします。問題解決戦略の提供、機能や特性の説明、新機能のリリースの発表、ベストプラクティスの解説、および活用例の紹介を行います。React Rich Text Editor のアップデートについては、ブログやチュートリアルビデオチャンネルの最新の投稿をチェックしてください。
