為通用編輯器設定RTE configure-rte

最後更新： 2026年8月19日

適用對象：
Experience Manager as a Cloud Service

主題：
Developing

建立對象：

Admin
Developer

瞭解如何在通用編輯器中設定RTF編輯器(RTE)。

概觀 overview

通用編輯器在適當位置和屬性面板中提供RTF編輯器(RTE)，讓作者在編輯文字時套用格式變更。

此RTE可使用元件篩選器來設定。本檔案說明有哪些組態選項以及範例提供。

NOTE

當您啟動Universal Editor專案時，後端支援的所有RTF文字功能（AEM搭配Edge Delivery或Headless實作）都會自動啟用，並可在RTE的模組編輯器視窗中使用。

您可以停用這些不需要的選項。
不支援啟用與您的專案型別不相容的選項。

設定結構 structure

RTE組態包含兩個部分：

toolbar：工具列設定會控制UI中可用的編輯選項及其組織方式。
actions：動作設定可讓您自訂個別編輯動作的行為和外觀。

這些組態可以定義為具有屬性rte的元件篩選器的一部分。

[
  {
    "id": "richtext",
    "rte": {
      "toolbar": {
        // Toolbar configuration
      },
      "actions": {
        // Action-specific configurations
      }
    },
    "components": [
      "richtext"
    ]
  }
]

工具列設定會控制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>

NOTE

展開段落(wrapInParagraphs： false)時，清理程式會自動在多個段落之間插入<br>標籤，以保留視覺化分行符號。這遵循HTML標準和主要RTF編輯器的常見做法。

屬性對話方塊 properties-dialog

啟用這些旗標時，資料表外掛程式會提供三個從 資料表 功能表開啟的屬性編輯器對話方塊：

表格屬性 — 編輯封入表格的寬度/高度、儲存格間距、儲存格邊距、對齊方式、框線（寬度/樣式/顏色）和背景顏色。邊框和儲存格邊框間距變更會散開至相同交易中的每個儲存格，因此視覺效果會符合使用者的預期。
列屬性 — 編輯封入列的列型別（頁首/正文/頁尾）、對齊方式、高度、框線（寬度/樣式/顏色）和背景顏色。資料列型別是僅限區段的（符合TinyMCE的預設table_header_type: "section"）：標題資料列在序列化時移入<thead>，但其儲存格仍為<td>。對<th>使用儲存格屬性 -> 標題儲存格。在序列化時，資料列會分組為真正的<thead>/<tbody>/<tfoot>區段（符合TinyMCE/Word）。請參閱下方的儲存注意事項。邊框會扇出至列的儲存格，以便在邊框摺疊下呈現。
儲存格屬性 — 編輯選取的儲存格型別（儲存格/標題儲存格）、寬度/高度、水平和垂直對齊、邊框（寬度/樣式/顏色）和背景顏色。當CellSelection跨越多個儲存格時，修補程式會一次套用至每個選取的儲存格。儲存格型別在table_cell (<td>)和table_header (<th>)之間切換儲存格。

這三種預設為停用（選擇加入），這與其餘的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

對話方塊在個別ProseMirror節點上往返到htmlAttrs.style，也就是像TinyMCE/Word這樣的內嵌CSS會發出，而不是自訂資料屬性。儲存格寬度也會寫入結構描述層級colwidth，使其在PM的表格機器中存留。儲存格型別由節點標籤(<td>/<th>)承載。

prosemirror-tables結構描述是平面的(table -> table_row -> cell)，沒有<thead>/<tbody>/<tfoot>節節點，所以在內部列的Header/Body/Footer意圖在<tr>上被保留為data-row-type標籤。當列的型別變更時，這些列會重新排序到相同交易內的頁首 — >內文 — >頁尾順序中，因此編輯器畫布會即時比對匯出的結構（頁首列提升到頂部，頁尾列沈到底部，例如TinyMCE）。當任何儲存格橫跨多個資料列(rowspan > 1)時，會跳過這個編輯器內的重新排序，因為行動資料列會損毀格線。在離開時，sanitizeHTML會將資料列分組為真正的<thead>/<tbody>/<tfoot>區段（標題資料列優先，頁尾資料列優先）並捨棄標籤，產生相同的結構TinyMCE/Word發出。在傳入的路上，<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 — 縮排/凸排僅適用於清單專案：
- 清單：巢狀/取消巢狀清單專案
- 段落和標題：無縮排（按鈕已針對這些專案停用）

NOTE

透過Tab/Shift+Tab鍵的清單巢狀功能與一般縮排設定無關。

特殊字元 special-characters

special_characters插入動作會開啟用於插入特殊字元（符號、數學運運算元、貨幣符號、標點符號、箭號等）的字元選擇器彈出視窗。游標位置。

{
  "toolbar": {
    "insert": ["link", "unlink", "image", "table", "special_characters"],
    "sections": ["insert"],
  },
  "actions": {
    "special_characters": {
      "label": "Special Characters"
    }
  }
}

隨附現成可用的44個常用字元預設集。字元清單可透過兩個設定選項自訂：

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內容呈現的地方（編輯器、預覽、發佈）載入它。

只有在已設定至少一個選項時，下拉式清單才會出現。外掛程式出貨時沒有預設值。

{
  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="...">中。如果選取範圍已有範圍，則會更新現有範圍的類別。
移除自訂類別：從目標中移除Managed類別（範圍執行或區塊，以插入號解析到的為準）。如果範圍上唯一剩餘的屬性是Managed類別，則範圍本身會解除包裝。 移除自訂類別選項只有在受管理的類別目前作用中時才會出現。

不屬於已設定選項清單的現有類別會保留不變。只有Managed類別會交換in/out。消費者集類別會與外掛程式安全地共存。

下拉式清單反射：

只放置游標時，下拉式清單會反映最近的Managed類別：插入符號處的範圍（如果有的話），否則游標下的區塊。
選取範圍中，下拉式清單會反映範圍上環繞選取範圍的Managed類別。只有當整個選取範圍共用相同的類別時。混合選取範圍不會顯示任何選取的專案。

區塊型別 block-types

blocks工具列區段會呈現一個下拉式清單，在設定的區塊型別之間切換目前的區塊。支援的值為paragraph、h1-h6、code_block和blockquote。

blockquote是包裝區塊（其ProseMirror content為block+），不同於paragraph/h1-h6/code_block是文字區塊。選取引號會在<blockquote>中包裝目前區塊。下拉式清單接著會顯示引號為選取狀態，而插入號在其中一個區塊中。在引號內選取任何其他區塊型別（例如段落）時，會先將區塊從引號中提起，因此也會離開引號。這會反映TinyMCE的區塊下拉式清單。
因為是包裝節點，<blockquote>可以包含多個段落、清單，甚至巢狀引號。這就是讓外部編寫的內容無損往返的原因：TinyMCE （舊式內容）和Word （貼上）都會發出<blockquote><p>…</p></blockquote> （通常為多段落），而且結構會在載入、編輯和序列化時保留，而不是平面化。
如同所有區塊型別，消費者應用程式擁有的CSS在轉譯RTE內容的任何地方都以視覺化方式顯示<blockquote>。

{
  "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時，將createFindAndReplacePlugin()新增到您編輯器的ProseMirror外掛程式。
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>個元素的回應式影像支援。
藝術方向功能。
進階影像功能的未來保障。
一致的圖片元素結構。

NOTE

啟用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時，請使用

防止連結的影像，以維持視覺上的一致性。
將影像與導覽分開，簡化內容結構。
強制實施限制影像連結的內容原則。
降低內容中的協助工具複雜性。

NOTE

此設定只會影響在影像上建立新連結的能力。它不會移除內容中影像的現有連結。

標籤選項 tag

格式動作可讓您在HTML變體之間切換。

動作

預設標籤

替代標籤

使用案例

bold

<strong>

<b>

語意與視覺強調

italic

<em>

<i>

語意與視覺樣式

strike

<del>

<s>

視覺化與語意刪除

選擇語意標籤(<strong>、<em>、<del>)，以獲得更好的協助工具和SEO。

內嵌程式碼 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 (預設)

剖析期間會捨棄未知的HTML標籤。

true

未知的HTML標籤會包裝在自訂不支援的區塊節點中，讓內容可安全地來回。

`unsupportedHtmlOptions.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，而不會包裝為不受支援的。

NOTE

unsupportedHtmlOptions只會在啟用unsupportedHtml時影響行為。

啟用時，編輯器會轉譯不支援的節點，其中包含包裝函式標籤(unsupported-block/unsupported-inline)和包裝函式類別。消費者應用程式應提供此類別的樣式（例如，邊框、邊框間距、背景）。區塊內的標籤標籤使用rte-unsupported-label，也可以自訂。

rte-unsupported-block
rte-unsupported-inline
rte-unsupported-label

消費者應用程式應提供這些類別的樣式（例如邊框、間距、背景和內嵌對齊）。

啟用unsupportedHtml時，取用者應新增不支援的節點外掛程式（例如createUnsupportedNodesPlugin()），以便複製不支援的區塊或內嵌節點將其內部文字放在剪貼簿（僅限純文字），而使用者可以將內容貼到其他地方。

recommendation-more-help

experience-manager-cloud-service-help-main-toc

為通用編輯器設定RTE configure-rte

概觀 overview

設定結構 structure

工具列設定 toolbar

動作設定 action

常用動作選項 common-action-options

格式化動作 format

清單動作 list

表格動作 table-actions

表格組態選項 table-configuration-options

屬性對話方塊 properties-dialog

屬性對話方塊選項 properties-dialog-options

連結動作 link

連結設定選項 link-options

影像動作 image

影像組態選項 image-options

全螢幕 full-screen

縮排設定 indentation

縮排範圍選項 indentation-options

特殊字元 special-characters

將字元附加至預設值 append-special-characters

取代預設特殊字元 replace-special-characters

兩個選項搭配使用 both-special-character-options

CSS 類別 css-classes

區塊型別 block-types

以文字格式貼上 paste-as-text

尋找並取代 find-replace

其他動作 other

完成範例 example

動作選項詳細資訊 action-details

wrapInParagraphs wrapInParagraphs

wrapInParagraphs: false (預設) wrapInParagraphs-false

wrapInParagraphs: true wrapInParagraphs-true

wrapInPicture

wrapInPicture： false （預設） wrapinpicture-false

wrapInPicture： true wrapinpicture-true

連結目標選項 link-target

hideTarget: false (預設) hideTarget-false

hideTarget: true hideTarget-true

停用影像上的連結 disableforimages

disableForImages: false (預設) disableforimages-false

disableForImages： true disableforimages-true

標籤選項 tag

內嵌程式碼 inline-code

文字顏色 color

鍵盤快速鍵 keyboard-shortcuts

不支援的HTML unsupported-html

unsupportedHtmlOptions.structuralTags (可選) unsupportedhtmloptions

`wrapInParagraphs` wrapInParagraphs

`wrapInParagraphs: false` (預設) wrapInParagraphs-false

`wrapInParagraphs: true` wrapInParagraphs-true

`wrapInPicture`

`hideTarget: false` (預設) hideTarget-false

`hideTarget: true` hideTarget-true

`disableForImages: false` (預設) disableforimages-false

`unsupportedHtmlOptions.structuralTags` (可選) unsupportedhtmloptions