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

2019-09-20 14:42:29 阅读：312 来源： 互联网

标签：文本编辑 const 文章 customConfig react state editor editorContent

初心-杨瑞超个人博客诚邀您加入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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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