在react项目中，富文本编辑器的使用

react 编辑器的选择

说到富文本编辑器那可是一箩筐，数不胜数。国内比较知名的百度编辑器首当其冲。外国吗？Simditor很比错，功能精简、加载速度快速，但是没有react版的，要想使用就手动封装吧。对于react的富文本编辑器还没一个定论，我是说还没有一个纯react封装的富文本编辑器被大家广为使用，也许是坑太大了，没人能很好的填上。

使用react-umeditor富文本编辑器

Install

npm install react-umeditor --save

Use

javascript

import React from 'react'
import ReactDOM from 'react-dom'
import Editor from 'react-umeditor'

class App extends  {
    constructor(props){
        super(props);
        this.state = {
            content: ""
        }
    }
    handleChange(content){
        this.setState({
            content: content
        })
    }
    getIcons(){
        var icons = [
            "source | undo redo | bold italic underline strikethrough fontborder emphasis | ",
            "paragraph fontfamily fontsize | superscript subscript | ",
            "forecolor backcolor | removeformat | insertorderedlist insertunorderedlist | selectall | ",
            "cleardoc  | indent outdent | justifyleft justifycenter justifyright | touppercase tolowercase | ",
            "horizontal date time  | image emotion spechars | inserttable"
        ]
        return icons;
    }
    getQiniuUploader(){
        return {
            
            type:'qiniu',
            name:"file",
            request: "image_src",
            qiniu:{
                app:{
                    Bucket:"liuhong1happy",
                    AK:"l9vEBNTqrz7H03S-SC0qxNWmf0K8amqP6MeYHNni",
                    SK:"eizTTxuA0Kq1YSe2SRdOexJ-tjwGpRnzztsSrLKj"
                },
                
                genKey:function(options){
                    return options.file.type +"-"+ options.file.size +"-"+ options.file.lastModifiedDate.valueOf() +"-"+ new Date().valueOf()+"-"+options.file.name;
                }
            }
        }
    }
    render(){
        var icons = this.getIcons();
        var uploader = this.getQiniuUploader();
        var plugins = {
            image:{
                uploader:uploader
            }
        }
        var count = 100;
        var editors = [];
        for(var i=0;i<count;i++){
            editors.push({
                icons:icons,
                plugins:plugins
            })
        }
        return (<Editor ref="editor"
                                icons={icons}
                                value={this.state.content}
                                defaultValue="<p>提示文本</p>"
                                onChange={this.handleChange.bind(this)}
                                plugins={plugins} />)
    }
}

html

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- 引入富文本编辑器的样式 -->
    <link rel="stylesheet" href="../../dist/third-part/mathquill/mathquill.css"/>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <!-- 引入富文本编辑器的样式 -->
</head>
<body>
    <div id="root"></div>
    <!-- 引入富文本编辑器的js -->
    <script src="../../dist/third-part/jquery.min.js"></script>
    <script src="../../dist/third-part/mathquill/mathquill.js"></script>
    <!-- 引入富文本编辑器的js -->
    <script src='assets/dist/js/lib.js'></script>
    <script src='assets/dist/js/index.js'></script>
</body>
</html>

images(图标icons)

需要把images和third-part文件夹放到项目里

package.json(配置)

"copy": "cp -R images/. dist/images && cp -R less/. dist/less && cp -R third-part/. dist/third-part",

最终效果

富文本编辑器.jpeg

小结

期间对多个富文本编辑器在项目调试，最终选择了liuhong的react-umeditor，在组件使用过程中出现了很多问题。像图标引入不到项目里、需要修改配置等问题，最后都一一解决了。最后提示自己只看没用，一定要多实践，实践出真理，实践出真理，实践出真理，重要的事情说三遍。