官方文档
wangeditor5在线文档
依赖安装（react框架）
在React 中使用wangEditoryarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save yarn add @wangeditor/editor-for-react # 或者 npm install @wangeditor/editor-for-react --save
~ 如果要自己动手开发，可参考 wangEditor-with-react 。
~ 如果想要用现成的插件，可参考 wangeditor-for-react 。
~ 用于Vue 和React可能会需要销毁编辑器，可参考销毁编辑器。
页面的引用
import E from 'wangeditor' import '@wangeditor/editor/dist/css/style.css' // 引入 css const 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 是编辑框内容发生改变后得到的最新的 html editor.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) return editor.destroy() setEditor(null) } }, [editor]) return ( <> <div style={{ border: '1px solid #ccc', zIndex: 100,height:'350px',padding:'1vh 0', }}> <Toolbar editor={editor} defaultConfig={toolbarConfig} mode="default" style={{ borderBottom: '1px solid #ccc' }} /> <Editor defaultConfig={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', }}> <Toolbar editor={editor} defaultConfig={toolbarConfig} mode="default" style={{ borderBottom: '1px solid #ccc' }} /> <Editor defaultConfig={this.state.editorConfig} value={this.state.html} onCreated={setEditor} mode="default" style={{ height: '50%', 'overflow-y': 'hidden' }} /> </div> </> ) } export default MyEditor;
wangEditor使用踩坑记录
http://t.csdnimg.cn/L3LpV
