在react中使用wangeditor富文本

最新推荐文章于 2024-09-13 21:52:29 发布

outstanding木槿

最新推荐文章于 2024-09-13 21:52:29 发布

阅读量935

点赞数 7

分类专栏： react+antd组件文章标签： react.js 前端

本文链接：https://blog.csdn.net/qq_47305413/article/details/140694018

版权

react+antd组件专栏收录该内容

31 篇文章 0 订阅

订阅专栏

官方文档

wangeditor5在线文档

依赖安装（react框架）

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn 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' // 引入 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;