リッチエディット

RichEditコンポーネントはDataverseの多行テキストカラム用のリッチテキストエディタです。Dynamics独自のリッチテキストエディタが提供するフォーマット(フォントやサイズ、色、リスト、インデント、アライメント、リンク、画像、表)を提供し、Dynamicsの書き方通りに作成するため、ポータルで編集したドキュメントとモデル駆動アプリで編集したドキュメントは両方で同じように見えます。Fluent UI独自のコントロールで描画され、テーマに沿って表示されます。

React Blazor

リッチテキストカラム

Dataverseでリ ッチテキスト の形式を持つカラムは、他のエディタと同様に、 ColumnEdit ラベル、長さ制限、必要なレベル、権限をカラムから取得した RichEdit をレンダリングします。

React Blazor

任意の多行テキスト列

RichEditを直接使用して、他の多行テキストの列をリッチテキストとして編集できます。その値は文書のHTMLとなります。グリッドやエクスポートは、書式なしの列のテキストを表示します。

React Blazor

画像

画像はツールバーから挿入、貼り付け、または削除できます。画像はDynamicsが保存する msdyn_richtextfile レコードとして保存され、ユーザーがそれらを作成・閲覧できるときにテーブルで権限を付与します。その許可がなければ、画像は文書内に保持されます。画像をオフにするには AllowImages を false に設定してください。

React Blazor

凝縮ツールバー

ToolbarModeをスペースの狭いエディターやメモのような短いテキスト用にCondensedに設定してください。ツールバーは最もよく使われるフォーマット(取り消し・やり直し、太字、斜体、下線、取り消し線、ハイライトとテキストの色、箇条書きと番号付きリスト、リンク)だけを表示します。そして、最後にボタンを開いては他のボタンごとに開いて閉じるボタンがあります。他のボタン名にはCondensedToolbarButtons(React: condensedToolbarButtons)という、RichEditToolbarButtonの値のリストがあります。ツールバーはそれらを、ツールバー全体が描画する順に表示します。ツールバー自体は、フルまたは凝縮して、ToolbarButtonsで指定されたボタンに限定してください(React: toolbarButtons);ボタンは制限され、フォーマットは制限されないため、キーボードショートカットや貼り付けたテキストは依然としてフォーマットされます。DisplayToolbarをfalseに設定して、ツールバーを一切表示しません。

React Blazor
React Blazor
React Blazor

テーマ

エディターの枠、ツールバー、フォーカスインジケーターはFluent UIのデザイントークンを使用しており、明暗のテーマやアクセントカラーで他のエディターと一致します。ドキュメント自体のフォーマット、つまりフォントや色は、Dynamicsが示す通りに表示されます。

例

リッチテキストの列にバインドされた RichEdit で、例文書で開かれます。

Reactの例 ブレイザーの例 React TypeScript Razor

設定オプション

以下のコントロールを使って利用可能な物件を探りましょう。

Reactの例 ブレイザーの例 React TypeScript Razor
元に戻すやり直しコピーフォーマット洗礼盤フォントサイズ太字斜体下線消線ハイライトカラーテキストカラー箇条書きリスト番号付きリストへこみを減らすへこみを増やすブロック引用左に合わせろアラインセンター右に合わせろリンクリンクを削除添字上標画像挿入左から右へ右から左へフォーマットを削除してください挿入表
反応してください ブレイザー

RichEdit クラス

パラメータ

名称
種類
デフォルト
概要
AllowImagesbool
True
画像を挿入できるかどうか(ツールバーから、貼り付け、または削除)。デフォルト true。
AutoFitHeightbool
False
編集エリアが内容に合うかどうかは、一行から RichEdit.Rows行までです スクロール — 常に RichEdit.Rows 行長ではなく。デフォルトは false。
ChildContentRenderFragment?
コンポーネントの子コンテンツ
ColumnName*string
テーブルレコードからエディタをバインドするための論理カラム名。
CondensedToolbarButtonsIReadOnlyCollection<RichEditToolbarButton>?
圧縮されたツールバーに表示されるボタンは(RichEditToolbarMode.Condensed)、描かれています ツールバー全体が描く順番、名前の順番は何であれ;その末尾にあるボタン それでも RichEdit.ToolbarButtons他の部分に開放されます。セットでも空でもない、 最も使われるフォーマット(RichEdit.DefaultCondensedToolbarButtons):元に戻し、やり直し、太字、 イタリック体、下線、取り消し線、ハイライトとテキストの色、箇条書きと番号付きリスト、 リンク。
Descriptionstring?
説明はツールチップに表示されます。
Disabledbool?
エディターを無効にすべきか。
DisplayLabelWhenAvailablebool
True
ラベルが可能であれば表示するかどうかを明記しています。
DisplayToolbarbool
True
フォーマットツールバーが表示されるかどうか。デフォルトは trueです。
DisplayTooltipWhenAvailablebool
True
ツールチップが表示されるかどうかを指定します。
DisplayValidationErrorMessagebool
True
コンポーネントが検証に失敗したときに検証エラーメッセージを表示するべきでしょうか?
IsVisiblebool
True
エディターは見えますか?
Labelstring?
編集者用のラベルとして表示されるテキスト。
LabelPositionEditorLabelPosition?
ラベルがコントロールに対して位置する位置。 null (デフォルト)の場合 編集者は最も近い囲いの SectionColumn, Sectionに設定された位置を取ります または PageLayout、そして誰も1を設定できない場合は EditorLabelPosition.Auto 。
MaxLengthint?
保存値の最大長さ(フォーマットも含む):列に格納される内容。解決済み 設定されていない場合、列のメタデータから。
MinLengthint?
テキストの最小文字数 — テキストの書式ではなく、テキストそのものです。
Placeholderstring?
エディタ内で空の状態で表示されます。
ReadOnlybool?
エディターは読み取り専用であるべきです。
Requiredbool?
価値が求められるかどうか。
Rowsint
10
テキストの行で占める編集領域の高さは、文書がどれだけ埋まるかに関わらず、より長い コンテンツスクロール。 RichEdit.AutoFitHeightでは最大まで成長します。デフォルトは10です。
ToolbarButtonsIReadOnlyCollection<RichEditToolbarButton>?
ツールバーに表示されるボタンは、フルまたは凝縮されたもので、ツールバー全体の順番で描かれています 描画します。凝縮されたツールバーには、以下のもの RichEdit.CondensedToolbarButtons が表示されます。 ここに、そしてこれらに向かって開く;もう見せるものがなく、開けるボタンもない 終了。ボタンの操作を制限しているだけで、フォーマットは制限されません。キーボードショートカットや貼り付けたテキストは依然として存在します フォーマット。セットや空ではなく、すべてのボタンが表示されます。
ToolbarModeRichEditToolbarMode
Full
ツールバーのどのくらいが表示されているか:すべてのボタン、あるいはボタンで最も使われるフォーマット それで残りは(RichEditToolbarMode.Condensed)を示します。デフォルトは RichEditToolbarMode.Full。
Valuestring?
エディタの値、すなわち列のHTMLを取得したり設定したりします。
名称: AllowImages
種類: bool
デフォルト: True
概要: 画像を挿入できるかどうか(ツールバーから、貼り付け、または削除)。デフォルト true。
名称: AutoFitHeight
種類: bool
デフォルト: False
概要: 編集エリアが内容に合うかどうかは、一行から RichEdit.Rows行までです スクロール — 常に RichEdit.Rows 行長ではなく。デフォルトは false。
名称: ChildContent
種類: RenderFragment?
概要: コンポーネントの子コンテンツ
名称: ColumnName*
種類: string
概要: テーブルレコードからエディタをバインドするための論理カラム名。
名称: CondensedToolbarButtons
種類: IReadOnlyCollection<RichEditToolbarButton>?
概要: 圧縮されたツールバーに表示されるボタンは(RichEditToolbarMode.Condensed)、描かれています ツールバー全体が描く順番、名前の順番は何であれ;その末尾にあるボタン それでも RichEdit.ToolbarButtons他の部分に開放されます。セットでも空でもない、 最も使われるフォーマット(RichEdit.DefaultCondensedToolbarButtons):元に戻し、やり直し、太字、 イタリック体、下線、取り消し線、ハイライトとテキストの色、箇条書きと番号付きリスト、 リンク。
名称: Description
種類: string?
概要: 説明はツールチップに表示されます。
名称: Disabled
種類: bool?
概要: エディターを無効にすべきか。
名称: DisplayLabelWhenAvailable
種類: bool
デフォルト: True
概要: ラベルが可能であれば表示するかどうかを明記しています。
名称: DisplayToolbar
種類: bool
デフォルト: True
概要: フォーマットツールバーが表示されるかどうか。デフォルトは trueです。
名称: DisplayTooltipWhenAvailable
種類: bool
デフォルト: True
概要: ツールチップが表示されるかどうかを指定します。
名称: DisplayValidationErrorMessage
種類: bool
デフォルト: True
概要: コンポーネントが検証に失敗したときに検証エラーメッセージを表示するべきでしょうか?
名称: IsVisible
種類: bool
デフォルト: True
概要: エディターは見えますか?
名称: Label
種類: string?
概要: 編集者用のラベルとして表示されるテキスト。
名称: LabelPosition
種類: EditorLabelPosition?
概要: ラベルがコントロールに対して位置する位置。 null (デフォルト)の場合 編集者は最も近い囲いの SectionColumn, Sectionに設定された位置を取ります または PageLayout、そして誰も1を設定できない場合は EditorLabelPosition.Auto 。
名称: MaxLength
種類: int?
概要: 保存値の最大長さ(フォーマットも含む):列に格納される内容。解決済み 設定されていない場合、列のメタデータから。
名称: MinLength
種類: int?
概要: テキストの最小文字数 — テキストの書式ではなく、テキストそのものです。
名称: Placeholder
種類: string?
概要: エディタ内で空の状態で表示されます。
名称: ReadOnly
種類: bool?
概要: エディターは読み取り専用であるべきです。
名称: Required
種類: bool?
概要: 価値が求められるかどうか。
名称: Rows
種類: int
デフォルト: 10
概要: テキストの行で占める編集領域の高さは、文書がどれだけ埋まるかに関わらず、より長い コンテンツスクロール。 RichEdit.AutoFitHeightでは最大まで成長します。デフォルトは10です。
名称: ToolbarButtons
種類: IReadOnlyCollection<RichEditToolbarButton>?
概要: ツールバーに表示されるボタンは、フルまたは凝縮されたもので、ツールバー全体の順番で描かれています 描画します。凝縮されたツールバーには、以下のもの RichEdit.CondensedToolbarButtons が表示されます。 ここに、そしてこれらに向かって開く;もう見せるものがなく、開けるボタンもない 終了。ボタンの操作を制限しているだけで、フォーマットは制限されません。キーボードショートカットや貼り付けたテキストは依然として存在します フォーマット。セットや空ではなく、すべてのボタンが表示されます。
名称: ToolbarMode
種類: RichEditToolbarMode
デフォルト: Full
概要: ツールバーのどのくらいが表示されているか:すべてのボタン、あるいはボタンで最も使われるフォーマット それで残りは(RichEditToolbarMode.Condensed)を示します。デフォルトは RichEditToolbarMode.Full。
名称: Value
種類: string?
概要: エディタの値、すなわち列のHTMLを取得したり設定したりします。

イベント

名称
種類
概要
ValueChangedEventCallback<ColumnValueBase>
バウンド値を更新するコールバックを取得または設定します。
名称: ValueChanged
種類: EventCallback<ColumnValueBase>
概要: バウンド値を更新するコールバックを取得または設定します。

方法

名称
パラメータ
種類
概要
FocusAsyncTask
カーソルをエディターに置く。
GetValidationErrorsList<string>
現在の値に対して検証エラーを返します:最小値はテキスト数、最大値は 保存されたものを数えます。
OnImageErrorstring fileName
string reason
void
JS → C#:ユーザーが選択した画像は挿入できません。エディターの下に記載されています。
OnStateChangedJsonElement state
void
JS → C#:ツールバーに表示される内容は、選択が動いたかフォーマットが変わったかです。
OnValueChangedstring value
Task
JS → C#:文書が変更されました。保存する値を保持し、空の場合はnullにします。
UploadImageAsyncIJSStreamReference image
string fileName
long size
Task<string>
JS → C#:ユーザーが挿入した画像を msdyn_richtextfile レコードとして保存し、返します ユーザーがIDを作成したり読み返したりできない場合の null ID、または 代わりに画像は文書内に保持されます。
名称: FocusAsync
種類: Task
概要: カーソルをエディターに置く。
名称: GetValidationErrors
種類: List<string>
概要: 現在の値に対して検証エラーを返します:最小値はテキスト数、最大値は 保存されたものを数えます。
名称: OnImageError
パラメータ: string fileName
string reason
種類: void
概要: JS → C#:ユーザーが選択した画像は挿入できません。エディターの下に記載されています。
名称: OnStateChanged
パラメータ: JsonElement state
種類: void
概要: JS → C#:ツールバーに表示される内容は、選択が動いたかフォーマットが変わったかです。
名称: OnValueChanged
パラメータ: string value
種類: Task
概要: JS → C#:文書が変更されました。保存する値を保持し、空の場合はnullにします。
名称: UploadImageAsync
パラメータ: IJSStreamReference image
string fileName
long size
種類: Task<string>
概要: JS → C#:ユーザーが挿入した画像を msdyn_richtextfile レコードとして保存し、返します ユーザーがIDを作成したり読み返したりできない場合の null ID、または 代わりに画像は文書内に保持されます。