進階輸入

Rich Text Editor|富文字編輯器

需要讓非技術使用者在內容中加入少量格式時使用;工具列只能保留任務真正需要的能力。

常見俗稱:富文字編輯器、所見即所得編輯器、WYSIWYG、內容編輯器、Rich Text Editor

60 秒決策

先確認使用者要完成的事。

適合使用

  • 非技術使用者需要在內容中使用少量段落、粗體、斜體或清單格式。
  • 格式化內容本身是任務成果,且後端能安全處理對應格式。

不適合使用

  • 只需要一段純文字備註。
  • 團隊不需要使用者自行控制格式,或尚未定義可接受的內容格式與清理規則。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

工具列只留任務需要的動作

公告通常只需要基本格式;十幾個按鈕會讓人花時間找工具,也增加驗收範圍。

編輯區要像可編輯內容

可見 Label、清楚 Focus、最小舒適高度與輸入後的狀態都不可缺少。

格式與安全一起設計

富文字輸出前需要定義允許的格式與清理策略,不能把使用者輸入直接信任為安全 HTML。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

空白或草稿

顯示要撰寫什麼與可用的最少格式。

選取文字

格式按鈕能對選取內容生效,且狀態可辨識。

已編輯

內容變更後提供儲存或未儲存提示。

唯讀或格式受限

說明不能編輯或不能使用某些格式的原因。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 活動公告草稿

    先觀察:工具列是否只保留公告真正需要的格式,且編輯區可直接輸入。

    操作:選取一段文字後按粗體或斜體,或插入清單。

    預期結果:內容格式有變化;工具按鈕有名稱與選取狀態,不會出現無關的文書功能。

可操作 Demo

只保留必要格式的公告編輯器

活動公告

這份公告只需要強調、斜體與清單;工具列不必假裝成文書處理器。

活動公告

請在週五前完成報名;若需協助,請直接回覆這則公告。

目前為草稿,可選取文字後套用必要格式。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

建立「活動公告」Rich Text Editor。提供標題、粗體、斜體與項目清單等必要工具,編輯區可直接輸入並保留可見焦點;工具列按鈕要有文字或可理解名稱,按下後更新狀態。不要做成含字型、字級、色盤、表格與十幾個按鈕的迷你文書處理器。

驗收清單

不要只確認欄位能不能點。

  • 工具列是否只提供任務必要的格式?
  • 編輯區是否有 Label、Focus 與最小高度?
  • 按鈕是否有可理解名稱與狀態?
  • 是否定義允許格式與輸出清理策略?
  • 純文字情境是否改用 Textarea?