vue-quill-editor的富文本编辑器提交内容时会清除空格以及html保留显示空格的解决方式

1、问题:在富文本编辑器里写完内容提交后,会把文章中的空格默认清空,导致打不打空格,换不换行一个样

解决方式:
第一次引用模板的时候,在 quill-editor 标签中添加:class="ql-editor"

<template>
  <div class="quill-editor">
    <quill-editor class="ql-editor"/>
  </div>
</template>

2、问题:将富文本编辑器里写的内容(字符串),从数据库中取出后,在普通div中显示,空格会被默认清除

解决方式:
给要显示内容的标签中,添加样式:style="white-space:pre-wrap;"(保留空格的同时,会换行)

<!-- v-html 会解析内容中的html相关标签 -->
<div  style="white-space:pre-wrap;" v-html="data.quillContent"></div>

white-space的属性取值:

换行符空格和制表符文字换行行尾空格
normal(默认)合并合并换行删除
nowrap合并合并不换行删除
pre保留保留不换行保留
pre-wrap保留保留换行挂起
pre-line保留合并换行删除
break-spaces保留保留换行换行

注意:vue-quill-editor编辑样式的时候,是通过加入类名来实现的,当页面获取数据时,确保该页面引入了vue-quill-editor的样式文件,不然没有效果

  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值