当前位置：首页 > news >正文

在react中使用wangeditor富文本

news 2025/7/29 3:07:41

官方文档

wangeditor5在线文档

依赖安装（react框架）

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-for-react
# 或者 npm install @wangeditor/editor-for-react --save
在React 中使用wangEditor
~ 如果要自己动手开发，可参考 wangEditor-with-react 。
~ 如果想要用现成的插件，可参考 wangeditor-for-react 。
~ 用于Vue 和React可能会需要销毁编辑器，可参考销毁编辑器。

页面的引用

import E from 'wangeditor'
import '@wangeditor/editor/dist/css/style.css' // 引入 cssconst editor = new E("节点标签")  //绑定节点
editor.create()  //富文本被创建后，文本是默认居中显示的。而 wangeditor 也没有文本对齐相关的配置项，所以要改变初始文本的显示位置只有通过 css 样式改变同时存在多个编辑器(每个编辑器设置自己的节点标签并创建，互不干扰)
const editor1 = new E("第一个节点标签")
editor1.create()
const editor2 = new E("第二个节点标签")
editor2.create()

配置项

自定义菜单

editor.config.menus = [  //自定义菜单栏显示的菜单及顺序'head',  // 标题'bold',  // 粗体'fontSize',  //字号'fontName',  //字体'italic',  // 斜体'underline',  //下划线'strikeThrough',  //删除线'indent',  //缩进'lineHeight',  //行高'foreColor',  //文字颜色'backColor',  //文字背景颜色'link',  //链接，插入一个链接地址，如果填写了描述，则高亮显示描述。若没有，则高亮显示链接'list',  // 序列（有序列表、无序列表）'todo',  //待办事项'justify',  // 对齐方式'quote',  //引用'emoticon',  //表情'image',  //插入图片'video',  //插入视频'table',  //表格'code',  //代码'splitLine',  //分割线'undo',  //撤销'redo' //恢复
]  editor.config.excludeMenus = ['emoticon', 'video']  //自定义剔除不需要的菜单功能

配置颜色（自定义菜单栏中文字颜色、背景颜色的可用颜色）

editor.config.colors = ['#000', '#eee']

配置可用字号

editor.config.fontSizes = {'x-small': { name: '10px', value: '1' } //此外还有 'small', 'normal', 'large', 'x-large', 'xx-large', 'xxx-large'
}

粘贴过滤(不适用于 IE11)

// 关闭粘贴样式的过滤（编辑器会默认过滤掉粘贴文本的样式）
editor.config.pasteFilterStyle = false// 忽略粘贴内容中的图片
editor.config.pasteIgnoreImg = true// 自定义处理粘贴的文本内容（调用此方法，没有return的话粘贴的内容会被阻止）
editor.config.pasteTextHandle = function(pasteStr) {}  //pasteStr 表示粘贴的文本内容

常用方法

// onchange
editor.config.onchange = function(newHtml) {}  //newHtml 是编辑框内容发生改变后得到的最新的 htmleditor.config.onchangeTimeout = 500  //配置触发 onchange 的时间频率，默认为 200ms// onSelectionChange：用户选区操作（鼠标选中文字，ctrl+a全选等）会自动触发
editor.config.onSelectionChange = function(newSelection) {}  //newSelection 是一个对象，包含 text（当前选择文本）、html（当前选中的 html）、selection（原生 selection 对象）// onfocus 和 onblur：聚焦和失焦时自动触发，获得的参数都是最新的 html 内容
editor.config.onfocus = function(newHtml) {}
editor.config.onblur = function(newHtml) {}// 图片上传
editor.config.uploadImgServer = '/upload' // 配置服务端接口（服务端接口需返回 application/json 格式）
// 限制图片大小和类型
editor.config.uploadImgMaxSize = 2 * 1024 * 1024  //默认限制为 5M
editor.config.uploadImgAccept = ['jpg', 'jpeg']  //默认限制为 ['jpg', 'jpeg', 'png', 'gif', 'bmp']，设置为空数组时表示不限制
// 限制一次最多上传几张图片
editor.config.uploadImgMaxLength = 5

代码展示

函数组件写法

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import React, { useState, useEffect } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'function MyEditor({defaultHtml,updateHtml}) {const [editor, setEditor] = useState(null) // 存储 editor 实例const [html, setHtml] = useState(defaultHtml) // 编辑器内容useEffect(() => {updateHtml(html)}, [html])const toolbarConfig = {}const editorConfig = {placeholder: '请输入内容...',}// 及时销毁 editor ，重要！useEffect(() => {return () => {if (editor == null) returneditor.destroy()setEditor(null)}}, [editor])return (<><div style={{ border: '1px solid #ccc', zIndex: 100,height:'350px',padding:'1vh 0', }}><Toolbareditor={editor}defaultConfig={toolbarConfig}mode="default"style={{ borderBottom: '1px solid #ccc' }}/><EditordefaultConfig={editorConfig}value={html}onCreated={setEditor}onChange={editor => setHtml(editor.getHtml())}mode="default"style={{ height: '50%', 'overflow-y': 'hidden' }}/></div></>)
}export default MyEditor;

类组件写法

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { React } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'let editor = null
class MyEditor extends React.PureComponent {contructor(props){super(props)this.state={editorContent: '',deitorDom: null,editorConfig: {placeholder: '请输入内容...',}}}componentDidMount(){editor.config.menus = [  //自定义菜单栏显示的菜单及顺序'head',  // 标题'bold',  // 粗体'fontSize',  //字号'fontName',  //字体'italic',  // 斜体'underline',  //下划线'strikeThrough',  //删除线'indent',  //缩进'lineHeight',  //行高'foreColor',  //文字颜色'backColor',  //文字背景颜色'link',  //链接，插入一个链接地址，如果填写了描述，则高亮显示描述。若没有，则高亮显示链接'list',  // 序列（有序列表、无序列表）'todo',  //待办事项'justify',  // 对齐方式'quote',  //引用'emoticon',  //表情'image',  //插入图片'video',  //插入视频'table',  //表格'code',  //代码'splitLine',  //分割线'undo',  //撤销'redo' //恢复]editor.config.onChange = (html) => {this.setState({editorContent: html})}editor.config.onChange = (html) => {this.setState({editorContent: html})}}return (<><div style={{ border: '1px solid #ccc', zIndex: 100,height:'350px',padding:'1vh 0', }}><Toolbareditor={editor}defaultConfig={toolbarConfig}mode="default"style={{ borderBottom: '1px solid #ccc' }}/><EditordefaultConfig={this.state.editorConfig}value={this.state.html}onCreated={setEditor}mode="default"style={{ height: '50%', 'overflow-y': 'hidden' }}/></div></>)
}export default MyEditor;