豐富文本元素概述 - Webflow 幫助
使用豐富文本元素 (RTE) 來創建長篇內容。
豐富文本元素 (RTE) 是創建長篇內容的完美元素，如博客文章、關於頁面、傳記等。與其添加單獨的標題、段落、列表或圖像元素，您可以雙擊豐富文本元素來創建和格式化文本、自定義代碼和媒體元素。
如何將豐富文本元素添加到您的網站
您可以通過將豐富文本元素從添加面板 (A) 拖到設計師畫布上來添加它。要添加或編輯其中的內容，雙擊豐富文本元素或選擇該元素並按鍵盤上的Enter或Return鍵。
您可以在豐富文本元素中添加以下元素：
- 段落
- 標題 (H1-H6)
- 圖像
- 圖像標題
- 圖像替代屬性
- 自定義代碼
- 區塊引用
- 無序列表 (項目符號)
- 有序列表 (編號)
- 視頻 (YouTube, Vimeo)
- 豐富媒體 (Google 地圖, SoundCloud, Imgur, Giphy, Codepen 等)
您還可以為文本元素添加其他格式：
- 連結 (URL, 頁面, 電子郵件等)
- 粗體文本
- 斜體文本
- 上標和下標文本
- 代碼
斜線命令
當您在 RTE 中編輯內容時，可以使用斜線命令快速生成副本，使用 Webflow AI 助手或添加新的內容元素。要使用斜線命令，請按鍵盤上的 /（斜線）並點擊生成更多副本以使用 AI 助手添加上下文相關的文本，從添加菜單中選擇所需的元素，或開始輸入以篩選元素列表：
- 標題 (H1–H6)
- 編號列表
- 項目符號列表
- 段落
- 區塊引用
- 圖像
- 視頻
- 豐富內容
- HTML 嵌入
- 代碼塊
如何新增和格式化文字內容
您可以在 RTE 中開始輸入文字，然後對文字進行格式化，以創建標題、區塊引用、粗體或斜體文字、上標或下標文字，以及連結。
使用 Webflow AI 助手生成文字內容
要快速使用 AI 助手在 RTE 中添加上下文相關的文案：
- 右鍵點擊 RTE
- 從上下文選單中選擇 修改文案
- （可選）輸入描述您想生成的文案的提示
- 點擊 "提交提示" 圖標
- 點擊 完成 接受生成的文案
了解更多關於使用 Webflow AI 助手生成和編輯內容。
如何新增段落
就像任何其他文字編輯器一樣，按下鍵盤上的 Enter 鍵將在新行創建一個新段落，您可以繼續輸入。要添加多個段落，請在段落末尾按 Enter。 您也可以使用 Webflow AI 助手為您添加和完善文字。
如何新增標題和區塊引用
要創建標題，選擇段落中的任何文字，然後選擇 標題 (H1-H6) 選項。創建區塊引用的方法相同。
如何格式化文字和添加連結
任何文字元素的任何部分（例如，標題、段落、標題等）都可以通過選擇部分文字並應用您想要的格式選項來進行粗體、斜體、上標、下標和連結格式化。了解更多關於內嵌文字格式化。
當您在 RTE 中創建連結時，您可以選擇 URL、頁面、頁面部分、電子郵件或電話號碼。
鍵盤快捷鍵
這些鍵盤快捷鍵可以幫助您快速格式化豐富文本內容：
- 插入不換行空格：Shift + Space
- 插入換行符：Shift + Enter
- 粗體文字：Command + B（Windows 上為 Control + B）
- 斜體文字：Command + I（Windows 上為 Control + I）
- 插入超連結：Command + K（Windows 上為 Control + K）
在 RTE 中編輯時，您可以使用斜線命令快捷鍵（“/**”）快速添加內容元素。您也可以使用 Markdown 快捷鍵：
- 斜體文字：
*text*或_text_ - 粗體文字：
**text**或__text__ - 粗斜體：
***text***或___text___ - 插入超連結：
[hyperlink text](https://www.url.com) - 標題 1：
#+ 空格 - 標題 2：
##+ 空格 - 標題 3：
###+ 空格 - 標題 4：
####+ 空格 - 標題 5：
#####+ 空格 - 標題 6：
######+ 空格 - 區塊引用：
>+ 空格 - 無序列表：
-+ 空格 - 有序列表：
1.+ 空格
如何添加媒體內容、自定義代碼和列表
當您的文本光標位於新行時，會出現一個“加號”按鈕。點擊此按鈕會顯示插入菜單，選項包括添加圖片、視頻、其他豐富媒體、自定義代碼以及項目符號或編號列表。
添加圖片、視頻和豐富媒體
RTE 中的所有媒體元素都是響應式的，並將遵循內容的長寬比。YouTube、Vimeo 和 Dailymotion 視頻支持已增強，允許自定義開始時間。以下是一些支持的豐富媒體類型列表：
- YouTube
- Vimeo
- Instagram 帖子
- Facebook 帖子
- DailyMotion
- Kickstarter
- TED
- Wistia
- Livestream
- Twitch
- Hulu
- Imgur 相冊
- Google 地圖
- JSFiddle
- Codepen
- Scribd
- SlideShare
- Spotify 播放列表和排行榜
- Giphy
- SoundCloud
- 還有更多！
媒體設定
每個媒體元素可以使用圖像設定中的預設值來調整大小，或通過點擊工具欄中的“扳手”圖標設置為特定的像素或百分比值。還可以在圖像下方添加可選的標題。
替代文字
要為圖像添加替代文字，選擇圖像，點擊“扳手”圖標，然後輸入您的替代文字。了解更多關於撰寫描述性替代文字。
如何添加自定義代碼
插入菜單中包含一個按鈕來添加自定義代碼。您可以使用自定義代碼來創建表格和分隔線，使用HTML，使用CSS來設計內容的部分，使用JavaScript擴展網站的功能，並嵌入第三方內容。
步驟：
- 將光標放置在您想添加代碼的位置
- 點擊“加號”圖標打開插入菜單，然後點擊自定義代碼按鈕
- 添加您的代碼
如何添加列表
插入菜單提供了添加無序（項目符號）和有序（編號）列表的選項。您還可以嵌套或取消嵌套列表。
- 項目符號列表：使用插入菜單或輸入一個破折號
-後跟一個空格。 - 編號列表：使用插入菜單或輸入一個整數後跟一個句號和一個空格。
- 嵌套列表：選擇項目並按Tab鍵。取消嵌套：選擇並按Shift + Tab。
如何從其他來源添加富文本內容
您可以從其他網站或文字處理器（如Google Docs）粘貼富文本。如果粘貼到設計器或CMS富文本字段中，格式、鏈接和圖像將被保留。
如何重新排列和刪除元素
在豐富文本元素中，可以通過拖放到畫布或導航器上來重新排列元素，或者使用鍵盤快捷鍵。選擇元素並按下 Backspace 或 Command + X（Windows 上為 Control + X）即可刪除元素。
如何設計 RTE 內容
設計豐富文本元素內的個別元素
像設計任何 Webflow 元素一樣設計豐富文本元素內的元素：在畫布上選擇，進入 樣式面板，應用或創建類別，然後設計。
使用 HTML 標籤設計豐富文本元素內的元素
RTE 元素繼承 HTML 標籤的樣式。您可以通過嵌套選擇器設計，將默認樣式限制在具有相同類別的 RTE 中。
步驟：
- 在畫布上選擇 RTE
- 給 RTE 一個類別
- 選擇 RTE 中的元素
- 進入 樣式面板 (S)
- 點擊 選擇器 欄位
- 選擇 HTML 標籤
- 點擊 在“類別名稱”內嵌套選擇器
- 按需設計
如何設計動態豐富文本
豐富文本元素可以綁定到集合中的豐富文本字段。設計最好通過斷開連接、設計和重新綁定來完成，或者通過應用類別、設計並保持連接。了解更多關於動態豐富文本。