使用富文本编辑器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;可以在前台处理,也可以在后台
posted @ 2018-08-16 17:27  hello_yi  阅读(3755)  评论(0编辑  收藏  举报