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 = '左对齐';}});}});}});}
}

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

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

相关文章

软信天成:您的数据仓库真的“达标”了吗?

在复杂多变的数据环境中&#xff0c;您的数据仓库是否真的“达标”了&#xff1f;本文将深入探讨数据仓库的定义、合格标准及其与数据库的区别&#xff0c;帮助您全面审视并优化您的数据仓库。 一、什么是数据仓库&#xff1f; 数据仓库是一个面向主题的、集成的、相对稳定的、…

一个R包完成单细胞基因集富集分析 (全代码)

singleseqgset是用于单细胞RNA-seq数据的基因集富集分析的软件包。它使用简单的基础统计量&#xff08;variance inflated Wilcoxon秩和检验&#xff09;来确定不同cluster中感兴趣的基因集的富集。 Installation library(devtools) install_github("arc85/singleseqgse…

iOS手机竖着拍的照片被旋转了90°的原因以及解决方案

EXIF.getData(IMG_FILE, function () { // IMG_FILE为图像数据 var orientation EXIF.getTag(this, “Orientation”); console.log(“Orientation:” orientation); // 拍照方向 }); 获取拍照方向的结果为1-8的数字&#xff1a; 注意&#xff1a;对于上面的八种方向中&a…

Docker的安装及使用摘要

本文分享一些在docker安装及使用过程中的部分要点&#xff0c;会持续更新&#xff0c;供参考。 1. docker安装 1.1 在ubuntu系统安装 安装指定版本的docker。 # 更新时间&#xff1a;2024年6月23日# docker官方的源无法安装&#xff0c;采用阿里云的源安装docker # 更新软件…

2024.7.4作业

1.梳理笔记(原创) 2. 终端输入一个日期&#xff0c;判断是这一年的第几天 scanf("%d-%d-%d",&y,&m,&d); 闰年2月29天&#xff0c;平年2月28天 #include <stdio.h> int main(int argc,const char *argv[]) { int y0,m0,d0,sum0,i0; …

[论文笔记] pai-megatron-patch Qwen2-72B-CT 后预训练 踩坑记录

经过以下修改,Qwen2-72B-CT可以正常训练,并且benchmark指标和loss正常。 Qwen2-72B-CT开长文本,256卡,16K会OOM,目前能开11K(11008)。 开context parallel需要后续测试。 [论文笔记] Pai-megatron Qwen1.5-14B-CT 后预训练 踩坑记录_pai-megatron-patch 多机-CSDN博客 …

数据库表导出到excel:前置知识1 ALL_TAB_COLS

ALL_TAB_COLS 当前用户可访问的表、视图和群集的列的相关信息 其中几个字段: OWNER&#xff1a;表&#xff0c;视图及群集的Owner   TABLE_NAME&#xff1a; 表&#xff0c;视图及聚簇的名称   COLUMN_NAME&#xff1a; 字段名   DATA_TYPE &#xff1a;字段的数据类型…

python 字典 一个key 多 value 遍历

在Python中&#xff0c;如果一个键对应多个值&#xff0c;你需要确保这些值被存储在一个容器类型&#xff08;如列表或集合&#xff09;中。你可以使用默认字典&#xff08;collections.defaultdict&#xff09;来简化这个过程。以下是一个示例代码&#xff1a; from collecti…

python vtk lod 设置

在Python中使用VTK库设置Level of Detail (LOD)可以通过vtkLODProp3D类来实现。这个类允许你为一个模型指定不同级别的细节表示&#xff0c;从而在渲染时根据模型与摄像机的距离自动切换到更适合的表示。 以下是一个简单的例子&#xff0c;展示如何使用vtkLODProp3D来设置LOD&…

万字长文MySQL Binlog 详细指南

目录 第一阶段 MySQL Binlog 基础用法1. Binlog基本概念1.1 什么是Binlog1.2 Binlog的作用1.3 Binlog格式 2. 配置和管理Binlog2.1 开启Binlog2.2 设置Binlog文件大小和保留时间2.3 查看Binlog状态 3. Binlog的实际应用3.1 数据恢复3.2 主从复制3.3 审计 4. Binlog工具使用4.1 …

收银系统源码-收银台营销功能-购物卡

1. 功能描述 购物卡&#xff1a;基于会员的电子购物卡&#xff0c;支持设置时效、适用门店、以及可用商品&#xff1b;支持售卖和充值赠送&#xff0c;在收银台可以使用&#xff1b; 2.适用场景 会员充值赠送活动&#xff0c;例如会员充值1000元&#xff0c;赠送面值100元购…

LeetCode题解:205. 同构字符串,哈希表,JavaScript,详细注释

原题链接&#xff1a; https://leetcode.cn/problems/isomorphic-strings/ 理解题意&#xff1a; s "foo"和t "bar"&#xff0c;s中的o同时映射了a和r&#xff0c;不正确s "badc"和t "baba"&#xff0c;t中的a同时映射了a和c&am…

145-四路16位125Msps AD FMC子卡模块

一、概述 该板卡可实现4路16bit 125Msps AD 功能&#xff0c;是xilinx开发板设计的标准板卡。FMC连接器是一种高速多pin的互连器件&#xff0c;广泛应用于板卡对接的设备中&#xff0c;特别是在xilinx公司的所有开发板中都使用。该AD&#xff0c;DA子卡模块就专门针对xilinx开发…

pytorch镜像如何通过dockerfile和启动脚本封装tensorboard

一&#xff1a;dockerfile文件内容&#xff0c;这里我们以pytorch/pytorch:1.13.1-cuda11.6-cudnn8-devel基础镜像为例&#xff1a; # 定义基础镜像 FROM pytorch/pytorch:1.13.1-cuda11.6-cudnn8-devel# 设置非互动模式以避免一些安装过程中的对话框 ENV DEBIAN_FRONTENDnoni…

go语言并发编程2-runtime

runtime.Gosched() 作用是让出CPU时间片&#xff0c;重新等待安排任务。执行runtime.Gosched()后&#xff0c;其他协程优先执行&#xff0c;当前所在协程最后执行。 package mainimport ("fmt""runtime" )func main() {go func(s string) {for i : 0; i …

网络爬虫之爬虫逆向的学习途径、相关网站和学习资料

网络爬虫之爬虫逆向的学习途径、相关网站和学习资料 演练和学习网站 CTFTIME 一个全球性的CTF&#xff08;Capture The Flag&#xff09;赛事信息平台&#xff0c;收录了各类CTF比赛。你可以通过参加这些比赛来提升自己的逆向工程和安全技能。 安全客 由360公司运营的安全资讯…

iview 里面的ip 组件封装_iview ipinput

</ul><div v-if"erro_ip" style"color: red;">ip格式错误!</div> </div>最终的效果图如下&#xff1a;![](https://img-blog.csdnimg.cn/20190513170751269.png)最后为了方便大家的沟通与交流请加QQ群&#xff1a; [625787746]( )…

Github 2024-07-03开源项目日报Top10

根据Github Trendings的统计,今日(2024-07-03统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量JavaScript项目3Jupyter Notebook项目2Python项目2C++项目1Rust项目1TypeScript项目1Vue项目1Go项目1Moby 项目 - 软件容器化的开源工具集 创建…

波动方程 - 波动方程是个什么方程

波动方程 - 波动方程是个什么方程 flyfish 波动方程或称波方程&#xff08;英语&#xff1a;wave equation&#xff09;是一种二阶线性偏微分方程,波动方程是双曲型偏微分方程的最典型代表. 微分方程 微分方程&#xff08;Differential Equation&#xff09;是一类包含未知…

C++语言特性层(Language Features Layer)

1.语言基础 &#xff08;1&#xff09;指针 定义&#xff1a; 指针是一个变量&#xff0c;用于存储另一个变量的内存地址。 特性&#xff1a; 可变性&#xff1a;指针可以重新指向不同的变量。空指针&#xff1a;指针可以为空&#xff08;即指向 nullptr&#xff09;。大小&am…