wangEditor - daniel-qa/Vue GitHub Wiki

👉 wangEditor v4 官方文檔( for Vue2 )： 🌐

demo

const editor = new E(this.$refs.testEditor) // 建立 editor 並綁定 DOM
editor.config.height = 300                  // 設定編輯器高度
editor.config.uploadImgShowBase64 = true    // 圖片使用 base64（測試模式）
editor.config.placeholder = '測試編輯器...'  // 空白提示文字
this.$editorTools.initMyEditor(editor, this) // 初始化自訂 editor 工具
editor.create()                              // 建立並渲染 editor
this.editor = editor                         // 保存 editor instance
editor.txt.html('<p>🧪 測試編輯器</p>')       // 設定初始內容

最基本儲存（只存內容）

{
  content: "<p>使用者輸入的 HTML 內容</p>"
}

獲取方式：

const htmlContent = this.editor.txt.html()  // HTML 格式
const textContent = this.editor.txt.text()  // 純文字格式

建議儲存（含元資料）

{
  // 核心內容
  content: "<p>使用者輸入的 HTML 內容</p>",
  text: "使用者輸入的純文字內容",
  
  // 元資料
  id: "test-content-001",           // 唯一 ID
  createdAt: "2026-04-10T13:36:00", // 建立時間
  updatedAt: "2026-04-10T13:40:00", // 更新時間
  
  // 使用者資訊
  userId: "user-123",               // 使用者 ID
  userName: "測試使用者",            // 使用者名稱
  
  // 其他
  wordCount: 150,                   // 字數統計
  hasImage: true,                   // 是否包含圖片
  hasFormula: false                 // 是否包含公式
}

1️⃣ 字體格式都直接儲存在 HTML 標籤中：

// 編輯器顯示
這是 粗體 斜體 底線
 
// 實際儲存的 HTML
<p>這是 <strong>粗體</strong> <em>斜體</em> <u>底線</u></p>
不需要額外儲存！ HTML 本身就包含了格式資訊。

2️⃣ 字體（Font Family）

A. 一般字體（inline style） 如果使用者在編輯器中選擇字體：

<p style="font-family: Arial;">這段文字是 Arial</p>
<p style="font-family: '微軟正黑體';">這段文字是微軟正黑體</p>
  • 額外的 Tag

StartFragment

它屬於 Windows 剪貼簿 HTML 格式（CF_HTML） 的規範，由微軟定義。

當程式要把 HTML 放進 Windows 剪貼簿時，必須遵守這個格式，其中就包含用 < !--StartFragment--> 和 < !--EndFragment--> 標出選取範圍。

主要瀏覽器（Chrome、Edge、Firefox）在 Windows 上複製 HTML 時都會遵守這個規範，所以算是業界通用的做法，但嚴格來說它是 Windows 平台的規範，不是 W3C 或 WHATWG 制定的 HTML 標準。

在 macOS 上複製 HTML 就不會產生這個 tag，因為 macOS 的剪貼簿格式不同。

平台 瀏覽器 是否產生 StartFragment/EndFragment 說明
Windows Chrome / Edge / Firefox ✅ 會 系統層級規範
macOS Chrome ✅ 會 Chrome 自行實作
macOS Safari ❌ 不會 剪貼簿格式不同
Linux Chrome ✅ 會 同 Chrome 實作
Linux Firefox ❓ 不確定 未確認行為

補充：

項目 說明 規範來源 是否為 HTML 標準 用途 會看到它的情境
CF_HTML 剪貼簿 HTML 傳輸格式 微軟 CF_HTML 規範（非 W3C 標準） 否 標示使用者實際選取複製的範圍 從瀏覽器複製 HTML 內容後貼到編輯器
⚠️ **GitHub.com Fallback** ⚠️