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

vue 富文本编辑器多图上传

首先我使用的富文本编辑器是vue-quill-editor
使用npm进行下载

npm install vue-quill-editor --save

当然也可以按照官方的方法下载,到官方
因为我是在原有老项目上开发的使用的组件库是ant-design-vue 1x版,当然使用其他组件库也可以
然后还有重要的一步需要引入jquery后面有地方需要用到
使用npm进行下载jquery

npm install jquery --save;

下面直接上代码

<template><div><quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" /><a-upload list-type="picture-card" class="quill-upload" :show-upload-list="false" :multiple="true" v-show="false":data="headerdata" action="https://upload-cn-east-2.qiniup.com" :before-upload="beforeUploadlogin"@change="handleChangeloginbig" :on-success="quillSuccess"><i class="el-icon-upload"></i></a-upload></div>
</template><script>const toolbarOptions = [['bold', 'italic', 'underline', 'strike'], // toggled buttons['blockquote', 'code-block'],[{header: 1}, {header: 2}], // custom button values[{list: 'ordered'}, {list: 'bullet'}],[{script: 'sub'}, {script: 'super'}], // superscript/subscript[{indent: '-1'}, {indent: '+1'}], // outdent/indent[{direction: 'rtl'}], // text direction[{size: ['small', false, 'large', 'huge']}], // custom dropdown[{header: [1, 2, 3, 4, 5, 6, false]}],[{color: []}, {background: []}], // dropdown with defaults from theme[{font: []}],[{align: []}],['link', 'image', 'video'],['clean'] // remove formatting button];import API from "@/Api/index.js";import UNITY from "@/commont/user.js";export default {data() {return {content: "",headerdata: {token: "",key: "",},loginimageUrlbig: [],URL: "",cyloginimageUrlbig: [],editorOption: {modules: {toolbar: {container: toolbarOptions,handlers: {// 重写点击组件上的图片按钮要执行的代码这里用到了jquery'image': (value) => {document.querySelector('.quill-upload .el-icon-upload').click()}}}}},cyput: 0}},created() {},methods: {async beforeUploadlogin(file) {this.cyput++let that = this;let time = new Date().getTime();time = time + '' + that.cyput//这边是封装的接口await API.UPLOADUPLOADTOKEN().then(res => {that.headerdata.token = res.data.data.token;that.headerdata.key = "permanent/head/" + time + '.png';that.URL = UNITY.getSession("qiniu_cdnurl");})const sizeOk = file.size < 1024 * 1000;if (!sizeOk) {this.$message.error('照片大小超过100K!');return}},handleChangeloginbig(info) {if (info.file.status === "done") {if (this.loginimageUrlbig.length < 9) {if (this.loginimageUrlbig[0] != "") {this.loginimageUrlbig.unshift("")}} else {this.loginimageUrlbig.shift()}let loCbig = this.URL + '/' + info.file.response.key;this.loginimageUrlbig.push(loCbig)if (loCbig) {// 获取文本编辑器let quill = this.$refs.myQuillEditor.quill// 获取光标位置let pos = quill.getSelection().index// 插入图片到光标位置quill.insertEmbed(pos, 'image', loCbig)} else {this.$essage.error('图片插入失败')}}},}}
</script><style scoped></style>

相关文章:

vue 富文本编辑器多图上传

首先我使用的富文本编辑器是vue-quill-editor 使用npm进行下载 npm install vue-quill-editor --save当然也可以按照官方的方法下载&#xff0c;到官方 因为我是在原有老项目上开发的使用的组件库是ant-design-vue 1x版&#xff0c;当然使用其他组件库也可以 然后还有重要的一…...

简易地铁自动机售票系统实现(C++)

该程序具有以下功能 (1) 一个地铁路线类 Router&#xff0c;包含路线编号&#xff0c;途中的各个站点。可以新增、删除、查询路线&#xff0c;可以根据线路名称&#xff0c;显示线路图片。 (2) 一个地图类 Map&#xff0c;可以显示所有可以乘坐的地铁站名&#xff0c;以及线路…...

【Spark入门】基础入门

【大家好&#xff0c;我是爱干饭的猿&#xff0c;本文重点介绍Spark的定义、发展、扩展阅读&#xff1a;Spark VS Hadoop、四大特点、框架模块、运行模式、架构角色。 后续会继续分享其他重要知识点总结&#xff0c;如果喜欢这篇文章&#xff0c;点个赞&#x1f44d;&#xff…...

【自制开源】实时调参,手写字生成神器!大学生福音,告别繁琐的手写报告。

HandwritingGenerator HandwritingGenerator 是一个使用 PyQt6 制作的手写文本图片生成器。 该工具允许用户自定义多种效果&#xff0c;通过在左边配置效果参数&#xff0c;右边实时预览&#xff0c;并在调整好后输出图片。 效果预览 软件界面预览&#xff1a;一封情书&#x…...

Python 进阶(十一):高精度计算(decimal 模块)

《Python入门核心技术》专栏总目录・点这里 文章目录 1. 导入decimal模块2. 设置精度3. 创建Decimal对象4. 基本运算5. 比较运算6. 其他常用函数7. 注意事项8. 总结 大家好&#xff0c;我是水滴~~ 在进行数值计算时&#xff0c;浮点数的精度问题可能会导致结果的不准确性。为了…...

MCU常用文件格式

1. asm文件 asm是汇编语言源程序的扩展名&#xff0c;.asm文件是以asm作为扩展名的文件&#xff0c;是汇编语言的源程序文件。汇编语言(Assembly Language)是面向机器的程序设计语言&#xff0c;是利用计算机所有硬件特性并能直接控制硬件的语言。在汇编语言中&#xff0c;用助…...

【机器学习】On the Identifiability of Nonlinear ICA: Sparsity and Beyond

前言 本文是对On the Identifiability of Nonlinear ICA: Sparsity and Beyond (NIPS 2022)中两个结构稀疏假设的总结。原文链接在Reference中。 什么是ICA(Independent component analysis)&#xff1f; 独立成分分析简单来说&#xff0c;就是给定很多的样本X&#xff0c;通…...

RBAC(Role-Based Access Control,基于角色的访问控制)

1. RBAC核心概念 RBAC&#xff08;Role-Based Access Control&#xff0c;基于角色的访问控制&#xff09;是一种广泛应用于软件和系统中的权限管理模型。它通过将用户与角色关联&#xff0c;再将角色与访问权限关联&#xff0c;来管理用户对系统资源的访问。RBAC模型的主要特…...

C++const指针的两种用法

const int *p &a; 指向const变量的指针 指向const变量的指针const修饰的变量&#xff0c;只能由指向const变量的指针去指向 p &a1;const的位置&#xff0c;必须在*的左边指向const变量的指针&#xff0c;可以被改变&#xff0c;可以指向别的变量可以指向普通变量&am…...

【Proteus仿真】【51单片机】智能垃圾桶设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用报警模块、LCD1602液晶模块、按键模块、人体红外传感器、HCSR04超声波、有害气体传感器、SG90舵机等。 主要功能&#xff1a; 系统运行后&#xf…...

【Windows】执行tasklist/taskkill提示“错误:找不到”或者“ERROR: not found”的解决方案

原因 由于WinMgmt异常导致起不来&#xff0c;而WinMgmt是SVCHOST进程中的WMI服务&#xff0c;解决这个问题需要停止之后再重新启动。 WinMgmt是Windows 2000客户端管理的核心组件&#xff0c;当客户端应用程序连接或当管理程序需要它本身的服务时&#xff0c;这个进程就会初始…...

MS2630——Sub-1 GHz、低噪声放大器芯片

产品简述 MS2630 是一款 Sub-1 GHz 低功耗、低噪声放大器 (LNA) 芯 片。芯片采用先进制造工艺&#xff0c;采用 SOT23-6 的封装形式。 主要特点 ◼ 典型噪声系数&#xff1a; 1.57dB ◼ 典型功率增益&#xff1a; 16.3dB ◼ 典型输出 P1dB &#xff1a; -9.2dBm…...

车载以太网-数据链路层-MAC

文章目录 车载以太网MAC(Media Access Control)车载以太网MAC帧格式以太网MAC帧报文示例车载以太网MAC层测试内容车载以太网MAC(Media Access Control) 车载以太网MAC(Media Access Control)是一种用于车载通信系统的以太网硬件地址,用于在物理层上识别和管理数据包的传…...

Tomcat源码分析

Tomcat源码分析与实例 Tomcat是一个开源的Java Web服务器&#xff0c;它提供了一种简单的方式来部署和运行Java Web应用程序。本文将详细介绍Tomcat的源码分析和实例。 1. Tomcat源码分析 1.1 目录结构 Tomcat的源码目录结构如下&#xff1a; tomcat-x.y.z/ ├── bin/ ├…...

计算机视觉面试题-02

图像处理和计算机视觉基础 什么是图像滤波&#xff1f;有哪些常见的图像滤波器&#xff1f; 图像滤波是一种通过在图像上应用滤波器&#xff08;卷积核&#xff09;来改变图像外观或提取图像特征的图像处理技术。滤波器通常是一个小的矩阵&#xff0c;通过在图像上进行卷积…...

力扣日记11.27-【二叉树篇】二叉树的最大深度

力扣日记&#xff1a;【二叉树篇】二叉树的最大深度 日期&#xff1a;2023.11.27 参考&#xff1a;代码随想录、力扣 104. 二叉树的最大深度 题目描述 难度&#xff1a; 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最…...

【数据结构】树的概念以及二叉树

目录 1 树概念及结构 1.1 树的概念 1.3 树的存储 2 二叉树的概念及结构 2.1 概念 2.2 特殊的二叉树 2.3 二叉树的性质 2.4 二叉树的存储结构 1 树概念及结构 1.1 树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组…...

软件测试职业规划导图

公司开发的产品专业性较强&#xff0c;软件测试人员需要有很强的专业知识&#xff0c;现在软件测试人员发展出现了一种测试管理者不愿意看到的景象&#xff1a; 1、开发技术较强的软件测试人员转向了软件开发(非测试工具开发)&#xff1b; 2、业务能力较强的测试人员转向了软件…...

360压缩安装一半不动了?一分钟解决!

360压缩软件是我们常用的压缩软件&#xff0c;但是常常会遇到压缩安装到一半停止的情况&#xff0c;下面提供了一些可能的原因和解决办法&#xff0c;大家可以进行尝试~ 方法一&#xff1a;关闭防火墙和杀毒软件 有时候&#xff0c;防火墙和杀毒软件可能会阻止360压缩的安装过…...

堆和栈的区别 重点来说一下堆和栈;堆与栈之间的联系

文章目录 堆和栈的区别重点来说一下堆和栈&#xff1a;那么堆和栈是怎么联系起来的呢? 堆与栈的区别 很明显&#xff1a; 今天来聊一聊java中的堆和栈&#xff0c;工作当中这两个也是经常遇到的&#xff0c;知识我们没有去注意理论上的这些内容&#xff0c;今天就来分享一下。…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...