提交前先正则过滤:
(此处content为textarea输入值)
var content = this.content.replace(/\r\n/g, ‘<br/>‘).replace(/\n/g, ‘<br/>‘).replace(/\s/g, ‘ ‘);
展示的时候用 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)
在需要用到的组件中: