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