ユニバーサルエディターのRTEの設定 configure-rte
ユニバーサルエディターでのリッチテキストエディター（RTE）の設定方法について説明します。
概要 overview
ユニバーサルエディターは、リッチテキストエディター（RTE）を配置してプロパティパネルに表示し、作成者がテキストを編集する際に書式変更を適用できるようにします。
このRTEは、 コンポーネントフィルターを使用して設定できます このドキュメントでは、使用可能な設定オプションとその例について説明します。
- 不要なオプションを無効にすることができます。
- プロジェクトの種類と互換性のないオプションのアクティブ化はサポートされていません。
構成構造 structure
RTE設定は、次の2つの部分で構成されています。
これらの設定は、プロパティ rteを持つ コンポーネントフィルターの一部として定義できます。
[
{
"id": "richtext",
"rte": {
"toolbar": {
// Toolbar configuration
},
"actions": {
// Action-specific configurations
}
},
"components": [
"richtext"
]
}
]
ツールバー設定 toolbar
ツールバー設定では、UIで使用できる編集オプションとその構成方法を制御します。 これらのセクションは
{
"toolbar": {
// Text formatting options
"format": ["bold", "italic", "underline", "strike", "code_inline", "text_color"],
// Text alignment options
"alignment": ["left", "center", "right", "justify"],
// Text direction options, right-to-left or left-to-right
"direction": ["rtl", "ltr"],
// Indentation controls
"indentation": ["indent", "outdent"],
// Block-level elements
"blocks": ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "code_block", "blockquote"],
// List options
"list": ["bullet_list", "ordered_list"],
// Content insertion
"insert": ["link", "unlink", "image", "table", "special_characters"],
// Superscript/subscript
"sr_script": ["superscript", "subscript"],
// Editor utilities
"editor": ["removeformat", "clean_unsupported_tags", "paste_text", "fullscreen", "find_and_replace"],
// Advanced items (e.g. the class picker).
"advanced": ["classes"],
// Section ordering (optional)
"sections": ["format", "alignment", "list"]
}
}
アクション設定 action
アクション設定を使用すると、個々の編集アクションの動作と外観をカスタマイズできます。 使用可能なセクションを以下に示します。
共通のアクションオプション common-action-options
ほとんどのアクションは、次の一般的なオプションをサポートしています。
shortcut?：文字列 – アクションのデフォルトのキーボードショートカットを上書きします（存在する場合）label?：文字列 – UIのアクションに使用されるラベルを上書きしますhideInline?: ブール値 –trueの場合、インコンテクスト （インライン） RTE エディターツールバーからこのアクションを非表示にします
{
"actions": {
"bold": {
"label": "Bold",
"shortcut": "Mod-B",
"hideInline": true
}
}
}
アクションの書式設定 format
書式設定アクションを使用して書式設定を適用し、HTMLのタグ切り替えをサポートしてセマンティックバリアントを選択します。 次のセクションを使用できます。
{
"actions": {
"bold": {
"tag": "strong", // Use <strong> instead of <b>
"shortcut": "Mod-B", // Custom keyboard shortcut
"label": "Make Bold" // Custom button label
},
"italic": {
"tag": "em", // Use <em> instead of <i>
"shortcut": "Mod-I",
"label": "Italicize"
},
"strike": {
"tag": "del" // Use <del> instead of <s>
}
}
}
アクションのリスト list
リストアクションは、HTML構造を制御するコンテンツラッピングをサポートしています。 次のセクションを使用できます。
{
"actions": {
"bullet_list": {
"wrapInParagraphs": true, // <ul><li><p>content</p></li></ul>
"shortcut": "Mod-Shift-8", // Custom shortcut
"label": "Bullet List" // Custom label
},
"ordered_list": {
"wrapInParagraphs": false, // <ol><li>content</li></ol> (default)
"shortcut": "Mod-Shift-9"
}
}
}
テーブルのアクション table-actions
テーブルアクションは、テーブルセル内のHTML構造を制御するためのコンテンツラッピングをサポートしています。
{
"actions": {
"table": {
"wrapInParagraphs": false, // <td>content</td> (default)
"shortcut": "Mod-Alt-T", // Custom shortcut
"label": "Insert Table" // Custom label
}
}
}
テーブル設定オプション table-configuration-options
wrapInParagraphs:false（既定値） – テーブル セルにラップされていないテキスト コンテンツが含まれていますwrapInParagraphs:true– 表セルは段落タグでコンテンツをラップします
サンプル：
wrapInParagraphsの場合：false
<!-- Single line -->
<td>Cell content</td>
<!-- Multiple paragraphs get <br> separation -->
<td>Line 1<br />Line 2</td>
wrapInParagraphsの場合：true
<!-- Single paragraph -->
<td><p>Cell content</p></td>
<!-- Multiple paragraphs preserved -->
<td>
<p>Line 1</p>
<p>Line 2</p>
</td>
wrapInParagraphs: false）をラップ解除すると、サニタイザーは複数の段落間に<br> タグを自動的に挿入して、視覚的な改行を保持します。 これは、主要なリッチテキストエディターでHTMLの標準と一般的な方法に従っています。プロパティダイアログ properties-dialog
テーブルプラグインには、次のフラグが有効になっている場合にTable メニューから開く3つのプロパティエディターダイアログが用意されています。
- 表のプロパティ – 囲む表の幅/高さ、セルの間隔、セルの余白、整列、境界線（幅/スタイル/カラー）、および背景色を編集します。 枠線とセルのパディングは、同じトランザクション内のすべてのセルにファンアウトを変更して、ユーザーが期待するものと一致する視覚的な結果を得ることができます。
- 行のプロパティ – 囲む行の行タイプ（ヘッダー/ボディ/フッター）、整列、高さ、境界線（幅/スタイル/カラー）、および背景色を編集します。 行タイプはセクションのみです（TinyMCEのデフォルト
table_header_type: "section"に一致）。ヘッダー行はシリアル化時に<thead>に移動しますが、そのセルは<td>のままです。<th>にはセルのプロパティ -> ヘッダーのセルを使用します。 シリアル化時に、行は実際の<thead>/<tbody>/<tfoot>セクションにグループ化されます（TinyMCE/Wordに一致）。 以下のストレージノートを参照してください。 境界線は行のセルに広がり、境界線の下に表示されます。 - セルのプロパティ – 選択したセルの種類（セル/ヘッダーセル）、幅/高さ、水平および垂直方向の整列、境界線（幅/スタイル/カラー）、および背景色を編集します。
CellSelectionが複数のセルにまたがる場合、選択したすべてのセルにパッチが一度に適用されます。 セルの種類は、table_cell（<td>）とtable_header（<th>）の間でセルを切り替えます。
3つのデフォルトはすべて無効（オプトイン）になり、消費者が明示的に有効にするまで、機能がオフになっているRTE設定サーフェスの残りの部分と一致します。 ダイアログを表示する場合は、コンシューマーごとにオプトインします。
{
actions: {
table: {
showTableProperties: true, // default false: show "Table Properties" menu item
showRowProperties: true, // default false: show "Row Properties" menu item
showCellProperties: true, // default false: show "Cell Properties" menu item
}
}
}
プロパティダイアログオプション properties-dialog-options
|—|—|—|
| オプション | デフォルト | 効果 |
| showTableProperties | false | テーブル ドロップダウンに テーブルのプロパティ 項目を表示 |
| showRowProperties | false | 行 サブメニューに 行のプロパティ 項目を表示 |
| showCellProperties | false | セル サブメニューに セルのプロパティ 項目を表示 |
各ProseMirror ノードのhtmlAttrs.styleを通したダイアログのラウンドトリップ、つまりTinyMCE/Wordなどのインライン CSSは、カスタムデータ属性ではなくemitです。 セル幅は、スキーマレベル colwidthも書き込むため、PMのテーブル機械にも対応します。 セルタイプは、ノードタグ （<td>/<th>）によって実行されます。
prosemirror-tables スキーマは、<thead>/<tbody>/<tfoot>節ノードを持たないフラット （table -> table_row -> cell）であるため、行のヘッダー/ボディ/フッターのインテントは内部で<tr>にdata-row-type マーカーとして保持されます。 行のタイプが変更されると、行は同じトランザクション内のヘッダー/本文/フッターの順序に並べ替えられるので、エディターキャンバスは書き出された構造と一致します（ヘッダー行は上に上に上げ、フッター行はTinyMCEのように下に沈みます）。 このエディター内の並べ替えは、セルが複数の行（rowspan > 1）にまたがる場合にスキップされます。行を移動すると、グリッドが破損します。 途中、sanitizeHTMLは行を実際の<thead>/<tbody>/<tfoot> セクション（ヘッダー行が最初、フッター行が最後）にグループ化し、マーカーをドロップして、同じ構造のTinyMCE/Word emitを生成します。 途中、<tr>の囲まれたセクションがマーカーに読み込まれるので、セクション化されたHTMLのラウンドトリップが表示されます。
アクションをリンク link
リンクアクションは、リンク動作を管理するためのターゲット属性コントロールをサポートします。 次のセクションを使用できます。
{
"actions": {
"link": {
"hideTarget": false, // Show target attribute options (default)
"shortcut": "Mod-K", // Custom keyboard shortcut
"label": "Insert Link" // Custom button label
},
"unlink": {
"shortcut": "Mod-Shift-K", // Custom keyboard shortcut
"label": "Remove Link" // Custom button label
}
}
}
リンク設定オプション link-options
hideTarget:false（既定値） – リンクにターゲット属性を含め、_self、_blankなどを許可します。hideTarget:true- リンクからターゲット属性を完全に除外
unlink アクションは、カーソルが既存のリンク内に配置されている場合にのみ表示されます。 テキストコンテンツを保持しながら、リンクの書式設定を削除します。
画像のアクション image
画像アクションは、画像要素のラッピングをサポートして、レスポンシブ画像マークアップを生成します。 次のセクションを使用できます。
{
"actions": {
"image": {
"wrapInPicture": false, // Use <img> tag (default)
"shortcut": "Mod-Shift-I", // Custom keyboard shortcut
"label": "Insert Image" // Custom button label
}
}
}
画像設定オプション image-options
wrapInPicture:false（デフォルト） – 単純な<img>要素を生成しますwrapInPicture:true- レスポンシブデザイン用に<picture>要素で画像をラップ
全画面表示 full-screen
フルスクリーンアクションは、エディターをフルスクリーンモードに切り替えます。
{
actions: {
fullscreen: {
label: "Fullscreen"; // Custom button label
}
}
}
フルスクリーンがアクティブな場合、エディターラッパーはクラス rte-fullscreen-wrapperを受け取ります。 コンシューマーアプリは、カスタムスタイルやCSS プロパティ（z-index、ディメンション、オーバーレイなど）を適用するためにこのクラスをターゲットにすることができます。 （ユニバーサルエディターではサポートされていません）
インデント設定 indentation
インデントには、インデント動作の範囲を制御する機能レベルの設定に加えて、ショートカットとラベルの個々のアクション設定があります。
{
"actions": {
// Feature-level configuration
"indentation": {
"scope": "all" // Controls what content can be indented (default: "all")
},
// Individual action configurations
"indent": {
"shortcut": "Tab", // Custom keyboard shortcut
"label": "Increase Indent" // Custom button label
},
"outdent": {
"shortcut": "Shift-Tab", // Custom keyboard shortcut
"label": "Decrease Indent" // Custom button label
}
}
}
インデント範囲オプション indentation-options
-
scope:all（デフォルト） – インデント/アウトデントはすべてのコンテンツに適用されます：- リスト：リスト項目のネスト/ネスト解除
- 段落と見出し：一般的なインデントレベルの増減
-
scope:lists- インデント/アウトデントはリスト項目にのみ適用されます：- リスト：リスト項目のネスト/ネスト解除
- 段落と見出し：インデントなし（これらのボタンは無効）
特殊文字 special-characters
special_characters挿入アクションは、特殊文字（記号、数式演算子、通貨記号、句読点、矢印など）を挿入するための文字選択ポップオーバーを開きます カーソル位置です。
{
"toolbar": {
"insert": ["link", "unlink", "image", "table", "special_characters"],
"sections": ["insert"],
},
"actions": {
"special_characters": {
"label": "Special Characters"
}
}
}
44の一般的に使用される文字のデフォルトのセットが標準で含まれています。 文字リストは、次の2つの設定オプションでカスタマイズできます。
appendCharacters- デフォルトセットに文字を追加characters– 既定のセットを完全に置き換えます
各文字エントリには、character （Unicode文字）とtitle （ツールチップ/アクセス可能な名前）があります。
デフォルトへの文字の追加 append-special-characters
{
"actions": {
"special_characters": {
"appendCharacters": [
{ "character": "\u2605", "title": "Black star" },
{ "character": "\u2764", "title": "Heavy black heart" },
];
}
}
}
デフォルトの特殊文字を置換 replace-special-characters
{
"actions": {
"special_characters": {
"characters": [
{ "character": "\u00A9", "title": "Copyright sign" },
{ "character": "\u00AE", "title": "Registered sign" },
{ "character": "\u2122", "title": "Trade mark sign" },
];
}
}
}
両方のオプションを同時に both-special-character-options
この例では、charactersをベースとして使用し、appendCharactersを使用して追加の文字を追加します。
{
"actions": {
"special_characters": {
"characters": [
{ "character": "\u00A9", "title": "Copyright sign" },
{ "character": "\u00AE", "title": "Registered sign" }
],
"appendCharacters": [
{ "character": "\u2605", "title": "Black star" }
]
}
}
}
CSS クラス css-classes
classes アクションは、設定可能なCSS クラスをRTE コンテンツに適用するドロップダウンを追加します。 advanced セクションの項目としてリストされます。 このプラグインは、生成されたHTMLのクラス名のみを書き込み/削除します。 コンシューマーアプリは、各クラスの実際のCSSを所有し、RTE コンテンツがレンダリングされるあらゆる場所（エディター、プレビュー、公開）に読み込む責任があります。
ドロップダウンは、少なくとも1つのオプションが設定されている場合にのみ表示されます。 プラグインはデフォルトなしで出荷されます。
{
toolbar: {
advanced: ["classes"],
sections: ["blocks", "format", "advanced"],
},
actions: {
classes: {
label: "Add Custom Class",
options: [
{ value: "rte-hero", label: "Hero title" },
{ value: "rte-lede", label: "Lede paragraph" },
{ value: "rte-callout", label: "Callout block" },
{ value: "rte-pill", label: "Pill (inline)" },
],
},
},
}
各エントリには、値（HTMLに書き込まれたCSS クラス名）とラベル（ドロップダウンに表示される人間が読み取れるテキスト）があります。
ターゲットは、最もキャレットに近い勝利ルールに従います。
- 管理対象スパン内の選択範囲が空です： クラスは、ブロックではなく、そのスパン実行に適用されます。 別のクラスを選択すると、スパンのクラスが入れ替わります。カスタムクラスを削除すると、そのクラスは消去されます。
- 別の場所で選択を空にします（カーソルのみ）:選択したクラスは、カーソルの最も近いブロックレベルの祖先（
<p>、<h1>など）に適用されます。 段落をラップするリスト項目またはテーブルセル内にカーソルがある場合、<li>/<td>/<th>は、内部段落ではなくクラスを受け取ります。 - 実際の選択範囲：選択したテキストが
<span class="...">で折り返されます。 選択範囲に既にスパンがある場合、既存のスパンのクラスが更新されます。 - カスタムクラスを削除: ターゲットから管理クラスを削除します（キャレットが解決するスパン実行またはブロック）。 スパンに残っている唯一の属性が管理クラスであった場合、スパン自体はラップ解除されます。 「カスタムクラスを削除」オプションは、マネージドクラスが現在アクティブな場合にのみ表示されます。
設定されたオプションリストに含まれていない既存のクラスは、変更されずに保持されます。 管理クラスのみが入れ替えられます。 コンシューマーセットクラスは、プラグインと安全に共存します。
ドロップダウンリフレクション：
- カーソルのみが配置されている場合、ドロップダウンには最も近い管理クラス（ある場合はキャレットのスパン、それ以外の場合はカーソルの下のブロック）が反映されます。
- 選択範囲では、ドロップダウンは選択範囲をラップするスパン上の管理クラスを反映します。 選択範囲の全体が同じクラスを共有する場合のみ。 選択範囲を混在すると、何も選択されていません。
ブロックタイプ block-types
blocks ツールバーのセクションでは、現在のブロックを設定済みのブロックの種類の間で切り替えるドロップダウンがレンダリングされます。 サポートされている値はparagraph、h1-h6、code_blockおよびblockquoteです。
blockquoteはラッピングブロックです（ProseMirrorcontentはblock+です）。テキストブロックであるparagraph/h1-h6/code_blockとは異なります。 「Quote」を選択すると、現在のブロックが<blockquote>で折り返されます。ドロップダウンには、キャレットが1つの中にある間に選択された「Quote」が表示されます。 引用符の中で他のブロックタイプ（例：段落）を選択すると、ブロックが最初に引用符から外されるため、引用符も残されます。 これはTinyMCEのブロックドロップダウンを反映しています。- ラッピングノードであるため、
<blockquote>には複数の段落、リスト、ネストされた引用符を含めることができます。 外部で作成されたコンテンツをラウンドトリップで無駄にすることができるようになります。TinyMCE （レガシーコンテンツ）とWord （ペースト）の両方が<blockquote><p>…</p></blockquote>（多くの場合、複数段落）を出力し、その構造はフラット化するのではなく、読み込み、編集、シリアライズ時に保持されます。 - すべてのブロックタイプと同様に、コンシューマーアプリは、RTE コンテンツがレンダリングされるすべての場所で
<blockquote>のスタイルを視覚的に設定するCSSを所有します。
{
"toolbar": {
"blocks": ["paragraph", "h1", "h2", "h3", "code_block", "blockquote"],
"sections": ["blocks"],
},
"actions": {
"blockquote": {
"label": "Quote", // Custom dropdown label
},
},
}
テキストとして貼り付け paste-as-text
paste_text エディターアクションを使用すると、標準のプレーンテキストとして貼り付けワークフローが有効になります。
- 既定のショートカット： Mod-Shift-v （macOSではCmd+Shift+V、Windows/LinuxではCtrl+Shift+V）
- ビヘイビアー： テキスト/プレーンからのペースト （ソースの書式設定は無視されます）
- リストでは、改行によって新しいリスト項目が作成されます。
{
"toolbar": {
"editor": ["removeformat", "paste_text"]
},
"actions": {
"paste_text": {
"shortcut": "Mod-Shift-v",
"label": "Paste as Text"
}
}
}
検索と置換 find-replace
find_and_replace エディターアクションでは、prosemirror-search （一致ハイライト）とFIND_AND_REPLACE_PLUGIN_KEYがキーを設定したコマンドプラグインが使用されます。
- 統合：
toolbar.editorにfind_and_replaceが含まれている場合は、エディターのProseMirror プラグインにcreateFindAndReplacePlugin()を追加します。 - API:
FIND_AND_REPLACE_PLUGIN_KEY.getState(state)を使用してfind、replaceNext、replaceAll、getMatchCountにアクセスします。 - スタイル：
.ProseMirror-search-matchと.ProseMirror-active-search-matchのCSSがアプリに読み込まれていることを確認します（prosemirror-searchのスタイル/search.cssまたは独自の同等のスタイルから）。
{
"toolbar": {
"editor": ["find_and_replace"],
"sections": ["editor"],
},
"actions": {
"find_and_replace": {
"label": "Find and replace",
},
},
}
その他のアクション other
他のすべてのアクションは、基本的なカスタマイズをサポートしています。 次のセクションを使用できます。
{
"actions": {
"h1": {
"shortcut": "Mod-Alt-1",
"label": "Large Heading"
},
"paragraph": {
"shortcut": "Mod-Alt-0",
"label": "Normal Text"
},
"link": {
"shortcut": "Mod-K",
"label": "Insert Link",
"hideTarget": false // Show target attribute options (default: false)
}
}
}
完全な例 example
次に、完全な設定の例を示します。
[
{
"id": "richtext",
"rte": {
// Configure which tools appear in toolbar
"toolbar": {
"format": [
"bold",
"italic",
"text_color"
],
"blocks": [
"paragraph",
"h1",
"h2"
],
"list": [
"bullet_list",
"ordered_list"
],
"insert": [
"link",
"unlink",
"image",
"special_characters"
],
"editor": [
"removeformat",
"paste_text"
],
"sections": [
"format",
"blocks",
"list",
"insert"
]
},
// Customize individual action behavior
"actions": {
// Format actions with HTML tag choices
"bold": {
"tag": "strong",
"shortcut": "Mod-B",
"label": "Bold"
},
"italic": {
"tag": "em",
"shortcut": "Mod-I"
},
// List actions with content wrapping
"bullet_list": {
"wrapInParagraphs": true,
"label": "Bullet List"
},
"ordered_list": {
"wrapInParagraphs": false
},
// Link actions with target control
"link": {
"hideTarget": false,
"shortcut": "Mod-K",
"label": "Add Link"
},
"unlink": {
"label": "Remove Link"
},
// Image actions with picture wrapping
"image": {
"wrapInPicture": false, // Use <img> tag instead of <picture>
"shortcut": "Mod-Shift-I",
"label": "Insert Image",
},
// Special characters with custom additions
"special_characters": {
"label": "Special Characters",
"appendCharacters": [{ "character": "\u2605", "title": "Black star" }],
},
// Other actions with basic customization
"paste_text": {
"shortcut": "Mod-Shift-v",
"label": "Paste as Text",
},
"h1": {
"shortcut": "Mod-Alt-1",
"label": "Main Heading"
}
}
}
}
]
アクションオプションの詳細 action-details
いくつかのオプションでは、重要な詳細情報を提供しています。
wrapInParagraphs wrapInParagraphs
リストのwrapInParagraphs オプションは、HTML構造を制御します。
wrapInParagraphs: false（デフォルト） wrapInParagraphs-false
<ul>
<li>Simple text content</li>
<li>Another item</li>
</ul>
wrapInParagraphs: true wrapInParagraphs-true
<ul>
<li><p>Text wrapped in paragraphs</p></li>
<li><p>Supports rich formatting within items</p></li>
</ul>
必要な場合はwrapInParagraphs: trueを使用してください：
- リスト項目内の豊富な書式設定
- リスト項目ごとに複数の段落
- 一貫性のあるブロックレベルのスタイル設定
wrapInPicture
画像のwrapInPicture オプションは、画像コンテンツ用に生成されるHTML構造を制御します。
wrapInPicture: false （デフォルト） wrapinpicture-false
<img src="image.jpg" alt="Description" />
wrapInPicture: true wrapinpicture-true
<picture>
<img src="image.jpg" alt="Description" />
</picture>
必要な場合はwrapInPicture: trueを使用してください：
<source>要素によるレスポンシブ画像のサポート。- アートディレクション機能：
- 将来性のある高度な画像機能。
- 一貫した画像要素の構造：
wrapInPicture: trueが有効になっている場合、異なるメディアクエリと形式に対して追加の<source>要素を使用して画像を強化できるため、レスポンシブデザインに対してより柔軟に対応できます。ターゲットオプションのリンク link-target
リンクのhideTarget オプションは、生成されたリンクにtarget属性を含めるか、リンク作成用のダイアログにターゲット選択用のフィールドを含めるかを制御します。
hideTarget: false（デフォルト） hideTarget-false
<a href="https://example.com" target="_self">Link text</a>
<a href="https://example.com" target="_blank">External link</a>
hideTarget: true hideTarget-true
<a href="https://example.com">Link text</a>
画像上のリンクの無効化 disableforimages
リンクのdisableForImages オプションは、ユーザーが画像および画像要素にリンクを作成できるかどうかを制御します。 これは、インライン <img>要素とブロックレベル <picture>要素の両方に適用されます。
disableForImages: false（デフォルト） disableforimages-false
ユーザーは画像を選択し、リンクに折り返すことができます。
<!-- Inline image with link -->
<a href="https://example.com">
<img src="image.jpg" alt="Description" />
</a>
<!-- Block-level picture with link -->
<a href="https://example.com">
<picture>
<img src="image.jpg" alt="Description" />
</picture>
</a>
disableForImages: true disableforimages-true
画像または画像が選択されている場合、リンクボタンは無効になります。 ユーザーが作成できるのは、テキストコンテンツ上のリンクのみです。
<!-- Images remain standalone without links -->
<img src="image.jpg" alt="Description" />
<picture>
<img src="image.jpg" alt="Description" />
</picture>
<!-- Links work normally on text -->
<a href="https://example.com">Link text</a>
disableForImages: trueは、次の場合に使用します。
- リンクされた画像を防ぎ、視覚的な一貫性を維持します。
- 画像をナビゲーションから分離して、コンテンツ構造を簡素化する。
- 画像のリンクを制限するコンテンツポリシーを適用できます。
- コンテンツ内のアクセシビリティの複雑さを軽減。
タグオプション tag
書式設定アクションを使用すると、HTMLのバリエーションを切り替えることができます。
bold<strong><b>italic<em><i>strike<del><s>アクセシビリティとSEOを向上させるために、セマンティックタグ （<strong>、<em>、<del>）を選択してください。
インラインコード inline-code
code_inline形式オプションは、テキストのスパンをインラインコードとしてマークし、<code>をレンダリングします（たとえば、文内のfoo()呼び出しを参照します）。 bold/italic/strikeとは異なり、タグ切り替えオプションはなく、他のすべてのマークは除外されます。 インラインコードは冗長にレンダリングされるため、bold/italic/linkをその上に適用することはできません。 既定のキーボード ショートカットはMod-eです。
これは、blocks ドロップダウンで使用できるcode_block ブロック （<pre><code>）とは異なります。 code_inlineは行内のインラインマークですが、code_blockはスタンドアロンの複数行ブロックです。 コードブロックにはプレーンテキストのみが保持されるため（マークなし）、インライン <code>は<pre>内にネストされることはありません。
Use the <code>foo()</code> helper here.
テキストカラー color
text_color形式オプションを使用すると、エディターにテキストの色付け機能が追加されます。
<!-- With color applied -->
<span style="color: #ff0000">Colored text</span>
<!-- Color removed -->
Plain text
また、下位互換性のために従来の<font color="...">要素も解析します。
キーボードショートカット keyboard-shortcuts
ショートカットでは、次の形式Mod-Keyを使用します。
Mod= MacのCmd、Windows/LinuxのCtrl- 例：
Mod-B,Mod-Shift-8,Mod-Alt-1
サポートされていないHTML unsupported-html
デフォルトでは、未知のHTML タグは、エディターによって解析されると削除されます。 これらを保持するには、unsupportedHtml設定オプションを使用してオプトインします。
const rteConfig = {
unsupportedHtml: true, // preserve unknown HTML tags (default: false)
};
false（デフォルト）trueunsupportedHtmlOptions.structuralTags（任意） unsupportedhtmloptions
unsupportedHtmlOptions.structuralTagsを使用して、サポートされているHTMLとして扱われる追加の構造化タグを制御します。
const rteConfig = {
unsupportedHtml: true,
unsupportedHtmlOptions: {
structuralTags: ["div", "section"], // preserve configured tags as supported
},
};
[]["div"]<div>はサポートされているHTMLとして扱われ、サポートされていないラッピングではありません。["div", "section"]<div>と<section>の両方がサポート対象HTMLとして扱われ、サポート対象外としてラップされません。unsupportedHtmlOptionsは、unsupportedHtmlが有効になっている場合にのみ動作に影響します。有効にすると、エディターはサポートされていないノードをラッパータグ （unsupported-block/unsupported-inline）およびラッパークラスでレンダリングします。 コンシューマーアプリでは、このクラスのスタイル設定（例：境界線、パディング、背景）を指定する必要があります。 ブロック内のタグラベルはrte-unsupported-labelを使用しており、これもカスタマイズできます。
rte-unsupported-blockrte-unsupported-inlinerte-unsupported-label
コンシューマーアプリでは、これらのクラス（境界線、間隔、背景、インライン配置など）のスタイル設定を行う必要があります。
unsupportedHtmlが有効になっている場合、サポートされていないブロックまたはインラインノードをコピーすると、クリップボードに内部テキスト（プレーンテキストのみ）が表示され、ユーザーがコンテンツを別の場所に貼り付けられるように、サポートされていないノードプラグイン（createUnsupportedNodesPlugin()など）を追加する必要があります。