vue-quill-editor 富文本编辑器使用出现的样式问题

使用富文本类型: vue-quill-editor

注意: 富文本导出 html 我们使用的时候, 样式凸显不出来
DOM 结构

<p><sub class="ql-size-large">测试内容</sub><sup class="ql-size-large">222222</sup></p>

一般编辑器导出内容:样式会 以style 形式嵌入, 但是这个的话,确是样式, 所以我们需要 下载对应的文件包
解决:

版本: "quill": "1.3.7",
npm install quill@1.3.7
import 'quill/dist/quill.core.css'

但是我发现一个问题,就是 每个样式前面多多了一个 类名 .ql-editor

.ql-editor .ql-size-small {font-size: 0.75em;
}
.ql-editor .ql-size-large {font-size: 1.5em;
}

更dom 结构里的不一样,其实还是不会生效的, 所以解决方案就是在 富文本 父级dom 加入 .ql-editor 类

<div class="ql-editor" v-html="mouldData"></div>

至此解决富文本导出,在其他页面样式不能展现的问题。
如果有其他无法显示的问题,都是类似这种解决方案:

关于前端vue 使用富文本

推荐使用 :https://javaforall.cn/132756.html
文档:https://www.wangeditor.com/v5/getting-started.html
文档:https://www.wangeditor.com/demo/like-qq-doc.html
官网:http://tinymce.ax-z.cn/
官网:http://kindeditor.net/demo.php
参考使用:http://www.zzvips.com/article/212768.html

ps:其他 (与文本无关
element-ui table滚动到底部加载下一页

  let that = thisthis.$refs.screenTable.bodyWrapper.addEventListener('scroll', function () {let clientHeight = this.clientHeightlet scrollTop = this.scrollToplet scrollHeight = this.scrollHeightif (clientHeight + scrollTop === scrollHeight) {// 滚动到最底时,加载下一页// if (that.total <= that.index && !this.popover) return// that.index += 1// 滚动条回滚至顶部// this.$refs.screenTable.bodyWrapper.scrollTop = 0}}, true)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/14671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

6步:用NGINX部署ASP.NET Core,轻松上云

1. 准备工作在开始部署之前&#xff0c;确保你已经完成了以下准备工作&#xff1a;- 安装.NET Core&#xff1a;确保你的Linux系统上安装了.NET Core运行时。你可以从.NET官网下载。- 安装NGINX&#xff1a;通过你的Linux发行版的包管理器安装NGINX。例如&#xff0c;在Ubuntu上…

GPT提示词技巧,使用教程,国内版官网直达,非套壳

GPT提示词技巧&#xff0c;使用教程&#xff0c;国内版官网直达&#xff0c;非套壳 主站点&#xff1a;https://chatgpt-plus.top&#xff08;江苏福建地区打不开&#xff0c;需要魔法&#xff09; 店铺地址&#xff1a;https://buy.chatgpt-plus.top/ 选择plus账号进入&…

鸿蒙开发ArkUI-X基础知识:【ArkUI代码工程及构建介绍】

代码工程及构建介绍 背景 ArkUI作为OpenHarmony的默认开发框架&#xff0c;在本项目&#xff08;ArkUI-X&#xff09;中需要做到一套代码同时支持多平台构建&#xff0c;所以会采取共仓开发的方式&#xff0c;部分仓直接指向OpenHarmony相关开源仓。 代码结构及仓库结构 代…

多模态模型(MLLM)论文串烧

近期看了一些多模态方向的工作&#xff0c;包括图像、文本多模态&#xff0c;图像、视频、语音、文本多模态&#xff0c;做个总结。 Yi Qwen-VL LLaVA MobileVLM LanguageBind Video-LLaVA VAST

【机器学习300问】94、什么是多任务学习?

一、多任务学习的定义 多任务学习&#xff08;Multi-Task Learning, MTL&#xff09;是一种机器学习范式&#xff0c;它允许一个模型同时学习执行多个相关但不完全相同的任务。这种方法的核心是&#xff1a;通过共享表示或权重&#xff0c;不同的任务可以在学习过程中相互促进&…

浅谈微服务的自动化部署

一、常用部署工具 jenkins,docker生态是比较常用的工具&#xff0c;本文也主要是聊这几个。其他如Kubernetes (K8s)&#xff0c;Ansible&#xff0c;GitLab CI/CD等工具本文只是暂时提一下&#xff0c;不展开讨论。 二、比较jenkins和docker生态 1、jenkins 优点 jenkins功…

Rust使用rust_xlsxwriter库把Vec数据写入Excel

一、Rust使用rust_xlsxwriter库把一维Vec数据写入Excel 在Rust中&#xff0c;使用rust_xlsxwriter库将一维Vec数据写入Excel文件是一个相对简单的过程。首先&#xff0c;你需要确保你的Cargo.toml文件中已经添加了rust_xlsxwriter依赖。以下是如何添加依赖的示例&#xff1a; …

KMP题解代码(含讲解)

目录 注意: next数组的变化规律&#xff1a; 初始化&#xff1a; 求next数组部分&#xff1a; KMP部分&#xff1a; AC代码&#xff1a; 题目链接&#xff1a;【模板】KMP - 洛谷 注意: 1、next数组是针对子串的&#xff0c;并未涉及母串&#xff0c;因此求next数组时…

Python中文件操作和异常处理

文章目录 一、文件操作1.概念2.文件3.二进制 二、基本文件操作三、乱码产生四、with open() as f五、代码实现文件复制粘贴六、try ... except ...七、代码比较 一、文件操作 1.概念 帮助我们把爬虫抓下来的数据&#xff0c;进行保存。 2.文件 在计算机中&#xff0c;没有p…

Linux:linux基础

Linux 一套免费使用和自由传播的操作系统 linux特点 免费,开源,多用户(同时允许多用户操作同一个Linux系统),多任务(同时允许多个任务执行) linux版本 分为内核版和发行版 内核版 由linus torvalds及其团队进行开发和维护 免费,开源 负责控制硬件 发行版 基于linux内…

Luat学习

万物互联的兴起 人与人之间的连接已经变得越来越紧密&#xff0c;至少在中国这是一个不争的事实。 人们的忙碌程度也达到了前所未有的水平&#xff0c;这时候人的通讯能力反而成为了瓶颈&#xff0c;人与外界的信息交换方式无外乎是嘴说、耳朵听、眼睛看、手指敲、每秒的传输速…

根据配置的mode环境显示不同的index模板

引言&#xff1a;在项目开发中&#xff0c;遇到了开发环境和生产环境使用模板不同的情况&#xff0c;配置如下&#xff1a; 一、vue.config.js const path require(path) function resolve(dir){return path.join(__dirname,dir) } module.exports {chainWebpack: config &g…

力扣226. 翻转二叉树(DFS的两种思路)

Problem: 226. 翻转二叉树 文章目录 题目描述思路复杂度Code 题目描述 思路 涉及二叉树的递归解法时往往需要考虑两种思路&#xff1a; 1.在递归遍历时执行题目需要的具体要求&#xff1b; 2.将一个大问题分解为多个小子问题 具体到本体&#xff1a; 思路1&#xff1a;遍历 先…

【源码分享】简单的404 HTML页面示例,该页面在加载时会等待2秒钟,然后自动重定向到首页

展示效果 源码 html <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><title>404 页面未找到</title><meta http-equiv"refresh" content"2;url/"> <!-- 设置2秒后跳转到首…

机器学习云环境测试

等待创建完成后&#xff0c;点击 PyTorch 打开&#xff0c;创建一个全新的 notebook 在 Cell 中输入如下代码&#xff0c;并点击 Run 完成后点击 New Cell &#xff0c;在 New Cell 中输入如下代码 输入完成后点击 Run &#xff0c;运行 New Cell 。&#xff08;每个 Cell 代…

1077: 平衡二叉树的判定

解法&#xff1a; 平衡二叉树是一种特殊的二叉树&#xff0c;它满足以下两个条件&#xff1a; 左子树和右子树的高度差不超过1&#xff08;即&#xff0c;左右子树高度差的绝对值不超过1&#xff09;。左子树和右子树都是平衡二叉树。 后序遍历过程中每次判断左右子树高度差…

python列表底层原理

Python 列表&#xff08;list&#xff09;是 Python 中非常常用的数据结构之一。它们的底层实现基于动态数组&#xff0c;具体来说&#xff0c;是一个可以动态调整大小的数组。这使得列表在操作和使用上非常灵活。以下是 Python 列表底层实现的主要原理&#xff1a; 动态数组 …

IT廉连看——UniApp——事件绑定

IT廉连看——UniApp——事件绑定 这是我们上节课最终的样式&#xff1b; 一、现在我有这样一个需求&#xff0c;当我点击“生在国旗下&#xff0c;长在春风里”它的颜色由红色变为蓝色&#xff0c;该怎么操作&#xff1f; 这时候我们需要一个事件的绑定&#xff0c;绑定一个单…

使用 Docker 部署 Jenkins 并设置初始管理员密码

使用 Docker 部署 Jenkins 并设置初始管理员密码 每一次开始&#xff0c;我都特别的认真与胆怯&#xff0c;是因为我期待结局&#xff0c;也能够不会那么粗糙&#xff0c;不会让我失望&#xff0c;所以&#xff0c;就多了些思考&#xff0c;多了些拘束&#xff0c;所以&#xf…

【HCIP学习】STP协议

一、STP协议出现背景&#xff08;Spanning Tree Protocol&#xff0c;生成树协议&#xff09; 二层环路带来的问题&#xff1a;广播风暴&#xff1b; MAC地址表的震荡&#xff1b; 二、STP定义 stp是二层网络中用于消除环路的协议&#xff0c;通过阻断冗余链路来消除&#xff…