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