用于 Vue React

如果是第一次使用，请先通过 快速开始 了解基本使用。

注意

本文只介绍各个框架的组件接入，实际使用时还需要很多配置、API 。
所以，阅读下文代码时，如遇到 工具栏配置 编辑器配置 菜单配置 editor API 等字眼，请继续参考其他文档：

Vue2

Demo

安装

需安装 @wangeditor/editor 和 @wangeditor/editor-for-vue，可参考这里。

使用

模板

  1. <template>
  2.     <div style="border: 1px solid #ccc;">
  3.         <Toolbar
  4.             style="border-bottom: 1px solid #ccc"
  5.             :editor="editor"
  6.             :defaultConfig="toolbarConfig"
  7.             :mode="mode"
  8.         />
  9.         <Editor
  10.             style="height: 500px; overflow-y: hidden;"
  11.             v-model="html"
  12.             :defaultConfig="editorConfig"
  13.             :mode="mode"
  14.             @onCreated="onCreated"
  15.         />
  16.     </div>
  17. </template>

script

  1. <script>
  2. import Vue from 'vue'
  3. import '@wangeditor/editor/dist/css/style.css'
  4. import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  6. export default Vue.extend({
  7.     components: { Editor, Toolbar },
  8.     data() {
  9.         return {
  10.             editor: null,
  11.             html: '<p>hello</p>',
  12.             toolbarConfig: { },
  13.             editorConfig: { placeholder: '请输入内容...' },
  14.             mode: 'default', // or 'simple'
  15.         }
  16.     },
  17.     methods: {
  18.         onCreated(editor) {
  19.             this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
  20.         },
  21.     },
  22.     mounted() {
  23.         // 模拟 ajax 请求，异步渲染编辑器
  24.         setTimeout(() => {
  25.             this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
  26.         }, 1500)
  27.     },
  28.     beforeDestroy() {
  29.         const editor = this.editor
  30.         if (editor == null) return
  31.         editor.destroy() // 组件销毁时，及时销毁编辑器
  32.     }
  33. })
  34. </script>

TIP

  • 赋值 this.editor 时要用 Object.seal()
  • 组件销毁时，要及时销毁编辑器

记得引入 style

  1. <style src="@wangeditor/editor/dist/css/style.css"></style>

配置

可通过 toolbarConfig 和 editorConfig 来修改菜单栏和编辑器的配置，详细文档参考

【注意】，编辑器配置中 onXxx 格式的生命周期函数，必须通过 Vue 事件来传递，不可以放在 editorConfig 中，例如：

  1. <template>
  2.     <div style="border: 1px solid #ccc;">
  3.         <Toolbar ... />
  4.         <Editor
  5.             @onCreated="onCreated"
  6.             @onChange="onChange"
  7.             @onDestroyed="onDestroyed"
  8.             @onMaxLength="onMaxLength"
  9.             @onFocus="onFocus"
  10.             @onBlur="onBlur"
  11.             @customAlert="customAlert"
  12.             @customPaste="customPaste"
  13.         />
  14.     </div>
  15. </template>
  1. methods: {
  2.     onCreated(editor) {
  3.         this.editor = Object.seal(editor)
  4.         console.log('onCreated', editor)
  5.     },
  6.     onChange(editor) { console.log('onChange', editor.children) },
  7.     onDestroyed(editor) { console.log('onDestroyed', editor) },
  8.     onMaxLength(editor) { console.log('onMaxLength', editor) },
  9.     onFocus(editor) { console.log('onFocus', editor) },
  10.     onBlur(editor) { console.log('onBlur', editor) },
  11.     customAlert(info: string, type: string) { window.alert(`customAlert in Vue demo\n${type}:\n${info}`) },
  12.     customPaste(editor, event, callback) {
  13.         console.log('ClipboardEvent 粘贴事件对象', event)
  14.         // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
  15.         // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
  16.         // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
  18.         // 自定义插入内容
  19.         editor.insertText('xxx')
  21.         // 返回 false ，阻止默认粘贴行为
  22.         event.preventDefault()
  23.         callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）
  25.         // 返回 true ，继续默认的粘贴行为
  26.         // callback(true)
  27.     },
  28. }

调用 API

当编辑器渲染完成之后，通过 this.editor 获取 editor 实例，即可调用它的 API 。参考 编辑器 API 。

  1. <template>
  2.     <div>
  3.         <button @click="insertText">insert text</button>
  4.         <div style="border: 1px solid #ccc;">
  5.             <Toolbar .../>
  6.             <Editor .../>
  7.         </div>
  8.     </div>
  9. </template>
  1. methods: {
  2.     insertText() {
  3.         const editor = this.editor // 获取 editor 实例
  4.         if (editor == null) return
  6.         // 调用 editor 属性和 API
  7.         editor.insertText('一段文字')
  8.         console.log(editor.children)
  9.     },
  10. },

Vue3

Demo

安装

需安装 @wangeditor/editor 和 @wangeditor/editor-for-vue@next，可参考这里。

使用

模板

  1. <template>
  2.     <div style="border: 1px solid #ccc">
  3.       <Toolbar
  4.         style="border-bottom: 1px solid #ccc"
  5.         :editor="editorRef"
  6.         :defaultConfig="toolbarConfig"
  7.         :mode="mode"
  8.       />
  9.       <Editor
  10.         style="height: 500px; overflow-y: hidden;"
  11.         v-model="valueHtml"
  12.         :defaultConfig="editorConfig"
  13.         :mode="mode"
  14.         @onCreated="handleCreated"
  15.       />
  16.     </div>
  17. </template>

script

  1. <script>
  2. import '@wangeditor/editor/dist/css/style.css' // 引入 css
  4. import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
  5. import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  7. export default {
  8.   components: { Editor, Toolbar },
  9.   setup() {
  10.     // 编辑器实例，必须用 shallowRef
  11.     const editorRef = shallowRef()
  13.     // 内容 HTML
  14.     const valueHtml = ref('<p>hello</p>')
  16.     // 模拟 ajax 异步获取内容
  17.     onMounted(() => {
  18.         setTimeout(() => {
  19.             valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  20.         }, 1500)
  21.     })
  23.     const toolbarConfig = {}
  24.     const editorConfig = { placeholder: '请输入内容...' }
  26.     // 组件销毁时，也及时销毁编辑器
  27.     onBeforeUnmount(() => {
  28.         const editor = editorRef.value
  29.         if (editor == null) return
  30.         editor.destroy()
  31.     })
  33.     const handleCreated = (editor) => {
  34.       editorRef.value = editor // 记录 editor 实例，重要！
  35.     }
  37.     return {
  38.       editorRef,
  39.       valueHtml,
  40.       mode: 'default', // 或 'simple'
  41.       toolbarConfig,
  42.       editorConfig,
  43.       handleCreated
  44.     };
  45.   }
  46. }
  47. </script>

TIP

  • editorRef 必须用 shallowRef
  • 组件销毁时，要及时销毁编辑器

配置

可通过 toolbarConfig 和 editorConfig 来修改菜单栏和编辑器的配置，详细文档参考

【注意】，编辑器配置中 onXxx 格式的生命周期函数，必须通过 Vue 事件来传递，不可以放在 editorConfig 中，例如：

  1. <template>
  2.     <div style="border: 1px solid #ccc">
  3.       <Toolbar ... />
  4.       <Editor
  5.         @onCreated="handleCreated"
  6.         @onChange="handleChange"
  7.         @onDestroyed="handleDestroyed"
  8.         @onFocus="handleFocus"
  9.         @onBlur="handleBlur"
  10.         @customAlert="customAlert"
  11.         @customPaste="customPaste"
  12.       />
  13.     </div>
  14. </template>
  1. const handleCreated = (editor) => {
  2.     editorRef.value = editor
  3.     console.log('created', editor)
  4. }
  5. const handleChange = (editor) => { console.log('change:', editor.children) }
  6. const handleDestroyed = (editor) => { console.log('destroyed', editor) }
  7. const handleFocus = (editor) => { console.log('focus', editor) }
  8. const handleBlur = (editor) => { console.log('blur', editor) }
  9. const customAlert = (info, type) => { alert(`【自定义提示】${type} - ${info}`) }
  10. const customPaste = (editor, event, callback) => {
  11.     console.log('ClipboardEvent 粘贴事件对象', event)
  12.     // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
  13.     // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
  14.     // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
  16.     // 自定义插入内容
  17.     editor.insertText('xxx')
  19.     // 返回 false ，阻止默认粘贴行为
  20.     event.preventDefault()
  21.     callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）
  23.     // 返回 true ，继续默认的粘贴行为
  24.     // callback(true)
  25. }
  27. return {
  28.     // 省略其他 ...
  30.     handleCreated,
  31.     handleChange,
  32.     handleDestroyed,
  33.     handleFocus,
  34.     handleBlur,
  35.     customAlert,
  36.     customPaste
  37. }

调用 API

当编辑器渲染完成之后，通过 editorRef.value 获取 editor 实例，即可调用它的 API 。参考 编辑器 API 。

  1. <template>
  2.     <div>
  3.         <button @click="insertText">insert text</button>
  4.         <div style="border: 1px solid #ccc">
  5.             <Toolbar ... />
  6.             <Editor ... />
  7.         </div>
  8.     </div>
  9. </template>
  1. const insertText = () => {
  2.     const editor = editorRef.value // 获取 editor ，必须等待它渲染完之后
  3.     if (editor == null) return
  5.     editor.insertText('hello world') // 执行 editor API
  6. }
  8. return {
  9.     // 省略其他 ...
  11.     insertText
  12. }

React

Demo

安装

需安装 @wangeditor/editor 和 @wangeditor/editor-for-react，可参考这里。

使用

示例源码用于 Vue React - 图7open in new window

  1. import '@wangeditor/editor/dist/css/style.css' // 引入 css
  3. import React, { useState, useEffect } from 'react'
  4. import { Editor, Toolbar } from '@wangeditor/editor-for-react'
  5. import { IDomEditor, IEditorConfig } from '@wangeditor/editor'
  7. function MyEditor() {
  8.     const [editor, setEditor] = useState<IDomEditor | null>(null) // 存储 editor 实例
  9.     const [html, setHtml] = useState('<p>hello</p>') // 编辑器内容
  11.     // 模拟 ajax 请求，异步设置 html
  12.     useEffect(() => {
  13.         setTimeout(() => {
  14.             setHtml('<p>hello&nbsp;world</p>')
  15.         }, 1500)
  16.     }, [])
  18.     const toolbarConfig = { }
  19.     const editorConfig: Partial<IEditorConfig> = {
  20.         placeholder: '请输入内容...',
  21.     }
  23.     // 及时销毁 editor ，重要！
  24.     useEffect(() => {
  25.         return () => {
  26.             if (editor == null) return
  27.             editor.destroy()
  28.             setEditor(null)
  29.         }
  30.     }, [editor])
  32.     return (
  33.         <>
  34.             <div style={{ border: '1px solid #ccc', zIndex: 100}}>
  35.                 <Toolbar
  36.                     editor={editor}
  37.                     defaultConfig={toolbarConfig}
  38.                     mode="default"
  39.                     style={{ borderBottom: '1px solid #ccc' }}
  40.                 />
  41.                 <Editor
  42.                     defaultConfig={editorConfig}
  43.                     value={html}
  44.                     onCreated={setEditor}
  45.                     onChange={editor => setHtml(editor.getHtml())}
  46.                     mode="default"
  47.                     style={{ height: '500px', 'overflow-y': 'hidden' }}
  48.                 />
  49.             </div>
  50.             <div style={{ marginTop: '15px' }}>
  51.                 {html}
  52.             </div>
  53.         </>
  54.     )
  55. }
  57. export default MyEditor

配置

可通过 toolbarConfig 和 editorConfig 来修改菜单栏和编辑器的配置，详细文档参考

调用 API

当编辑器渲染完成之后，即可调用它的 API 。参考 编辑器 API 。

  1. function insertText() {
  2.     if (editor == null) return
  3.     editor.insertText('hello')
  4. }
  6. return (
  7.     <>
  8.         <button onClick={insertText}>insert text</button>
  9.         <div style={{ border: '1px solid #ccc', zIndex: 100}}>
  10.             <Toolbar ... />
  11.             <Editor ... />
  12.         </div>
  13.     </>
  14. )