vue中(input組件)textarea文本提交到后端數據庫，前端輸出保存換行回車及修改顯示

提交前先正則過濾：

　 （此處content為textarea輸入值）

　　var content = this.content.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;'); 

展示的時候用 v-html 渲染就可以：

　（此處content為從后端獲取的值）

　　<p v-html="content"></p> 

 

 

用textarea標簽+v-html命令，有時候只能識別空格，無法識別<br/>, 用富文本編輯器可以解決這個問題（實現類似textarea標簽可修改的效果也能識別<br/>）。

富文本編輯有很多種，用vue的一個插件：vue-quill-editor

在main.js中：
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

 

Vue.use(VueQuillEditor)

在需要用到的組件中：