Angular Rich Text Editor - WYSIWYG マークダウンエディター
- Webおよびモバイルアプリ向けに豊富なツールでWYSIWYG HTMLを編集。
- ブログ、メッセージ、メール、ディスカッションフォーラムアプリに簡単に統合。
- クイックツールバーを使用してスタイルをカスタマイズ。
Trusted by the world’s leading companies
概要
Angular のRich Text Editorは、機能豊富な WYSIWYG HTML および Markdown エディターです。ブログ、フォーラム投稿、メモセクション、サポートチケット (インシデント)、コメントセクション、メッセージングアプリケーションなどの作成に広く使用されています。このコントロールは、モバイル対応でより良い編集体験のための効率的なユーザーインターフェイスを提供します。豊富なコンテンツを編集およびフォーマットするためのさまざまなツールを備え、有効な HTML マークアップまたは Markdown (MD) コンテンツを返し、モジュール式アーキテクチャで画像、リンク、テーブル、およびリストを挿入することもできます。
Syncfusion Essential Studio® Angular Rich Text Editorを選ぶ理由
WYSIWYG エディター
Angular Rich Text Editorコンポーネントは、WYSIWYG HTMLエディターまたはマークダウンエディターとして使用でき、設定可能なIframe特性を持つIframe編集もサポートしています。
簡単な操作
エディターのフォアグラウンドと背景色、フォントの種類、イタリック体、順序付きおよび順序なしのカスタムリストの追加、下線、取り消し線、太字を設定することで、テキストと段落を簡単にフォーマットできます。
柔軟な編集
より良い編集体験のために、Angular Rich Text Editorコンポーネントはさまざまなツールと選択肢を提供します。これにより、画像、ビデオ、ハイパーリンク、テーブルをすばやく挿入したり、テーブルセルを結合したり、キーを設定したりできます。
HTML コードのプレビュー
ソースコードでHTMLコードを直接検査・編集し、プレビュー結果を表示（HTMLライブエディター）します。
豊富なツールを備えたツールバー
Angular 用 WYSIWYG Rich Text Editorは、完全にカスタマイズ可能なさまざまなツールバーオプションを提供します。オプションには、複数行、展開、クイック、およびフローティングツールバーがあります。ツールのコマンドは、関連する機能に基づいてグループ化されています。
あらゆる解像度に適応
Rich Text Editorは、デスクトップ、タッチスクリーン、スマートフォン向けに高度にレスポンシブなレイアウトと最適化されたデザインを備えています。iOS、Android、Windows OSを使用するすべてのモバイルフォンでうまく機能します。
サードパーティライブラリとの統合
スペルチェッカー、コードミラーなどのサードパーティライブラリをRich Text Editorと簡単に統合して、Angular HTMLテキストエディターのコンテンツを改善できます。
グローバリゼーションとローカリゼーション
異なるロケールのユーザーが好みEに合わせて日付、通貨、 numbering をフォーマットすることで、Rich Text Editorを使用できるようになります。
AI 対応Rich Text Editorでスマートな生産性を実現
AI 対応の Angular Rich Text Editorでスマートな執筆を。文法の修正、コンテンツの書き換え、言語間の翻訳、要約の作成をエディターを離れることなく即座に実行できます。
Angular Rich Text Editorのコード例
以下に示すいくつかのシンプルな HTML および TS コード例を使用して、Angular Rich Text Editorを簡単に開始できます。また、Angular でRich Text Editorをレンダリングおよび構成する方法を示すAngular Rich Text Editorの例も参照してください。
<div class="control-section">
<ejs-richtexteditor id='defaultRTE' [(value)]="rteValue">
</ejs-richtexteditor>
</div>import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
private rteValue: string = `<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>`;
}HTML エディターのツールバー
Angular WYSIWYG テキストエディターのツールバーには、コンテンツを編集およびフォーマットするためのさまざまなコマンドがあります。ツールバーを使用してテキストや段落をフォーマットしたり、画像、ハイパーリンク、テーブル、リストなどを挿入したりできます。ツールコマンドは、関連する機能に基づいてグループ化されています。
複数行ツールバー
オーバーフローしたツールバーコマンドは、ツールバー内の次の行に折り返されます。
ツールバーの展開
隠れているオーバーフローしたツールバーコマンドは、展開アイコンを使用してツールバーが展開されると表示されます。
クイックツールバー
このツールバーには、テキスト、画像、テーブル、およびリンクに関連する頻繁に使用されるコマンドが含まれています。要素 (テキスト、画像、テーブル、リンク) にすばやくアクセスしてフォーマットし、カスタマイズするのに役立ちます。
ツールバーのフローティング表示
Angular WYSIWYG HTML エディターのツールバーは、エディターの上部に固定されず、現在のページをスクロールするとエディター領域内を浮動します。
フルカスタマイズ可能
Angular Rich Text Editorコンポーネントのツールバーボタンは、完全にカスタマイズ可能です。ボタンの追加または削除、カテゴリに基づいたコマンドのグループ化が可能です。これにより、HTML ブログエディターや HTML メール作成ツールのように、アプリケーションのニーズに合わせてツールバーを設計できます。
インラインモード
Angular Rich Text Editorは、編集可能な領域のコンテンツがクリックまたは選択されたときにインライン HTML エディターを表示します。
メンションとハッシュタグ
Angular Rich Text Editorでコンテンツを作成する際、ユーザーまたはグループをタグ付けしたり、提案リストから選択したりできます。
編集体験
Angular Rich Text Editorコンポーネントは、より良い編集体験のために幅広いツールとオプションを提供します。
画像の挿入
ローカルパスまたはサーバーパスからコンテンツに画像を挿入し、画像キャプションを付けてから、画像をURLにリンクします。画像をドラッグ&ドロップまたはファイルアップロードでサーバーにアップロードします。さらに、エディターは、BLOBまたはBase64形式で画像を挿入するオプションも提供します。
テーブルの挿入
WYSIWYG Rich Text Editorにグリッドのような表形式データを表示するために、HTML テーブルを挿入および編集します。テーブルとその要素を動的に操作します (行と列の挿入/削除、テーブル全体または行または列のサイズ変更、およびテーブルの削除)。
テキストの配置
コンテンツを左寄せ、中央寄せ、右寄せ、または均等割り付けするための組み込み設定が利用可能です。
Enter キーと Shift+Enter キーの設定
Rich Text Editorでは、Enter キーと Shift+Enter キーを押したときに挿入されるタグをカスタマイズできます。以下のタグを設定できます。
- P: ‘P’ が設定されている場合、Enter または Shift+Enter を押すと ‘p’ タグが作成されます。
- DIV: ‘DIV’ が設定されている場合、Enter または Shift+Enter を押すと ‘div’ タグが作成されます。
- BR: ‘BR’ が設定されている場合、Enter または Shift+Enter を押すと ‘br’ タグが作成されます。
テキストのフォーマット
- 選択したコンテンツ、段落全体、特定の単語や文字をフォーマットします。
- 見出し、引用、コード、段落などをフォーマットします。
- 文字や単語を太字、斜体、下線、取り消し線、または大文字にします。
- 段落のインデントと間隔を変更します。
- フォントとそのサイズを選択します。
- 下付き文字と上付き文字を使用します。
- コンテンツのフォントカラーと背景色を選択します。
カスタムリストの追加
Angular Rich Text Editorでコンテンツを整理するために、順序付き (番号付き) または順序なし (箇条書き) のリストを作成します。順序なしリストの箇条書きの外観を丸または四角に変更する機能もサポートされています。また、小文字のギリシャ文字や大文字のローマ数字など、順序付きリストのさまざまな番号形式もサポートしています。
全画面テキストエディター
組み込みオプションにより、コンテンツ編集用にWYSIWYG HTMLエディターが全画面サイズ（全ページエディター）になります。
Microsoft Word および Excel からの貼り付け
Angular Rich Text Editorは、タグ、属性、スタイルを除外して、Microsoft Word、Microsoft Outlook、および Microsoft Excel から画像を含むコンテンツをエディターに貼り付ける組み込みオプションを提供します。さらに、コンテンツをプレーンテキスト、クリーンアップされたスタイル、またはソースフォーマットスタイルとして貼り付けるかどうかを選択するオプションもあります。
URL の自動ハイパーリンク
Angular Rich Text Editorは、URL がプレーンテキストとして入力されたときに、テキストを自動的にハイパーリンクに変換するように設定されています。
Angular フォームの検証
Angular Rich Text Editorは、Angular のテンプレート駆動型フォームとリアクティブフォームをシームレスにサポートします。検証には次の2つのタイプがあります。
- 必須検証
- 最大長検証
サイズ変更可能なエディター
Angular Rich Text Editorはサイズ変更が可能で、ユーザーはコンテンツ領域を広げたり縮めたりすることができます。
ファイルマネージャーによる画像の挿入
Rich Text Editorに統合されたファイルマネージャーは、クラウドストレージまたはサーバーから画像を挿入およびアップロードします。
追加機能
元に戻す/やり直しマネージャー
Angular Rich Text Editor は、編集アクションを保存するために元に戻す/やり直しアクション履歴を管理し、元に戻すステップをカスタマイズすることもできます。
テキストエディターのコンテンツを印刷
WYSIWYG Rich Text Editorのコンテンツを、ツールバーの印刷オプションを使用するか、プログラムによって適用されたフォーマットスタイルで印刷します。
タッチフレンドリーでレスポンシブな WYSIWYG エディター
Angular Rich Text Editor (モバイル HTML エディター) はタッチジェスチャーを認識し、ユーザーはスワイプでツールバーを左右に移動できます。レスポンシブでモバイルフレンドリーなデザインは、すべてのモバイル、タブレット、デスクトップフォームファクターで最高のユーザー体験を提供します。
組み込みおよびカスタマイズ可能なテーマ
Angular Rich Text Editorには、Tailwind CSS、Bootstrap 5、Bootstrap 4、Bootstrap、Material、Fabric、Fluent、 हाईコントラストなど、いくつかの組み込みテーマが付属しています。
HTML エディターのアクセシビリティ
キーボードナビゲーション
Angular Rich Text Editorコンポーネントは、すべてのセルがキーボードでアクセスできることを保証します。ソート、選択、編集などの主要な機能は、キーボードコマンドのみで実行でき、マウス操作は不要です。これにより、このコンポーネントを使用して高度にアクセス可能なアプリケーションを作成するのに役立ちます。
スクリーンリーダー
Angular Rich Text Editor は、WAI-ARIA アクセシビリティを完全にサポートしています。Rich Text Editor の UI には、視覚障害者が見やすいように高コントラストの視覚要素が含まれています。また、有効な UI 説明は、スクリーンリーダーなどの補助技術を通じて簡単にアクセスできます。
右から左 (RTL)
Angular Rich Text Editorは右から左へのレンダリングをサポートしており、テキストエディターのテキスト方向とレイアウトを右から左に表示できます。これにより、アラビア語、ペルシア語、ヘブライ語などの RTL 言語のユーザーエクスペリエンスとアクセシビリティが向上します。
Angular バージョンの互換性
Angular バージョンの継続的な改善に伴い、Angular Rich Text Editorはバージョン4以降の最新バージョンとの互換性を保つために常に最新の状態に保たれています。
その他の対応フレームワーク
Rich Text Editorは、Blazor、React、JavaScript、および Vue フレームワークで利用できます。以下のリンクで、プラットフォーム固有のオプションをご覧ください。
対応ブラウザ
Angular のRich Text Editorは、Chrome、Firefox、Edge、Safari、Opera など、すべての最新の Web ブラウザーで問題なく動作します。
145+ 以上のAngular UIコンポーネント
すべてのコンポーネント
スマートコンポーネント
データ可視化
ドロップダウン
ファイルビューア & エディタ
ボタン
インタラクティブチャット
入力
ナビゲーション
フォーム
よくある質問
Syncfusion Essential Studio® Angular Rich Text Editorを選ぶ理由は何ですか？
Syncfusion Angular WYSIWYG テキストエディターには、次の機能があります。
最新の Web およびモバイルアプリケーション向けの豊富なツールセットで、WYSIWYG HTML および Markdown コンテンツを編集します。
ブログエディター、メッセージ、HTML メール作成ツール、ディスカッションフォーラムのようなアプリケーションに簡単に組み込むことができます。
フローティングツールバーまたはインラインエディターを作成し、ページ上の任意の編集可能な要素を選択して、その場で編集できるようにします。
- ソフトウェアと対話するための機能豊富な UI を提供する市場で最高の Angular Rich Text Editorの1つ。
- シンプルな設定と API。
- すべての最新ブラウザをサポート。
- モバイルタッチフレンドリーでレスポンシブ。
デモやドキュメントなどの豊富な学習リソースで、Angular Rich Text Editorをすばやく学習して開始できます。
Syncfusion Angular Rich Text Editorの価格は？
Angular のRich Text Editorは単体では販売しておりません。Syncfusion のチームライセンスの一部としてのみ購入可能です。このライセンスには、Angular のRich Text Editorを含む 1,600 以上のコンポーネントとフレームワークが含まれています。チームライセンスの価格は、開発者5人で月額395ドルからで、サブスクリプションの有効期限が切れるまでサポートとアップデートが含まれます。さらに、現在実施中のプロモーションに基づいて割引を提供できる場合があります。追加の割引が適用されるかどうかについては、今すぐ弊社の製品スペシャリストまでお問い合わせください。
Syncfusion Angular Rich Text Editorのデモはどこで見られますか？
Angular Rich Text Editorのデモをご覧いただけます。このデモでは、Rich Text Editorのレンダリングと設定方法を示しています。
Syncfusion Angular Rich Text Editorコンポーネントを個別に購入できますか？
いいえ、弊社の 1,600+ の Web、モバイル、およびデスクトップ用のコンポーネントおよびフレームワークは、Angular Rich Text Editorを含め、個別に販売されていません。チームライセンスの一部としてのみ利用可能です。ただし、価格は競争力があり、他のベンダーがRich Text Editorコンポーネントのみに請求する価格よりもわずかに高いだけです。また、これまでの経験から、お客様は通常、弊社の製品の1つを使い始め、すぐに複数の製品に拡大する傾向があるため、5人開発者チーム向けの月額395ドルから始まるサブスクリプション料金ですべての 1,600+ のコンポーネントとフレームワークを提供するのが最善であると判断しました。加えて、現在実施中のプロモーションに基づいて割引を提供できる場合があります。追加の割引が適用されるかどうかについては、今すぐ弊社の製品スペシャリストにお問い合わせください。
Syncfusion Angular Rich Text Editorを無料でダウンロードして利用できますか？
いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間総収入が100万米ドル未満で、開発者が5人以下の企業や個人には、無料のコミュニティライセンスが利用可能です。
Syncfusion Angular Rich Text Editorを始めるにはどうすればよいですか？
包括的な入門ドキュメントから始めるのが良いでしょう。
お客様は私たちを愛しています
優れたツール群と充実したサポートチームにより、Syncfusion® はお客様の開発時間を短縮します。お客様の体験談の一部をご紹介します。
Document Editor For Angular
Great features, amazing package for start-ups / small businesses with the free license plan, excellent support. We use document editor component for angular. We also like the documentation.
Călin C,
Technology Consultant
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 Angular Rich Text Editor リソース
UI キット
Figma ダウンロード
Figma ダウンロード
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。
Angular のRich Text Editorに関するチュートリアルとブログの最近のアクティビティ
Angular Rich Text Editorのチュートリアルビデオとブログ記事は、この Angular コンポーネントを使用して最初のアプリを構築するのに役立ちます。これらは問題解決戦略を提供し、機能と機能性を説明し、新機能のリリースを発表し、ベストプラクティスを説明し、使用例を示します。Angular Rich Text Editorの最新情報を弊社のブログとチュートリアルビデオチャンネルでご覧ください。
