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)

在需要用到的组件中：