wangeditor react中使用

一.基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

使用原因 wangeditor的文档 （地址：http://www.wangeditor.com/）

1.轻量：相对于百度富文本，体积真心小，

2.简洁：我的理解，功能刚刚够用。使用wangeditor的项目，要对富文本的功能要求简单。

安装 npm 命令安装 npm install wangeditor （注意 wangeditor 全部是小写字母）

二,wangeditor的使用 

在不同环境中使用，写法有点不同，但是文档都有介绍 。https://www.kancloud.cn/wangfupeng/wangeditor3/335770

以下是本人在react中使用

    render(){
        return(
            <div className="shop">
                <div className="text-area" >
                    <div ref="editorElemMenu" style={{backgroundColor:'#f1f1f1',border:"1px solid #ccc"}} className="editorElem-menu"></div>
                    <div ref="editorElemBody" style={{padding:"0 10px",height:500,border:"1px solid #ccc",borderTop:"none"}} className="editorElem-body"></div>
                </div>
                <Button onClick={this.editorupdata.bind(this)}>提交添加</Button>
            </div>
        )
    }


    componentDidMount() {
        const editorinfo = this.props.editorinfo;
        const elemMenu = this.refs.editorElemMenu;
        const elemBody = this.refs.editorElemBody;
        const editor = new E(elemMenu,elemBody)
        //拿到页面首次图片
        this.firstimg();   
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        editor.customConfig.onchange = html => {
            this.setState({
                editorContent: editor.txt.html(),
            })
            this.selectdiffent()
        }
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'image',  // 插入图片
            'table',  // 表格
            'undo',  // 撤销
            'redo'  // 重复
        ]
        //使用Base64
        // editor.customConfig.uploadImgShowBase64 = true
        editor.create()
    };

图片上传自定义（本人使用的axios请求）

editor.customConfig.customUploadImg = function (files, insert) {
            // files 是 input 中选中的文件列表insert 是获取图片 url 后，插入到编辑器的方法
            let file;
            if (files && files.length) {
                file = files[0];
            } else {
                return
            }
            // 图片上传
            const formData = new FormData();
            formData.append('file', file);
            formData.append('Banners',{id:editorinfo.id,naviChildId:editorinfo.naviChildId})
            axios.post('main/banners/addPhoto',formData,'ADMINUSER').then(res =>{
                console.log(res)
               
            })
            
            //console.log(file,editorinfo)
            //上传成功之后把图片插入到也买你中
            //insert(imgUrl)
}

说一下自己遇到的问题

1.富文本内容回显

<p dangerouslySetInnerHTML={{__html: this.props.editorinfo.titleRemark}}></p>

2.富文本图片删除

理论，每当富文本内容变化，对比出来图片是否有减少，如果有就做删除处理

    //进入页面查询页面上的所有图片
    firstimg = ()=>{
        const diffent = []
        var imgList = document.getElementsByTagName('img');
        for(var i =0;i<imgList.length;i++){
            diffent.push(imgList[i].namespaceURI)
        }
        this.setState({
            imgList:diffent
        })
    }
    // 查不同
    selectdiffent = ()=>{
        //获取页面最新图片
        const newimg = []
        var imgList = document.getElementsByTagName('img');
        for(var i =0;i<imgList.length;i++){
            newimg.push(imgList[i].src)
        }
        // 跟页面上的老图片对比
        var oldimg =  this.state.imgList
        var result =[];
        if(newimg.length < oldimg.length){
            var c=newimg.toString();
            for(var j=0;j<oldimg.length;j++){
                if(c.indexOf(oldimg[j].toString())===-1){
                    result.push(oldimg[j]);
                }      
            }
            axios.delete('后端地址').then(res =>{
                if(res.code === 0){
                     message.success('图片已删除')
                }
            })
        }
        //更新页面图片
        this.setState({
            imgList:newimg
        })
    }

3.富文本样式出现混乱

原因是css控制出现问题 input的class的block