vue-quill-editor的富文本编辑器提交内容时会清除空格以及html保留显示空格的解决方式
1、问题:在富文本编辑器里写完内容提交后,会把文章中的空格默认清空,导致打不打空格,换不换行一个样解决方式:第一次引用模板的时候,在 quill-editor 标签中添加:class="ql-editor"代码如下:<template><div class="quill-editor"><quill-editor class="ql-editor" ref="quil
·
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的样式文件,不然没有效果
更多推荐
已为社区贡献2条内容
所有评论(0)