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)

在需要用到的组件中:

vue中(input组件)textarea文本提交到后端数据库,前端输出保存换行回车及修改显示

 

vue中(input组件)textarea文本提交到后端数据库,前端输出保存换行回车及修改显示

上一篇:手把手教你实现Android编译期注解


下一篇:Oracle中的LOB数据类型分类