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>
⚠️ **GitHub.com Fallback** ⚠️