首页 > 数据库技术 > 详细

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

时间:2021-09-02 02:55:28      阅读:24      评论:0      收藏:0      [点我收藏+]

提交前先正则过滤:

  (此处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文本提交到后端数据库,前端输出保存换行回车及修改显示

原文:https://www.cnblogs.com/qianduan-lucky/p/15213254.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!