首页 > 其他分享 >富文本插件quill生成内容后,字体样式未生效

富文本插件quill生成内容后,字体样式未生效

时间:2022-10-10 11:35:30浏览次数:49  
标签:居中 插件 样式 html 文本 class quill

后台返回的富文本显示的时候字体大小无变化 或 不居中 使用uniapp或者vue都可以使用一下方式解决

场景描述:

1、在富文本编辑器内,对文字进行了排版,以下为文字居中样式

富文本插件quill生成内容后,字体样式未生效_css

2、在页面里使用v-html渲染富文本代码时,出现ql-align-center的class名,但是居中并未生效

富文本插件quill生成内容后,字体样式未生效_富文本_02

解决办法:

1、在需要显示富文本样式的项目中,安装quill:npm i quill;

2、页面里引入样式css文件:import "quill/dist/quill.core.css";

3、使用v-html的标签上加入class类名:class="ql-editor";

富文本插件quill生成内容后,字体样式未生效_html_03

最终效果 :完美居中

富文本插件quill生成内容后,字体样式未生效_富文本_04

标签:居中,插件,样式,html,文本,class,quill
From: https://blog.51cto.com/u_15430445/5742970

相关文章

  • IDEA的Docker插件实战(Docker Image)
    欢迎访问我的GitHub这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos本文是《IDEA的Docker插件实战》系列的第二篇,IDEA的Docker插件......
  • GoLand 和 Pycharm的 快捷键设置与常用插件
    GoLand插件Gopher美化进度条,让等待更优雅。CodeGlancepro旁边浏览框。快捷键设置删除行:ctrl+L重新格式化代码ctrl+K开始新行ctrl+enter终端:......
  • Emmet插件的使用教程
    很多快捷键真的都很相似,这些语法都是很相似了,今天遇到一个比较不错的教程,收藏一下。Emmet的前身是大名鼎鼎的Zencoding,如果你从事Web前端开发的话,对该插件一定不会陌生。它......
  • 10.9 pluglnlib 插件库 nodelet
    10.2动态参数参数服务器的数据被修改时,如果节点不重新访问,那么就不能获取修改后的数据,例如在乌龟背景色修改的案例中,先启动乌龟显示节点,然后再修改参数服务器中关于背景......
  • 小程序调试插件方法
    小程序调试过程中不可能等插件审核上线之后再调试,因此需要在开发阶段就对接调试。插件工程插件工程(就是插件源代码)里的app.jsonplugins部分配置如下:"plugins":{......
  • IDEA中Commit Comment插件的安装及使用
       这个插件的好处就在于,可以便捷的生成规范化的代码提交注释,并且对提交的注释进行分类,让你一眼就知道,这个提交的内容涉及哪方面。这个是中文版的,英文版的叫GitComm......
  • rust 逐行读取文本文件
    usestd::fs::File;usestd::io::{BufRead,BufReader};fnmain(){//要打开的文件名letfilename="src/main.rs";//以只读模式打开文件letfile=File:......
  • Edge(chrome) 扩展插件离线迁移 外网到内网
    以edge举例步骤:第一步,下载或找到扩展id第二步,打包使用Usage:然后打包zip,迁移到内网或者其他机器上,打开开发模式,加载这个目录即可。......
  • 结合 casbin 为 APISIX 开发一个接口权限校验插件
    APISIX插件开发ApacheAPISIX是Apache软件基金会下的云原生API网关,它兼具动态、实时、高性能等特点,提供了负载均衡、动态上游、灰度发布(金丝雀发布)、服务熔断、身份认......
  • IDEA配置文档翻译插件接入阿里翻译和有道翻译
    在编码的过程中,时常需要使用一些第三方jar包,jar包里面大部分的文档都是英文的,对英语好的同学自然是无压力,但是对英语不好的同学就有点不友好了。对于我这种英语一般水平的......