使用富文本编辑器TinyMCE+react踩坑

####使用富文本编辑器TinyMCE+react踩坑

    <Editor
        inline={false}
        initialValue={newsStore.content}
        onChange = {(value) => {
            /*this.props.newsStore.setEditFieldContents(value.level.content)*/
            console.log('value.target.value',value.target.getContent())
            this.props.newsStore.setEditFieldContents(value.target.getContent())
        }}
        key={newsStore.editFields.id}    
        init={{
            height: '400px',
            language: 'zh_CN',
            plugins: 'table lists link image',
            toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link image | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent',
            relative_urls: false,
            content_css: [
                '/codepen.min.css'
            ],
            file_picker_types: 'image',
            images_upload_url: `${process.env.REACT_APP_API_URL}/upload`,
            images_upload_handler: newsStore.uploadImage
        }}
    />

**inline={false} ：** false：经典编辑模式；true:行内编辑模式

**initialValue={newsStore.content} ：** 编辑器内容
    
    1. 这里我在store里面增加了一个变量content，弹出窗口时将editFields.content赋值给content,保存窗口时将content赋值给editFields.content
    2. 虽然看似麻烦了一步，但是可以避免浏览器报错！
    
 **onChange事件 ：**  编辑框内容发生改变时，store里的setEditFieldContents方法将当前的content赋值给this.content

    1.  value.target.getContent()， value.level.content 都可以将编辑器内容读取出来
    2.  其实编辑器里的内容都是用p便签包起来的
    

**key={newsStore.editFields.id} :**     key的作用：
    
    1. 如果有多个富文本编辑器，作为标识
    2. 如果没有key,浏览器会报一个关于length的错，虽然最后都能保存
    3. 刚开始将key设置为当前时间，以为这个是唯一的就可以了，结果在编辑框输入内容时非常的卡顿，甚至不能输入，且光标不能准确定位，
       换行都不行，可能是因为以时间为key会变化，然后不停的刷新的原因吧
    
**富文本编辑器的保存**
    
    1. 先前说到，富文本编辑器的内容其实是用一个p标签包起来的,如果什么都没有输入，实际上是<p><br data-mce-bogus="1"></p>，
       如果输入了内容又删除了，可能为''，如果仅仅是输入一些空格，没有文字，会包含特殊字符&nbsp;
    2. 所以数据必须要经过处理，去除标签<XXX>，去除特殊字符&XXX；可以在前台处理，也可以在后台