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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐