Web およびモバイルアプリ向けの豊富なツールを使用して WYSIWYG HTML を編集します。
ブログ、メッセージ、メール作成画面、フォーラムに統合できます。
編集可能な要素をその場で編集するためのインラインエディターとして利用できます。
最先端の UI とツールバーのカスタマイズを活用できます。

4.5 / 5

(650+ レビュー)

Trusted by the world’s leading companies

JavaScript js rich text editor

概要

JavaScript Rich Text Editor は、機能豊富な WYSIWYG HTML エディターおよび WYSIWYG Markdown エディターです。ブログ、フォーラムの投稿、メモセクション、サポートチケット (インシデント)、コメントセクション、メッセージングアプリケーションなどの作成に広く使用されています。このコントロールは、モバイルサポートを備えた、より優れた編集体験のための効率的なユーザーインターフェイスを提供します。リッチコンテンツを編集およびフォーマットするためのさまざまなツールがあり、有効な HTML マークアップまたは Markdown (MD) コンテンツを返します。ユーザーは、そのモジュール式アーキテクチャを使用して、画像、リンク、表、およびリストを挿入できます。

Syncfusion JavaScript Rich Text Editor を選ぶ理由

WYSIWYG エディター

JavaScript Rich Text Editor コントロールは、WYSIWYG HTML エディターまたは Markdown エディターとして使用でき、構成可能な iframe 特性を備えた iframe 編集もサポートしています。

簡単なインタラクション

エディターの前景色と背景色の設定、順序付きおよび順序なしのカスタムリストの追加、フォント、斜体、下線、打ち消し線、太字の指定により、テキストや段落を簡単にフォーマットできます。

柔軟な編集

より良い編集体験のために、JavaScript Rich Text Editor コントロールはさまざまなツールと選択肢を提供します。画像、ビデオ、ハイパーリンク、表をすばやく挿入したり、表のセルを結合したり、キー設定を構成したりできます。

HTML コードのプレビュー

ソースコード内で HTML コードを直接確認・編集し、プレビュー結果を表示 (HTML ライブエディター) できます。

ツールバー

JavaScript 用の WYSIWYG Rich Text Editor は、完全にカスタマイズ可能なさまざまなツールバーオプションを提供します。複数行、展開、クイック、フローティングツールバーを使用できます。ツールコマンドは、関連する機能に基づいてグループ化されています。

あらゆる解像度に対応

Rich Text Editor は、応答性の高いレイアウトと、デスクトップ、タブレット、スマートフォン向けに最適化されたデザインを備えています。iOS、Android、または Windows OS を搭載したすべての携帯電話で正常に動作します。

サードパーティライブラリとの統合

スペルチェッカーやコードミラーなどのサードパーティライブラリを Rich Text Editor と簡単に統合して、コンテンツを改善できます。

グローバリゼーションとローカリゼーション

日付、通貨、番号を好みに合わせてフォーマットすることで、さまざまな地域のユーザーが Rich Text Editor を使用できるようにします。

AI 対応 Rich Text Editor

文法修正、多言語サポート、言い換え、要約機能を備えた AI 対応の Rich Text Editor で、JavaScript アプリケーションを変革します。

AI がどのように執筆を改善するかを確認する

AI 搭載の JavaScript Rich Text Editor コンポーネント。

JavaScript Rich Text Editor のコード例

以下に示すように、数行の簡潔な HTML および TypeScript コードを使用して、JavaScript Rich Text Editor を簡単に開始できます。また、コントロールのレンダリングと構成方法を示す JavaScript Rich Text Editor の例もご覧ください。

html
ts
<div class="control-section">
    <div id="defaultRTE">
    </div>
</div>
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import {RichTextEditor, Toolbar, Link, Image, HtmlEditor
} from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor);

let defaultRTE: RichTextEditor = new RichTextEditor({
  value: `<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 content. Users can format their content using standard toolbar commands.</p>
            <p><b>Key features:</b></p>
            <ul>
                <li>
                    <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
                </li>
                <li>
                    <p>Capable of handling Markdown editing.</p>
                </li>
            </ul>`
});
defaultRTE.appendTo('#defaultRTE');

HTML エディターツールバー

WYSIWYG HTML エディバーツールバーは、コンテンツの編集とフォーマットのためのさまざまなコマンドを提供します。テキストや段落のフォーマット、画像、ハイパーリンク、表、リストの挿入が可能です。ツールコマンドは、関連する機能に基づいてグループ化されています。

HTML エディバーツールバーの簡単な例

複数行ツールバーを備えた JavaScript WYSIWYG HTML エディター。

複数行ツールバー

オーバーフローした HTML5 WYSIWYG エディターのツールバーコマンドは、ツールバー内の次の行に折り返されます。

複数行ツールバーのドキュメント

展開可能なツールバーを備えた JavaScript WYSIWYG HTML エディター。

ツールバーの展開

次の行に隠れているオーバーフローツールバーコマンドは、展開アイコンを使用してツールバーを展開すると表示されます。

ツールバーの展開に関するドキュメント

クイックツールバーを備えた JavaScript Rich Text Editor。

クイックツールバー

このツールバーには、テキスト、画像、表、リンクに関連する頻繁に使用されるコマンドが含まれています。これらの要素にすばやくアクセスしてフォーマットするのに役立ちます。

クイックツールバーのドキュメント

フローティングツールバーを備えた JavaScript WYSIWYG HTML エディター。

フローティングツールバー

HTML5 WYSIWYG エディターのツールバーは、エディターの上部に固定されません。現在のページをスクロールすると、エディター領域内をフローティングします。

フローティングツールバーのドキュメント

JavaScript Rich Text Editor の完全にカスタマイズ可能なツール。

完全にカスタマイズ可能

HTML5 Rich Text Editor コントロールのツールバーボタンは完全にカスタマイズ可能です。ボタンを追加または削除したり、カテゴリに基づいてコマンドをグループ化したりできます。これにより、HTML ブログ編集や HTML メール作成など、アプリケーションのニーズに基づいてツールバーを設計できます。

カスタマイズのドキュメント

カスタムツールバーを備えた JavaScript WYSIWYG HTML エディター。

カスタムツール

ツールバー内の組み込みコマンドに、独自のアクションを伴うコマンド (ツール) を追加できます。

カスタムツールのドキュメント

JavaScript WYSIWYG インライン HTML エディター。

インラインモード

JavaScript Rich Text Editor は、編集可能領域のコンテンツがクリックまたは選択されると、インライン HTML エディターを表示します。

インライン HTML エディターの例

メンションとハッシュタグ

JavaScript Rich Text Editor でコンテンツを作成するときに、提案リストからユーザーやグループをタグ付けまたは選択できます。

メンションとハッシュタグを備えた JavaScript Rich Text Editor。

Enter および Shift+Enter キーの構成

Enter キーおよび Shift + Enter キーを押したときに挿入されるタグをカスタマイズします。いずれかのキーの組み合わせが使用されたときに、<p> タグを作成する P、<div> タグを作成する DIV、
タグを作成する BR などの特定のタグを挿入するようにコントロールを構成できます。

Enter および Shift+Enter キー構成のドキュメント

編集体験

JavaScript Rich Text Editor コントロールは、より良い編集体験のために幅広いツールとオプションを提供します。

JavaScript WYSIWYG エディターへの画像の挿入。

画像の挿入

ローカルパスまたはサーバーパスからコンテンツに画像を挿入し、画像キャプションを付けて、URL を画像にリンクします。ドラッグアンドドロップまたはファイルアップロード機能を使用して、サーバーに画像をアップロードします。さらに、エディターには画像を BLOB または Base64 形式で挿入するオプションもあります。

画像挿入のドキュメント

WYSIWYG HTML5 エディターへのハイパーリンクの挿入。

ハイパーリンクの挿入

表示テキスト、ツールチップ、新しいウィンドウで開くリンクなどのカスタマイズオプションを使用して、ハイパーリンクを挿入または変更します。

ハイパーリンク挿入のドキュメント

JavaScript Markdown テキストエディターへの表の挿入。

表の挿入

JavaScript WYSIWYG Rich Text Editor でグリッド状の表形式データを表示するために、HTML テーブルを挿入および編集します。テーブルとその要素を動的に操作します。行と列の挿入または削除、テーブル全体、行、または列のサイズ変更、テーブルの削除が可能です。

表挿入のドキュメント

表の結合と分割機能を備えた JavaScript Rich Text Editor。

表のセルの結合と分割

2 つ以上の行または列のセルを、その内容とともに単一のセルに結合します。また、単一のセルを水平方向と垂直方向の両方に分割することもできます。

表のセルの結合と分割のドキュメント

テキスト配置ツールを備えた JavaScript Rich Text Editor。

テキストの配置

組み込みの設定を使用して、コンテンツを両端揃えにしたり、左、中央、または右に配置したりできます。

テキスト配置のドキュメント

絵文字を備えた JavaScript Rich Text Editor。

絵文字の挿入

コンテンツに絵文字を組み込みます。絵文字の広範なコレクションを検索して、メッセージに合ったものを選択してください。JavaScript Rich Text Editor でコロン (:) キーを押すだけで、絵文字ピッカーにアクセスできます。

絵文字挿入のドキュメント

テキストのフォーマット

選択したコンテンツ、段落全体、または特定の単語や文字をフォーマットします。
見出し、引用、コード、段落などをフォーマットします。
文字や単語を太字、斜体、下線、打ち消し線にしたり、大文字にしたりします。
段落のインデントと間隔を変更します。
フォントとフォントサイズを選択します。
下付き文字と上付き文字を使用します。
コンテンツのフォントの色と背景の色を選択します。

テキストフォーマットのドキュメント

テキストをフォーマットする JavaScript Rich Text Editor。

JavaScript WYSIWYG HTML エディターのカスタムリスト。

カスタムリストの追加

JavaScript Rich Text Editor でコンテンツを整理するために、順序付き (番号付き) または順序なし (箇条書き) リストを作成します。このコントロールは、順序なしリストの箇条書きの外観を円や四角に変更することをサポートしています。また、小文字のギリシャ文字や大文字のローマ数字など、順序付きリストのさまざまな番号形式もサポートしています。

カスタムリスト追加のドキュメント

全画面テキストエディター

JavaScript HTML5 エディターをコンテンツ編集用に全画面 (フルページエディター) にします。

JavaScript WYSIWYG HTML エディターの全画面テキストエディター。

貼り付け時に書式設定を行う JavaScript Markdown エディター。

Microsoft Word および Excel からの貼り付け

JavaScript Markdown Editor は、タグ、属性、スタイルを除去することで、Microsoft Word、Microsoft Outlook、および Microsoft Excel から画像を含むコンテンツをエディターに貼り付けるための組み込みオプションを提供します。さらに、コンテンツをプレーンテキストとして貼り付けるか、クリーニングされたスタイルで貼り付けるか、ソースの書式設定スタイルで貼り付けるかを選択するオプションがあります。

URL の自動ハイパーリンク化

JavaScript Rich Text Editor は、URL がプレーンテキストとして入力されたときに、テキストを自動的にハイパーリンクに変換するように構成されています。

自動リンクのドキュメント

JavaScript WYSIWYG HTML エディターでの検証。

JavaScript フォームバリデーション

JavaScript Rich Text Editor は、HTML フォームをサポートし、フォーム送信アクションで値を取得するフォームコントロールです。2 種類の検証は次のとおりです。

必須検証
最大長検証

フォームバリデーションの例

コンテンツの長さを制限

コンテンツの最大文字数を制限します。

最大文字数制限のドキュメント

JavaScript WYSIWYG HTML エディターの最大長。

サイズ変更可能なエディター

JavaScript Rich Text Editor には、コンテンツ領域を拡大または縮小する組み込みのサイズ変更サポートがあります。

サイズ変更可能なエディターのドキュメント

ファイルマネージャー経由で画像を挿入

Rich Text Editor 内の統合されたファイルマネージャーを使用して、クラウドストレージまたはサーバーから画像を挿入およびアップロードできます。

ファイルマネージャー経由での画像挿入のドキュメント

JavaScript WYSIWYG HTML エディターでファイルマネージャーを使用して画像を挿入。

書式コピー機能を備えた JavaScript Rich Text Editor。

書式コピー (Format Painter)

書式コピーを使用して、書式をコピーしてコンテンツに適用します。ツールバーまたはキーボードショートカットから書式コピーにアクセスして、すばやく簡単に適用できます。ツールバーボタンをダブルクリックすると固定モードになり、複数の場所に書式を適用できます。

書式コピーのドキュメント

クリップボード操作を備えた JavaScript の Rich Text Editor。

切り取り、コピー、貼り付け

Rich Text Editor を使用すると、ユーザーはクリップボード操作 (切り取り、コピー、貼り付け) を使用できます。

クリップボード操作のドキュメント

元に戻す・やり直しアクションを備えた JavaScript の Rich Text Editor。

元に戻す/やり直しマネージャー

Rich Text Editor は、編集アクションを保存するために元に戻す/やり直しアクション履歴を管理します。

印刷をサポートする JavaScript Rich Text Editor。

エディターコンテンツの印刷

ツールバーの印刷オプションを使用するか、プログラムで書式を適用した状態で、WYSIWYG Rich Text Editor のコンテンツを印刷します。

印刷の例

レスポンシブな JavaScript テキストエディター。

タッチフレンドリーでレスポンシブな WYSIWYG エディター

JavaScript テキストエディター (モバイル HTML エディター) はタッチジェスチャを認識し、ユーザーが左または右にスワイプしてツールバーを移動できるようにします。レスポンシブでモバイルフレンドリーなデザインにより、すべてのモバイル、タブレット、デスクトップのフォームファクターで最高のユーザーエクスペリエンスを提供します。

カスタマイズ可能なテーマを備えた JavaScript Rich Text Editor。

組み込みおよびカスタマイズ可能なテーマ

JavaScript Rich Text Editor には、いくつかの組み込みテーマが用意されています: Tailwind CSS、Bootstrap 5、Bootstrap 4、Bootstrap、Material、Fabric、Fluent、およびハイコントラスト。

JavaScript Rich Text Editor API。

開発者向けの API

コンテンツ編集を最適化するために利用できる十分なクライアント側 API があります。

Rich Text Editor API ドキュメント

HTML エディターのアクセシビリティ

JavaScript Rich Text Editor でのキーボードナビゲーション。

キーボードナビゲーション

JavaScript Rich Text Editor コンポーネントは、キーボードを使用してすべてのセルにアクセスできるようにします。ソート、選択、編集などの主要な機能は、キーボードコマンドだけで実行できます。マウス操作は必要ありません。これにより、このコンポーネントを使用してアクセシビリティの高いアプリケーションを作成できます。

キーボードナビゲーションのドキュメント

JavaScript Rich Text Editor のアクセシビリティ。

スクリーンリーダー

JavaScript Rich Text Editor ビューは、完全な WAI-ARIA アクセシビリティをサポートしています。その UI には、視覚障害のある人が最高の視聴体験を得られるように、コントラストの高い視覚要素が含まれています。また、有効な UI の説明には、スクリーンリーダーなどの支援技術を通じて簡単にアクセスできます。

JavaScript Rich Text Editor での右から左への表示。

右から左 (RTL)

HTML5/JavaScript Rich Text Editor は右から左へのレンダリングをサポートしており、テキストエディターのテキストとレイアウトを右から左に表示できます。これにより、アラビア語、ペルシャ語、ヘブライ語などの RTL 言語のユーザーのユーザーエクスペリエンスとアクセシビリティが向上します。

RTL 言ンスのドキュメント

その他のサポートされているフレームワーク

Rich Text Editor は、Blazor、React、Angular、および Vue フレームワークでも利用できます。以下のリンクから、プラットフォームごとのオプションを確認してください。

サポートされているブラウザー

JavaScript Rich Text Editor は、Chrome、Firefox、Edge、Safari、Opera を含むすべての最新のウェブブラウザーで正常に動作します。

JavaScript Rich Text Editor でサポートされているブラウザー。

初めての JavaScript Rich Text Editor の作成方法でお困りですか？ドキュメントがお役に立ちます。

今すぐ読む

すべてのコントロール

スマートコンポーネント

グリッド

エディタ

ドロップダウン

インプット

データビジュアライゼーション

カレンダー

ナビゲーション

レイアウト

ボタン

インタラクティブチャット

通知

フォーム

よくある質問

✅ なぜ Syncfusion JavaScript Rich Text Editor を選ぶべきなのですか？

Syncfusion Rich Text Editor を使用すると、次のことが可能になります。

最新のウェブおよびモバイルアプリケーション向けの豊富なツールセットを使用して、WYSIWYG HTML および Markdown コンテンツを編集できます。
エディターをブログエディター、メッセージ、HTML メール作成画面、ディスカッションフォーラムのようなアプリケーションに簡単に組み込むことができます。
ページ上の編集可能な要素を選択してその場で編集できるフローティングツールバーまたはインラインエディターを作成できます。
シンプルな構成と API をお楽しみいただけます。
すべての最新ブラウザーで簡単にレンダリングできます。
タッチフレンドリーでレスポンシブな UI を活用できます。
デモやドキュメントなどの膨大な学習リソースを利用して、コントロールをすぐに使い始めることができます。

✅ Syncfusion JavaScript Rich Text Editor の価格はいくらですか？

JavaScript Rich Text Editor は個別には販売しておりません。Essential Studio コンポーネントスイートの一部としてのみ購入可能です。これには、JavaScript Rich Text Editor を含む 1,600 以上のコンポーネントとフレームワークが含まれています。サブスクリプションが期限切れになるまでのサポートとアップデートが含まれます。さらに、現在実施中のプロモーションに基づいて割引を提供する場合があります。お客様の状況に合わせた見積もりや追加の割引の確認については、弊社の製品スペシャリストまでお問い合わせください。

✅ Syncfusion JavaScript Rich Text Editor のデモはどこにありますか？

JavaScript Rich Text Editor のデモはこちらでご覧いただけます。

✅ Syncfusion JavaScript Rich Text Editor コンポーネントを個別に購入できますか？

いいえ、JavaScript Rich Text Editor を含む、ウェブ、モバイル、デスクトップ向けの 1,600 以上のコンポーネントおよびフレームワークは、個別に販売されていません。ただし、製品の価格競争力は高く、他のベンダーが JavaScript Rich Text Editor コンポーネント単体で請求する金額よりもわずかに高いだけで済みます。また、弊社のこれまでの経験から、お客様は通常、弊社の製品の 1 つを使い始め、その後すぐに複数の製品に拡大していくことが多いため、すべての 1,600 以上のコンポーネントとフレームワークをサブスクリプション料金で提供するのが最善であると考えています。さらに、現在実施中のプロモーションに基づいて割引を提供できる場合もあります。追加の割引の対象となるかどうかについては、弊社の製品スペシャリストまでお問い合わせください。

✅ Syncfusion JavaScript Rich Text Editor を無料でダウンロードして利用できますか？

いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間総収益が 100 万米ドル未満、開発者が 5 人以下、総従業員が 10 人以下の企業および個人を対象とした無料のコミュニティライセンスも用意されています。

✅ Syncfusion JavaScript Rich Text Editor を使い始めるにはどうすればよいですか？

まずは、弊社の包括的なスタートガイドドキュメントをご覧いただくのがよいでしょう。

お客様は私たちを愛しています

優れたツール群と充実したサポートチームにより、Syncfusion^® はお客様の開発時間を短縮します。
お客様の体験談の一部をご紹介します。

素晴らしいコンポーネントスイート

コンポーネントを提供する他の主要なベンダーに対して優位性のある、非常に完全なコンポーネントセットです。使用するためのコードが少なくて済み、より複雑なコンポーネントのコードサンプルも豊富です。他のサードパーティ製コンポーネントともうまく統合できます。

John A.

C# デベロッパー (コントラクト)

あらゆるデベロッパーに最適

Syncfusion Essential Studio は、定期的に更新または追加される優れた機能を備えています。サポートは格別で、迅速かつプロフェッショナルな対応をしてくれます。サポートチームがコードサンプルを提供してくれます。バグについては、常に次回のリリースで修正を含めるように努めてくれます。

Dejan D.

最高経営責任者

実際の成功事例を見る

世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロールライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。

ケーススタディを探る

産業

ソフトウェア開発

75% コスト削減

50% より迅速な開発

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story

産業

公益事業 (石油・ガス)