文字元件(v1) text-component-v

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
核心組件

建立對象：

開發人員
管理員
使用者

文字元件是RTF編輯和撰寫元件，具備就地編輯功能。

使用情況 usage

文字元件提供強大的RTF編輯器，允許在簡化的內嵌編輯器中以全熒幕格式輕鬆編輯文字。

編輯對話方塊具有內嵌編輯功能，且全熒幕編輯對話方塊中可提供完整功能的有限選項。使用設計對話方塊，可以為內容作者設定範本的文字格式選項，例如標題、特殊字元和段落樣式。

版本和相容性 version-and-compatibility

本檔案說明文字元件v1，其最初隨附於AEM 6.3的核心元件1.0.0版引入。

下表列出文字元件v1的相容性。

AEM 版本

文字元件v1

6.3

相容

6.4

相容

CAUTION

本檔案說明文字元件v1。

如需目前版本的文字元件的詳細資訊，請參閱文字元件檔案。

範例元件輸出 sample-component-output

以下是從We.Retail中取得的範例。

螢幕擷圖 screenshot

HTML html

<div class="cmp cmp-text aem-GridColumn aem-GridColumn--default--12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor ante a tortor volutpat maximus. Donec eu porta eros. Aenean sit amet eleifend arcu, eu vestibulum magna. Fusce eget nisi tincidunt, tristique felis quis, tincidunt est. Aliquam consequat aliquam quam non eleifend. Phasellus ut magna luctus, aliquam risus eget, fermentum augue. Aliquam lobortis accumsan magna, quis efficitur enim dictum eu. Pellentesque iaculis felis eget felis commodo, non euismod dolor euismod. Quisque nec arcu rutrum, mollis tortor non, sollicitudin odio. Sed dictum nulla mauris, eu pretium dui vulputate a. Maecenas lacus massa, egestas vitae tincidunt eu, interdum et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend ex lacus, in consectetur nunc interdum et. Donec interdum mi vitae dolor pretium mattis. In quis arcu sapien. Phasellus at metus vitae nisi tincidunt varius.<br />
</p>
</div>

JSON json

"text": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor ante a tortor volutpat maximus. Donec eu porta eros. Aenean sit amet eleifend arcu, eu vestibulum magna. Fusce eget nisi tincidunt, tristique felis quis, tincidunt est. Aliquam consequat aliquam quam non eleifend. Phasellus ut magna luctus, aliquam risus eget, fermentum augue. Aliquam lobortis accumsan magna, quis efficitur enim dictum eu. Pellentesque iaculis felis eget felis commodo, non euismod dolor euismod. Quisque nec arcu rutrum, mollis tortor non, sollicitudin odio. Sed dictum nulla mauris, eu pretium dui vulputate a. Maecenas lacus massa, egestas vitae tincidunt eu, interdum et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend ex lacus, in consectetur nunc interdum et. Donec interdum mi vitae dolor pretium mattis. In quis arcu sapien. Phasellus at metus vitae nisi tincidunt varius.</p>\n",
              "richText": true,
              ":type": "weretail/components/content/text"
            }

NOTE

從核心元件匯出JSON需要版本1.1.0的核心元件。如需詳細資訊，請參閱核心元件v1🔗的相容性資訊。

編輯對話方塊 edit-dialog

「編輯」對話方塊提供使用者將用於撰寫文字的標準RTF格式工具。

粗體

用於套用粗體格式至選取的文字，或套用粗體格式至游標後輸入的文字。

Ctrl+B 可以當做鍵盤快速鍵使用。
斜體

用於將斜體格式設定套用至選取的文字，或將游標後輸入的文字斜體化。

Ctrl+I 可以當做鍵盤快速鍵使用。
底線

用於將底線格式套用至選取的文字，或在游標之後輸入的文字加上底線。

Ctrl+U 可以當做鍵盤快速鍵使用。
下標

用於將選取的文字或在游標之後輸入的文字格式化為下標。
上標

用於將選取的文字或在游標之後輸入的文字格式化為上標。
貼上成文字

將任何複製的文字貼上為純文字，不設定任何格式。

當選取此選項時，會開啟一個視窗，其中的文字可以貼上成無格式的純文字，作為插入文字中之前的預覽。點選或按一下核取記號即可接受，點選或按一下x可取消。
從 Word 貼上

當選取此選項時，會開啟一個視窗，其中的文字可貼上並保留其格式，作為插入文字中之前的預覽。點選或按一下核取記號即可接受，點選或按一下x可取消。
超連結

使用此選項可將選取的文字轉換為超連結或修改已定義的連結。此選項只有在已選取文字並開啟視窗（其中包含設定連結的其他選項）時才會啟用。
- 輸入位置
  - 使用「開啟選取範圍」對話方塊在AEM中選擇路徑
  - 如果連結不在AEM內，請輸入絕對URL (非絕對路徑會解譯為相對於AEM)
- 輸入連結的替代描述文字
- 選取連結行為
  - 目標
  - 相同標籤
  - 新標籤
  - 父框架
  - 上框架
點選或按一下核取記號以套用連結，或點選x以取消。
取消連結

使用此選項可移除已套用至所選文字的連結。此選項僅在已選取連結時有效。
尋找

使用此選項來搜尋文字，找出指定文字字串的出現位置。選取此選項會開啟一個視窗，用以指定搜尋選項。

輸入您要搜尋的文字，然後點選或按一下[尋找] 開始搜尋。 點選或按一下x以取消。

如果您想要根據大小寫進行完全比對，請先選取選項 符合大小寫，再開始搜尋。

如果找到相符專案，則會反白該專案，且搜尋對話方塊會變暗。在灰色的對話方塊中，再次點選或按一下尋找按鈕以搜尋下一個專案。

如果未找到其他事件，則會顯示訊息，並從文字的開頭重新開始搜尋。
取代

使用此選項來搜尋文字以確定指定文字字串的出現位置，並將相符專案取代為其他字串。選取此選項會開啟一個視窗，用於指定搜尋和取代選項。

輸入要搜尋的文字以及應取代的文字。

點選或按一下尋找開始搜尋。按一下或點選x以取消。

如果您想要根據大小寫進行完全比對，請先選取選項 符合大小寫，再開始搜尋。

如果找到相符專案，則會反白該專案，且搜尋對話方塊會變暗。在灰色的對話方塊中再次按一下尋找按鈕以搜尋下一個專案，或選取取代按鈕以取代醒目提示的相符文字。請注意，Replace 按鈕只有在進行比對後才會啟用。

選取 全部取代 以一次取代所有出現的文字。
向左對齊文字

用於將文字對齊左邊界。
文字置中

用於將文字置中。
向右對齊文字

用於將文字對齊右邊界。
項目符號

用於將選取的文字格式化為專案符號清單，或在游標後開始插入專案符號清單。

若要結束專案符號清單，請再次點選或按一下 專案符號 按鈕，或輸入兩個歸位字元。
編號

用於將選取的文字格式化為編號清單，或在游標後開始插入編號清單。

若要結束編號清單，請再次點選或按一下編號按鈕或輸入兩個歸位字元。
凸排

用來減少所選文字的縮排層級，或在游標之後輸入的文字。

只有當選取的文字或游標位置已經縮排時，才為作用中。
縮排

用於增加所選文字的縮排層級，或在游標之後輸入的文字。
表格

用於將表格插入文字中。選取此選項會開啟一個視窗，用於指定表格的詳細資訊。
- 欄 — 資料表的欄數（必要）
- 列 — 資料表的列數（必填）
- 寬度 — 表格的寬度
- 高度 — 資料表的高度
- 儲存格內邊距 g — 儲存格內容周圍的空間
- 儲存格間距 — 儲存格之間的間距
- 框線 — 資料表的框線粗細
- 如果針對表格的標頭：
  - 應使用第一列
  - 應使用第一欄
  - 應使用第一列和第一欄
  - 或不應使用任何標頭。
- 標題 — 資料表的標題
檢查拼字

用於檢查文字內容的拼字。可能的拼字錯誤會以紅色虛線加底線。
特殊字元

用於將特殊字元插入文字中。選取此選項會開啟顯示可用字元的視窗。

點選或按一下所需的字元，將其插入游標之後的文字中。可以插入多個字元。點選或按一下x以關閉選取範圍視窗。

來源編輯

用於檢視及修改文字的HTML來源。

點選或按一下 Source Edit 圖示，從格式化檢視變更文字內容以檢視原始HTML。在此模式中，會停用所有其他格式選項。再次點選或按一下「Source編輯」圖示可返回格式化檢視。

note caution
CAUTION
和存取原始HTML時一樣，使用 Source編輯選項時必須小心！
已掃描透過 Source Edit 輸入的HTML是否有XSS風險，任何插入的指令碼都會被移除，不會顯示在結果頁面上。不過，在 Source Edit 中輸入的格式錯誤的HTML可能會破壞頁面的範本，導致未預期的格式設定或導致產生的頁面無法使用。