初识react（15）—— 在 react 中如何使用 wangEditor 富文本编辑器

迷南。 2022-12-01 09:57 417阅读 0赞

#####   之前写项目时用到过 wangEditor 和 markdown ，只是当时忘了总结。以至于现在需要用 wangEditor 了还得翻以前的项目，只是以前用的不是react，需要更改代码。废话不多说，下面总结一下 在 react 中如何使用 wangEditor 富文本编辑器。 #####

##### 1、安装 wangEditor #####

npm install wangeditor

##### 2、引入 wangEditor #####

import E from 'wangeditor'

##### 3、使用 wangEditor #####

#####   这个可以看看 wangEditor 官网，根据自己需要修改。下面放一下我的代码： #####

constructor(props, context) { 
            super(props, context);
            this.state = { 
                editorHtmlContent: '',
                editorTextContent: ''
            }
        }
    
        componentDidMount() { 
            const div1 = this.refs.div1;
            const div2 = this.refs.div2;
            const editor = new E(div1, div2);
    
            // 监听内容的变化，实时更新到 state 中
            editor.customConfig.onchange = html => { 
                // console.log(editor.txt.html());
                // console.log(editor.txt.text());
                this.setState({ 
                    editorTextContent: editor.txt.text(),
                    editorHtmlContent: 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.debug = true;  //开启debug模式
            editor.customConfig.uploadFileName = 'file';   //自定义 fileName
            editor.customConfig.uploadImgServer = '/api/imageUpload'; // 上传图片到服务器
            editor.customConfig.uploadImgHooks = { 
    
                before : function(xhr, editor, files) { 
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                    // 图片上传之前触发
                },
                success : function(xhr, editor, result) { 
                    // 图片上传并返回结果，图片插入成功之后触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                fail : function(xhr, editor, result) { 
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                    // 图片上传并返回结果，但图片插入错误时触发
                    alert("上传成功，插入失败");
                },
                error : function(xhr, editor) { 
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                    // 图片上传出错时触发
                    alert("上传失败，请重试");
                },
                timeout : function(xhr, editor) { 
                    alert("上传超时！");
                },
                customInsert: function (insertImg, result, editor) { 
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    var data =result.relativePath;
                    // alert(data);
                    if(result.result_msg=="图片上传成功") { 
                        message.success(result.result_msg);
                        insertImg(`api/` + data);  //这里的 api 是我为了跨域
                    }
                }
            };
    
            editor.create()
        }