富文本編輯器

👀 Rich Text Editor

Rich Text Editor - Compose and format text with headings, lists, bold, italic and links, with live HTML preview and one-click copy. Runs in your browser.

📐 工作原理與說明
所見即所得的富文本編輯器。
  • 實現:基於 contenteditable 或自維護文件模型(如 ProseMirror、Slate)。
  • 命令:加粗、斜體、標題、列表、連結、程式碼塊等,通過命令系統操作選區內容。
  • 安全:貼上內容必須淨化,輸出 HTML 前必須過濾,否則極易引入 XSS。
  • 難點:各瀏覽器的選區、輸入法與撤銷棧行為差異較大。

歡迎使用富文本編輯器

在這裡直接輸入或貼上內容,使用上方工具欄排版。支援 超連結、彩色文字 與 行内代码。

  • 列表項一
  • 列表項二
引用示例:所有處理都在本地瀏覽器完成。
字元數 0 不含空格 0 詞數 0 段落數 0 連結數 0 圖片數 0 HTML 體積 0 B
HTML 原始碼(可反向編輯)

📚 深度解析:Rich Text Editor

💡 常見使用場景

  • 線上編輯帶格式文本並匯出 HTML。
  • 給 CMS 或後臺編輯公告內容:排版完成後取 HTML 直接入庫,省去讓運營手寫標籤。
編輯
加粗/列表/連結後匯出對應 HTML 片段。

❓ 常見問題(FAQ)

貼上會帶樣式嗎?
通常做淨化防止 XSS。
生成的內容能直接存進資料庫嗎?
可以存,但必須在服務端做消毒(sanitize):富文本的 HTML 來自不可信輸入,直接渲染等於開放 XSS。應使用白名單策略只保留必要的標籤與屬性(去掉 script、iframe、on* 事件與 style),並在入庫與渲染前各做一次,避免只做前端過濾。
⚠️ 使用說明與注意事項