当前位置: 首页 > news >正文

quill编辑器使用总结

一、vue-quill-editor 与 quill

        若使用版本1.0,这两个组件使用哪个都是一样的,无非代码有点偏差;若需要使用表格功能,必须使用 quill2.0 版本,因为 vue-quill-editor 不支持table功能。

二、webpack版本问题

        在使用 quill-image-resize-module 组件做图片缩放功能时,需要全局引入quill,及在 vue.config.js 文件中进行如下配置:

const webpack = require('webpack');
// configureWebpack下添加
plugins: [new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'})
]

但配置完发现项目还是报错,这里需要将 webpack5.0版本更换为 webpack4.0

三、图片文字复制粘贴功能

        配合 quill-image-extend-module 组件实现图片上传到服务器的功能,具体参考:https://www.kancloud.cn/liuwave/quill/1434141        

        编辑器内粘贴文字基本没啥问题,好多人都困在了粘贴图片需要上传至文件服务器的问题上,最简单的方法就是添加一个粘贴事件,示例如下:

<div class="editor" ref="editor" @paste="imgPasteHandler($event)"></div>
// 监听粘贴事件imgPasteHandler(e) {if (e.clipboardData && e.clipboardData.files && e.clipboardData.files.length) {e.preventDefault();[].forEach.call(e.clipboardData.files, file => {let fileName = file.name;let fileType = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);console.log('fileType',fileType);let formData = new FormData();formData.append("files", file);uploadPic(formData).then(resp => {if (resp.code === '200') {this.$message.success("图片上传成功");let index = this.quill.getSelection(true).index;this.quill.insertEmbed(index, 'image', process.env.VUE_APP_BASE_API + resp.data.url);this.quill.setSelection(index + 1);} else {this.$message.error(resp.msg);}});});}}

四、实现表格功能 

        quill2.0版本是支持 quill-better-table 的。table可以实现单元格的宽度缩放,合并,新增,删除,以及底色调整。

        详情请参考:https://www.cnblogs.com/utomboy/p/17839224.html

五、动态实现编辑器的可编辑与只读模式

        可以在quill组件中定义一个属性,然后监听这个属性进行实时的对编辑器的只读模式进行更改,参考如下:

props: {/* 是否只读 */isReadOnly: {type: Boolean,default: false}
},
watch: {isReadOnly: {handler(flag) {if (this.quill !== null) {this.quill.enable(!flag);}},immediate: true}}

六、给toobar增加title

        编辑器默认是没有title提示的,这对于使用者来说很不友好,可以对toobar的工具图标添加title中文提示,示例如下:

data() {return {titleConfig: {'ql-bold': '加粗','ql-color': '颜色','ql-font': '字体','ql-code': '插入代码','ql-italic': '斜体','ql-link': '添加链接','ql-background': '背景颜色','ql-size': '字体大小','ql-strike': '删除线','ql-script': '上标/下标','ql-underline': '下划线','ql-blockquote': '引用','ql-header': '标题','ql-indent': '缩进','ql-list': '列表','ql-align': '文本对齐','ql-direction': '文本方向','ql-code-block': '代码块','ql-formula': '公式','ql-image': '图片','ql-video': '视频','ql-clean': '清除字体样式'}}
},
mounted() {this.addQuillTitle();
},
methods: {addQuillTitle() {const oToolBar = document.querySelector('.ql-toolbar');const aButton = oToolBar.querySelectorAll('button');const aSelect = oToolBar.querySelectorAll('select');const aSpan = oToolBar.querySelectorAll('span');aButton.forEach(item => {if (item.className === 'ql-script') {item.value === 'sub' ? item.title = '下标' : item.title = '上标';} else if (item.className === 'ql-indent') {item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进';} else if (item.className === 'ql-list') {item.value === 'ordered' ? item.title = '有序列表' : item.title = '无序列表';} else {item.title = this.titleConfig[item.classList[0]];}});aSelect.forEach(item => {if (!item.classList.contains('ql-color') && item.classList.contains('ql-background')) {item.parentNode.title = this.titleConfig[item.classList[0]];}});aSpan.forEach(item => {if (item.classList[0] === 'ql-size') {const children = item.querySelectorAll('span');children.forEach(child => {if (child.className === 'ql-picker-label') {child.title = '字体大小';} else {child.title = '';}});} else if (item.classList[0] === 'ql-header') {const children = item.querySelectorAll('span');children.forEach(child => {if (child.className === 'ql-picker-label') {child.title = '标题';} else {child.title = '';}});} else if (item.classList[0] === 'ql-color') {const children = item.querySelectorAll('span');children.forEach(child => {if (child.className === 'ql-picker-label') {child.title = '字体颜色';} else {child.title = '';}});} else if (item.classList[0] === 'ql-background') {const children = item.querySelectorAll('span');children.forEach(child => {if (child.className === 'ql-picker-label') {child.title = '背景颜色';} else {child.title = '';}});} else if (item.classList[0] === 'ql-align') {const children = item.querySelectorAll('span');children.forEach(child => {if (child.className === 'ql-picker-label') {child.title = '对齐方式';} else if(child.className === 'ql-picker-options') {const childes = child.querySelectorAll('span');childes.forEach(c => {if (c.getAttribute('data-value') === 'center') {c.title = '居中';} else if (c.getAttribute('data-value') === 'right') {c.title = '右对齐';} else if (c.getAttribute('data-value') === 'justify') {c.title = '两端对齐';} else {c.title = '左对齐';}});}});}});}
}

相关文章:

quill编辑器使用总结

一、vue-quill-editor 与 quill 若使用版本1.0&#xff0c;这两个组件使用哪个都是一样的&#xff0c;无非代码有点偏差&#xff1b;若需要使用表格功能&#xff0c;必须使用 quill2.0 版本&#xff0c;因为 vue-quill-editor 不支持table功能。 二、webpack版本问题 在使用 q…...

快手矩阵管理系统:引领短视频运营新潮流

在短视频行业蓬勃发展的今天&#xff0c;如何高效运营和优化内容创作已成为企业和创作者关注的焦点。快手矩阵管理系统以其强大的核心功能&#xff0c;为短视频内容的创作、发布和管理提供了一站式解决方案。 智能创作&#xff1a;AI自动生成文案 快手矩阵管理系统的智能创作…...

文心一言:探索AI写作的新境界

在人工智能飞速发展的今天&#xff0c;AI写作助手已经成为许多写作者、内容创作者和营销专家的重要工具。"文心一言"作为一个先进的AI写作平台&#xff0c;以其强大的语言理解和生成能力&#xff0c;为用户提供了从文本生成到编辑、优化等一系列服务。本文将介绍如何…...

认证资讯|Bluetooth SIG认证

在当今高度互联的世界中&#xff0c;无线技术的普及已经成为我们生活和工作中不可或缺的一部分。作为领先的无线通信技术之一&#xff0c;Bluetooth技术以其稳定性、便捷性和广泛的应用场景而备受青睐。然而&#xff0c;要想在激烈的市场竞争中脱颖而出&#xff0c;获得Bluetoo…...

我国静止无功发生器(SVG)市场规模逐渐扩大 高压SVG为主流产品

我国静止无功发生器&#xff08;SVG&#xff09;市场规模逐渐扩大 高压SVG为主流产品 静止无功发生器&#xff08;SVG&#xff09;又称为静止同步补偿器、先进静止补偿器、静止调相机等&#xff0c;是利用全控型功率器件组成的桥式变流器来实现动态无功调节的一种先进无功自动补…...

【漏洞复现】用友U8 CRM downloadfile 任意文件读取漏洞

0x01 产品简介 用友U8 CRM客户关系管理系统是一款专业的企业级CRM软件&#xff0c;旨在帮助企业高效管理客户关系、提升销售业绩和提供优质的客户服务。 0x02 漏洞概述 用友 U8 CRM客户关系管理系统 /pub/downloadfile.php接囗处存在任意文件读取漏洞,未经身份验证的远程攻击…...

计算机网络 | 期末复习

物理层&#xff1a; 奈氏准则&#xff1a;带宽&#xff08;w Hz&#xff09;&#xff0c;在不考虑噪音的情况下&#xff0c;最大速率&#xff08;2W&#xff09;码元/秒 信噪比S/N&#xff1a;以分贝&#xff08;dB&#xff09;为度量单位。信噪比&#xff08;dB&#xff09;…...

动手实操微软开源的GraphRAG

微软在今年4月份的时候提出了GraphRAG的概念&#xff0c;然后在上周开源了GraphRAG,Github链接见https://github.com/microsoft/graphrag,截止当前&#xff0c;已有6900Star。 安装教程 官方推荐使用Python3.10-3.12版本&#xff0c;我使用Python3.10版本安装时&#xff0c;在…...

【网络安全】实验七(ISA防火墙的规则设置)

一、实验目的 二、配置环境 打开两台虚拟机&#xff0c;并参照下图&#xff0c;搭建网络拓扑环境&#xff0c;要求两台虚拟机的IP地址要按照图中的标识进行设置&#xff0c;并根据搭建完成情况&#xff0c;勾选对应选项。注&#xff1a;此处的学号本人学号的最后两位数字&…...

实验代码结构介绍

提高模型复用性&#xff0c;让模型对应的配置更加清晰&#xff0c;代码书写条理 学习自https://zhuanlan.zhihu.com/p/409662511 Project ├── checkpoints # 存放模型 ├── data # 定义各种用于训练测试的数据集 ├── eval.py # 测试代码 ├── loss.py # 定义的…...

Java多线程不会?一文解决——

方法一 新建类如MyThread继承Thread类重写run()方法再通过new MyThread类来新建线程通过start方法启动新线程 案例&#xff1a; class MyThread extends Thread {public MyThread(String name) {super(name);}Overridepublic void run() {for(int i0;i<10;i){System.out.…...

Mac上pyenv的安装及使用

Mac上pyenv的安装及使用 安装 brew update brew install pyenv 报错 git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallowgit -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow那就执行这2句 还报错 git -C /…...

【SpringBoot】IDEA查看spring bean的依赖关系

前因&#xff1a;研究springcloud config组件时&#xff0c;我发现config-server包下的EnvironmentController不在扫描的包路径下却可以响应客户端的请求&#xff0c;这引起了我的注意&#xff0c;我的问题是&#xff1a;EnvironmentController是怎么被添加进bean工厂的。本章就…...

项目代码优化(1)——下单逻辑

给一个电商开发的系统排查&#xff0c;发现漏洞很多。很多经验不够的开发者很容易忽视的逻辑错误陷阱。在给一个项目做二次开发时候&#xff0c;检测到的相关经典案例。这里整理支付和产品相关的逻辑&#xff0c;方便后续查看。&#xff0c;这里进行一些简单的逻辑漏洞梳理与修…...

探索 WebKit 的缓存迷宫:深入理解其高效缓存机制

探索 WebKit 的缓存迷宫&#xff1a;深入理解其高效缓存机制 在当今快速变化的网络世界中&#xff0c;WebKit 作为领先的浏览器引擎之一&#xff0c;其缓存机制对于提升网页加载速度、减少服务器负载以及改善用户体验起着至关重要的作用。本文将深入探讨 WebKit 的缓存机制&am…...

JVM:介绍

文章目录 一、什么是JVM二、JVM的功能1、解释和运行2、内存管理3、即时编译 三、常见的JVM四、Java虚拟机规范五、HotSpot发展历程 一、什么是JVM JVM的全称为Java Virtual Machine&#xff0c;Java虚拟机。本质上是一个运行在计算机上的程序&#xff0c;职责是运行Java字节码…...

和鲸“101”计划领航!和鲸科技携手北中医,共话医学+AI 实验室建设及创新人才培养

为进一步加强医学院校大数据管理与应用、信息管理与信息系统&#xff0c;医学信息工程等专业建设&#xff0c;交流实验室建设、专业发展与人才培养经验&#xff0c;6 月 22 日&#xff0c;由北京中医药大学&#xff08;简称“北中医”&#xff09;主办&#xff0c;上海和今信息…...

Linux 网络抓包工具tcpdump编译

tcpdump 的编译步骤 1. 下载源代码 访问 tcpdump 的官方网站&#xff08;如&#xff1a;http://www.tcpdump.org/&#xff09;下载最新的源代码压缩包&#xff0c;如tcpdump-4.9.2.tar.gz&#xff08;注意版本号可能会有所不同&#xff09;。 2. 解压缩源代码 使用 tar 命令…...

『C++成长记』string模拟实现

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ ​ 目录 一、存储结构 二、默认成员函数 &#x1f4d2;2.1构造函数 &#x1f4d2;2.…...

【c++】C++ IO流

本专栏内容为&#xff1a;C学习专栏&#xff0c;分为初阶和进阶两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握C。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...