使用富文本编辑器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；可以在前台处理，也可以在后台

转载于:https://www.cnblogs.com/helloClock/p/9488623.html