syncfusion-maui-rich-text-editor

Name: syncfusion-maui-rich-text-editor
Author: syncfusion

github.com/syncfusionデザイン・UI61207 回インストール2 週間前に更新

リポジトリ

syncfusion-maui-rich-text-editor について

書式付きテキスト入力が必要なアプリに、Syncfusion の .NET MAUI Rich Text Editor を組み込むためのガイドです。HTML と構造化スキーマ、ツールバー設定、編集機能、コンテンツ処理を扱います。

主な機能

01WYSIWYG テキスト書式設定
02カスタマイズ可能なツールバーとグループメニュー
03画像・表・リンク・コードブロックの挿入
04HTML とスキーマのコンテンツモード
05イベント処理とプレーンテキスト抽出

活用シーン

01メールやメッセージ作成画面の構築
02ブログや CMS の編集画面の作成
03書式付きメモやコメントの追加
04スキーマブロックによる構造化文書の編集

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-rich-text-editor

インストール後、Claude Code で/syncfusion-maui-rich-text-editorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

advanced-features.md

code-blocks.md

content-management.md

events-and-interactions.md

formatting-and-customization.md

getting-started.md

hyperlinks.md

images-and-tables.md

schema-block.md

text-transformation.md

toolbar-grouping.md

toolbar.md

詳細

Syncfusion .NET MAUI リッチテキストエディターの実装

Syncfusion .NET MAUI リッチテキストエディター（SfRichTextEditor）は、書式設定されたテキストコンテンツを作成するための、強力な WYSIWYG 編集体験を提供します。包括的な書式設定ツール、カスタマイズ可能なツールバー、画像やテーブルの挿入、ハイパーリンクの管理機能を備え、有効な HTML マークアップを返します。このスキルでは、メッセージングアプリ、メール作成画面、ブログエディター、メモアプリなど、書式付きテキストの入力が必要なあらゆるシナリオにおけるリッチテキストエディターの実装方法を説明します。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

書式設定機能を備えた WYSIWYG テキストエディターを .NET MAUI アプリケーションに実装する
太字、斜体、リストなどのリッチテキスト書式をサポートするメール作成画面やメッセージングアプリを作成する
HTML 出力を備えたブログエディター、CMS インターフェイス、フォーラム投稿エディターを構築する
書式設定ツールバーを備えたメモ作成機能やドキュメント編集機能を追加する
リッチコンテンツに対応したフィードバックフォーム、レビューセクション、コメント欄を実現する
画像、テーブル、ハイパーリンク、コードブロックをコンテンツに埋め込めるテキストエディターを実装する
技術ドキュメント、ブログ記事、開発者向けアプリに書式付きコードスニペットを埋め込む
特定の編集シナリオに合わせてツールバー項目や外観をカスタマイズする
モバイル優先の編集体験のため、コンテキストに応じたオーバーレイメニューにツールバー項目をまとめる
Uppercase() メソッドと Lowercase() メソッドを使用して、選択範囲またはプログラムからテキストの大文字・小文字を変換する
構造化ドキュメントのワークフローで、HTML ではなく、型付きブロックスキーマモデル（TValue="Schema"）にエディターをバインドする
太字、斜体、配置、色などのメソッドを使って、書式付きテキストをプログラムから操作する
イベント（テキスト変更、ハイパーリンククリック、書式変更）を通じてユーザー操作を管理する
文字数・単語数のカウント、検索インデックス作成、クリップボードへのコピー、テキスト読み上げ、SMS へのエクスポート、翻訳、スペルチェックのために、Task<string> GetText() メソッドを使ってエディターからプレーンテキストをプログラムから読み取る
自動サイズ調整や Liquid Glass Effect などの高度な機能を適用する

コンポーネントの概要

WYSIWYG 編集 - 書式設定されたテキストをそのままの見た目で編集できるインターフェイス
包括的な書式設定 - 太字、斜体、下線、取り消し線、フォント、色、配置、リスト、インデント
カスタマイズ可能なツールバー - 表示・非表示や項目のカスタマイズに対応した、柔軟なツールバー
画像とテーブル - 画像やテーブルをシームレスに挿入して書式設定
ハイパーリンクのサポート - クリックイベントに対応したハイパーリンクの挿入、編集、削除
コードブロックのサポート - 構造と読みやすさを保つ、書式付きコードスニペットの挿入
プログラムによる制御 - 書式設定の適用、コンテンツの管理、エディターの状態制御のためのメソッド
イベント - リアクティブな UI に対応する FormatChanged、TextChanged、HyperlinkClicked、Focused/Unfocused
HTML 出力 - 保存や送信に使用できる、有効な HTML マークアップを返します
AutoSize - コンテンツに応じた動的な高さ調整
Liquid Glass Effect - モダンな Cupertino スタイルの視覚効果（iOS/macOS）

パブリック API の仕様

Value プロパティは、コンテンツにアクセスする唯一のパブリックな手段です。型は object なので、読み取り時には必ず想定される実行時の型にキャストしてください。
- HTML モード（TValue="HTML"）：string にキャストします
- スキーマモード（TValue="Schema"）：ObservableCollection<BlockNode> にキャストします
プレーンテキストを読み取るには、自分で HTML を除去するのではなく、SfRichTextEditor のパブリックメソッド Task<string> GetText() を使用してください。このメソッドは、HTML モードとスキーマモードのどちらでも、await 後にプレーンテキストのコンテンツを返します。
旧式の Text プロパティと HtmlText プロパティは内部用であり、アプリケーションコードでは使用しないでください。
旧式の DefaultTextColor、DefaultFontSize、DefaultFontFamily プロパティは非推奨です。段落単位またはインラインの書式設定を使用してください。

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

Syncfusion.Maui.RichTextEditor NuGet パッケージのインストール
XAML と C# への SfRichTextEditor の追加
名前空間の登録と基本的なセットアップ
ツールバーの有効化（ShowToolbar プロパティ）
ToolbarItems コレクションを使用したツールバー項目のカスタマイズ
書式設定されたテキストを使った最初の動作例

ツールバーの設定

📄 参照： references/toolbar.md

ToolbarPosition プロパティを使用したツールバーの配置（上部または下部）
使用可能なツールバー項目（Bold、Italic、FontFamily、FontSize、リスト、画像、表など）
特定のツールバー項目の追加または削除
視覚的にグループ化するための区切り項目
インラインリンクのツールチップ機能
ToolbarSettings によるツールバーの外観のカスタマイズ
背景色、文字色、区切り線のスタイル設定
スクロールボタンの表示とアイコンのカスタマイズ
プラットフォーム固有のツールバーの動作

ツールバーのグループ化

📄 参照： references/toolbar-grouping.md

IsGrouped プロパティを使用したグループ化（オーバーレイ）ツールバーの有効化
各 ToolbarItems エントリを、コンテキストに応じたオーバーレイグループに対応付け
タッチデバイス（Android、iOS）向けのモバイルファーストな UX
グループ化レイアウトに適した項目を選択
IsGrouped と ToolbarPosition および ToolbarSettings の組み合わせ
グループ化ツールバーとインラインツールバーを切り替えるプラットフォーム条件
空のオーバーレイメニューや項目が多すぎるオーバーレイメニューのトラブルシューティング

テキスト変換

📄 参照： references/text-transformation.md

RichTextToolbarOptions の TextTransform ツールバー項目の使用
選択範囲に基づく大文字・小文字の変更操作（UPPERCASE、lowercase など）
Separator によるグループ化を使ったカスタムツールバーへの TextTransform の追加
現在の選択範囲を変換する Uppercase() および Lowercase() メソッドのプログラムによる使用
テキスト変換と太字、斜体、下線などの文字書式設定の組み合わせ
グループ化（オーバーレイ）ツールバーでの TextTransform の使用
実際の使用例：メッセージングアプリ、コメント、ブログおよび CMS エディター
見つけやすさに関するトラブルシューティングとベストプラクティス

書式設定とカスタマイズ

📄 参照： references/formatting-and-customization.md

エディターの外観のカスタマイズ（背景、境界線、ワードラップ）
プログラムによる書式設定メソッド（ToggleBold、ToggleItalic、ToggleUnderline など）
文字書式設定（太字、斜体、下線、取り消し線、下付き文字、上付き文字）
リストの書式設定（箇条書きリストと番号付きリスト）
テキストの配置（左、右、中央、両端揃え）
フォントファミリー、フォントサイズ、文字色、ハイライト色の適用
段落の書式設定と見出しスタイル
インデントの制御（増加／減少）
新しいコンテンツに適用するデフォルトのテキストスタイル

コンテンツ管理

📄 参照： references/content-management.md

TValue="HTML" を指定した Value プロパティによるプレーンテキストの設定
TValue="HTML" を指定した Value プロパティによる HTML 形式のテキストの設定
選択した HTML コンテンツの取得（GetSelectedText メソッド）
プレースホルダーテキストとスタイルの設定
カーソル位置のプログラムによる制御（MoveCursorToStart、MoveCursorToEnd）
フォーカスおよびフォーカス解除メソッド
元に戻す／やり直し機能
コンテンツ操作のパターンとベストプラクティス

スキーマブロック

📄 読む： references/schema-block.md

TValue="Schema" および RichTextEditorValueType.Schema を使用したコンテンツモデルの切り替え
ObservableCollection を Value プロパティにバインド
サポートされているノードタイプ：ParagraphNode、HeadingNode、TextNode、BulletListNode、OrderedListNode、ListItemNode、ImageNode、CodeBlockNode、LinkMark
エディターの編集内容をバインドされたコレクションに反映する双方向バインディング
見出し、リスト、リンク、画像、コードブロックのブロックノードを構成
ブロックスキーマを使用した構造化ドキュメントの読み込みと保存
スキーマモデルとツールバーやその他のエディター機能の組み合わせ
空のエディター、反映されない編集内容、HTML からの移行に関するトラブルシューティング