vue-quill-editor的富文本编辑器提交内容时会清除空格以及html保留显示空格的解决方式
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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的样式文件,不然没有效果
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)