react中使用富文本编辑器，发布文章

初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828

富文本编辑器，在开发中是常用的，下面直接进入正题了：

1、安装wangEditor：

npm install wangeditor -D

2、贴代码了：

import React, { Component } from 'react'
import LEdit from 'wangeditor'

export default class Child extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editorContent:''
         };
         this.textAreaValue=this.textAreaValue.bind(this);
    }
    componentDidMount() {
        const elemMenu = this.refs.editorElemMenu;
        const elemBody = this.refs.editorElemBody;
        const editor = new LEdit(elemMenu, elemBody)
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        editor.customConfig.onchange = html => {
            // console.log(editor.txt.html())
            this.setState({
                // editorContent: editor.txt.text()
                editorContent: editor.txt.html()
            })
        }
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
            'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ]
        editor.customConfig.uploadImgShowBase64 = true
        editor.create()
    };
    textAreaValue () {
        console.log('编辑器data：', this.state.editorContent)
    }
    render() {
        return (
            <div className="shop">
                <div className="text-area" >
                    <div ref="editorElemMenu"
                         style={{backgroundColor:'#f1f1f1',border:"1px solid #ccc"}}
                         className="editorElem-menu">
                    </div>
                    <div
                        style={{
                            padding:"0 10px",
                            overflowY:"scroll",
                            height:300,
                            border:"1px solid #ccc",
                            borderTop:"none"
                        }}
                        ref="editorElemBody" className="editorElem-body">

                    </div>
                </div>
                <div onClick={this.textAreaValue}>点击我获取值啊</div>
            </div>
        )
    }
}

示例图片：

注意：
1、此处需要十分注意的是 editor.customConfig.menus 这个属性设置，这个属性是配置你的富文本编辑器所需要的功能的，如果不配置的话，那么界面就不会有上面的加粗斜体上传图片之类的功能条了，当然，如果你不需要这么多功能的话，也可以注释掉一部分。
2、editor.customConfig.uploadImgShowBase64 = true 这个属性是配置当前是否需要设置上传图片在前端转换成base64的，如果你当前对接的模式是需要先上传图片到自己的服务器上的话，那么请查看官方文档：http://www.wangeditor.com/

文章到此结束，喜欢记得点个赞噢~

标签：文本编辑,const,文章,customConfig,react,state,editor,editorContent
来源： https://blog.csdn.net/qq_42817227/article/details/101059475