wangEditor V5 精简完整参考手册

官网：www.wangeditor.com/v5/ 【V5 已经停止新增功能，仅可继续使用 】底层基于 Slate，分为 编辑器实例 + 工具栏实例 两个独立对象

一、快速接入（原生JS）

1. 安装

sql 复制代码

npm install @wangeditor/editor --save

2. 最简Demo

xml 复制代码

<div id="toolbar-container"></div>
<div id="editor-container"></div>

<script type="module">
import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar } from '@wangeditor/editor'

const editor = createEditor({
  selector: '#editor-container',
  html: '<p>初始内容</p>',
  config: {
    placeholder: '请输入内容...',
    onChange(editor) {
      console.log('html:', editor.getHtml())
      console.log('json:', editor.children)
    }
  }
})

const toolbar = createToolbar({
  editor,
  selector: '#toolbar-container',
  config: {
    // 工具栏菜单配置
  }
})
</script>

二、editor 配置（createEditor 的 config）

javascript 复制代码

editorConfig = {
  placeholder: '请输入',
  readOnly: false, // 只读
  autoFocus: true, // 自动聚焦
  maxLength: null, // 最大字符数
  // 生命周期
  onCreated(editor) {},    // 创建完成
  onChange(editor) {},     // 内容/选区变化
  onDestroyed(editor) {},  // 销毁
  onBlur(editor) {},
  onFocus(editor) {},

  // 粘贴
  pasteFilterStyle: true, // 过滤粘贴样式
  pasteIgnoreImg: false,  // 忽略粘贴图片

  // 图片上传
  MENU_CONF: {
    uploadImage: {
      server: '/api/upload',
      fieldName: 'file',
      maxFileSize: 2 * 1024 * 1024,
      allowedFileTypes: ['image/*'],
      // 自定义上传
      customUpload(file, insertFn) {
        // 上传成功后 insertFn(url, alt, href)
      }
    },
    // 视频上传 uploadVideo 同理
  },

  // 自定义菜单、hoverbar、弹窗
  hoverbarKeys: {},
  EXTEND_CONF: {}
}

arduino 复制代码

toolbarConfig = {
  toolbarKeys: [
    // 全部菜单 key
    'bold', 'underline', 'italic', 'strikeThrough',
    'color', 'bgColor', 'fontSize', 'fontFamily',
    'headerSelect', 'blockquote', 'codeBlock',
    'link', 'insertImage', 'insertVideo', 'insertTable',
    'divider', 'undo', 'redo', 'fullScreen', 'code',
  ],
  excludeKeys: [], // 排除不需要的菜单
  modalAppendToBody: true, // 弹窗挂载body
}

菜单key清单

文本样式：bold、italic、underline、strikeThrough、color、bgColor、fontSize、fontFamily

块级：headerSelect、header1、header2、blockquote、codeBlock、divider

插入：link、insertImage、insertVideo、insertTable

列表：bulletedList、numberedList

对齐：justifyLeft、justifyCenter、justifyRight、justifyJustify

其他：undo、redo、fullScreen、print、code

四、editor 实例 API（核心）

scss 复制代码

// -------- 内容读写 --------
editor.getHtml()                // 获取HTML字符串（存数据库用）
editor.getHtml({ format: true })
editor.getJson()                // 获取JSON结构（等价editor.children）
editor.getText()                // 获取纯文本
editor.setHtml('<p>xxx</p>')    // 设置HTML
editor.setContent([...json])    // 设置JSON内容

// -------- 选区 & 光标 --------
editor.focus()                  // 聚焦；focus(true) 光标跳到末尾
editor.blur()
editor.isFocused()              // true/false
editor.getSelection()           // 获取选区
editor.restoreSelection()
editor.saveSelection()

// -------- 插入内容 --------
editor.insertText('文字')
editor.insertHtml('<p>xxx</p>')
editor.insertNode({ type: 'paragraph', children: [{text: 'xxx'}] })

// -------- 禁用/只读 --------
editor.enable()
editor.disable()
editor.isDisabled()

// -------- 全屏 --------
editor.isFullScreen
editor.toggleFullScreen()

// -------- 销毁 --------
editor.destroy()

// -------- 上传进度 --------
editor.showProgressBar(0~100)
editor.hideProgressBar()

// -------- 滚动 --------
editor.scrollToElem(elemId)

⚠️ updateView() 内部API，不建议频繁调用

五、内容节点结构（JSON）

wangEditor 是 slate 节点树，不要自己随便拼HTML ，优先用 editor.getHtml() 保存：

yaml 复制代码

[
  {
    type: 'paragraph',
    children: [
      { text: '普通文字', bold: true, color: '#f00' }
    ]
  }
]

常用 type：paragraph、header1/header2...、blockquote、codeBlock、table、image、video、link

六、图片/视频上传（高频）

vbnet 复制代码

MENU_CONF: {
  uploadImage: {
    server: '/api/upload',
    // 后端返回格式必须：{ "errno":0, "data": { "url": "xxx" } }
    // 自定义上传（axios/fetch）
    customUpload: async (file, insertFn) => {
      const fd = new FormData()
      fd.append('file', file)
      const res = await fetch('/api/upload', {method:'POST', body:fd})
      const json = await res.json()
      insertFn(json.url, '图片alt', json.url)
    }
  }
}

七、Vue3 / React 官方组件

Vue3