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

vue2+wangEditor5富文本编辑器(图片视频自定义上传七牛云/服务器)

1、安装使用

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

在main.js中引入样式

import '@wangeditor/editor/dist/css/style.css'

在使用编辑器的页面引入js

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
components: { Editor, Toolbar },

模板

<template><div><div style="border: 1px solid #ccc; margin-top: 10px"><!-- 工具栏 --><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig"/><!-- 编辑器 --><Editorstyle="height: 400px; overflow-y: hidden":defaultConfig="editorConfig"v-model="html"@onChange="onChange"@onCreated="onCreated"/></div></div>
</template>

js

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {name: "MyEditor",components: { Editor, Toolbar },data() {return {editor: null,html: "<p>hello&nbsp;world</p>",toolbarConfig: {},editorConfig: {placeholder: "请输入内容...",// 所有的菜单配置,都要在 MENU_CONF 属性下MENU_CONF: {},},};},methods: {onCreated(editor) {this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错},onChange(editor) {console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容},},mounted() {},beforeDestroy() {const editor = this.editor;if (editor == null) return;editor.destroy(); // 组件销毁时,及时销毁 editor ,重要!!!},
};
</script>

 到这一步编辑器就可以正常显示了

2、上传图片、视频

上传到后台接口的可直接按照文档这个配置就行接口返回格式也要可文档上一致

 

 2)自定义上传(一般上传到别的服务器上,我这边是上传到七牛云服务器上)

在data配置上传图片、视频

editorConfig: {placeholder: "请输入内容...",// 所有的菜单配置,都要在 MENU_CONF 属性下MENU_CONF: {uploadImage: {customUpload: async (file, insertFn) => {let resultUrl = await this.upqiniu(file, file.name);insertFn(resultUrl);},},uploadVideo: {customUpload: async (file, insertFn) => {let resultUrl = await this.upqiniu(file, file.name);insertFn(resultUrl);},},},},

 this.upqiniu是我写的上传服务器的代码,最终将接口返回的地址return出去就行

 upqiniu(file, name) {return new Promise((resolve) => {let config = {useCdnDomain: true, //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。region: null, // 根据具体提示修改上传地区,当为 null 或 undefined 时,自动分析上传域名区域};let putExtra = {fname: `upload_pic_${name}`, //文件原文件名params: {}, //用来放置自定义变量mimeType: null, //用来限制上传文件类型,为 null 时表示不对文件类型限制;限制类型放到数组里: ["image/png", "image/jpeg", "image/gif"]};var observable = qiniu.upload(file,`upload_pic_${name}`,this.token,putExtra,config);observable.subscribe({next: (result) => {// 主要用来展示进度},error: (errResult) => {// 失败报错信息},complete: (result) => {// 接收成功后返回的信息let url = "http://image.gewu.pro/" + result.key;resolve(url);},});});},

相关文章:

vue2+wangEditor5富文本编辑器(图片视频自定义上传七牛云/服务器)

1、安装使用 安装 yarn add wangeditor/editor # 或者 npm install wangeditor/editor --save yarn add wangeditor/editor-for-vue # 或者 npm install wangeditor/editor-for-vue --save在main.js中引入样式 import wangeditor/editor/dist/css/style.css在使用编辑器的页…...

shell脚本练习--安全封堵脚本,使用firewalld实现

一.什么是安全封堵 安全封堵&#xff08;security hardening&#xff09;是指采取一系列措施来增强系统的安全性&#xff0c;防止潜在的攻击和漏洞利用。以下是一些常见的安全封堵措施&#xff1a; 更新和修补系统&#xff1a;定期更新操作系统和软件包以获取最新的安全补丁和修…...

双端冒泡排序

双端冒泡排序是对传统冒泡排序的改进&#xff0c;其主要改进在于同时从两端开始排序&#xff0c;相对于传统冒泡排序每次只从一端开始排序&#xff0c;这样可以减少排序的遍历次数。 传统冒泡排序从一端开始&#xff0c;每次将最大&#xff08;或最小&#xff09;的元素冒泡到…...

如何在Visual Studio Code中用Mocha对TypeScript进行测试

目录 使用TypeScript编写测试用例 在Visual Studio Code中使用调试器在线调试代码 首先&#xff0c;本文不是一篇介绍有关TypeScript、JavaScript或其它编程语言数据结构和算法的文章。如果你正在准备一场面试&#xff0c;或者学习某一个课程&#xff0c;互联网上可以找到许多…...

GO中Json的解析

一个json字串&#xff0c;想要拿到其中的数据&#xff0c;就需要解析出来 一、适用于json数据的结构已知的情况下 使用json.Unmarshal将json数据解析到结构体中 根据json字串数据的格式定义struct&#xff0c;用来保存解码后的值。这里首先定义了一个与要解析的数据结构一样的…...

chatgpt 提示词-关于数据科学的 75个词语

这里有 75 个 chatgpt 提示&#xff0c;可以立即将其用于数据科学或数据分析等。 1. 伪装成一个SQL终端 提示&#xff1a;假设您是示例数据库前的 SQL 终端。该数据库包含名为“用户”、“项目”、“订单”、“评级”的表。我将输入查询&#xff0c;您将用终端显示的内容进行…...

(自控原理)控制系统的数学模型

目录 一、时域数学模型 1、线性元件微分方程的建立 2、微分方程的求解方法​编辑 3、非线性微分方程的线性化 二、复域数学模型 1、传递函数的定义 2、传递函数的标准形式 3、系统的典型环节的传递函数 4、传递函数的性质 5、控制系统数学模型的建立 6、由传递函数求…...

Webpack5 cacheGroups

文章目录 一、 cacheGroups是什么&#xff1f;二、怎么使用cacheGroups&#xff1f;三、cacheGroups实际应用之一&#xff1f; 一、 cacheGroups是什么&#xff1f; 在Webpack 5中&#xff0c;cacheGroups是用于配置代码拆分的规则&#xff0c;它可以帮助你更细粒度地控制生成…...

前端面试的游览器部分(5)每篇10题

41.什么是浏览器的同步和异步加载脚本的区别&#xff1f;你更倾向于使用哪种方式&#xff0c;并解释原因。 浏览器的同步和异步加载脚本是两种不同的脚本加载方式&#xff0c;它们的主要区别在于加载脚本时是否阻塞页面的解析和渲染。 同步加载脚本&#xff1a; 同步加载脚本…...

数据挖掘七种常用的方法汇总

数据挖掘(Data Mining)就是从大量的、不完全的、有噪声的、模糊的、随机的实际应用数据中&#xff0c;提取隐含在其中的、人们事先不知道的、但又是潜在有用的信息和知识的过程。这个定义包括几层含义&#xff1a;数据源必须是真实的、大量的、含噪声的&#xff1b;发现的是用户…...

自然语言处理学习笔记(二)————语料库与开源工具

目录 1.语料库 2.语料库建设 &#xff08;1&#xff09;规范制定 &#xff08;2&#xff09;人员培训 &#xff08;3&#xff09;人工标注 3.中文处理中的常见语料库 &#xff08;1&#xff09;中文分词语料库 &#xff08;2&#xff09;词性标注语料库 &#xff08;3…...

Rust dyn - 动态分发 trait 对象

dyn - 动态分发 trait 对象 dyn是关键字&#xff0c;用于指示一个类型是动态分发&#xff08;dynamic dispatch&#xff09;&#xff0c;也就是说&#xff0c;它是通过trait object实现的。这意味着这个类型在编译期间不确定&#xff0c;只有在运行时才能确定。 practice tr…...

uniapp 中过滤获得数组中某个对象里id:1的数据

// 假设studentData是包含多个学生信息的数组 const studentData [{id: 1, name: 小明, age: 18},{id: 2, name: 小红, age: 20},{id: 3, name: 小刚, age: 19},{id: 4, name: 小李, age: 22}, ]; // 过滤获取id为1的学生信息 const result studentData.filter(item > ite…...

Django系列之Channels

1. Channels 介绍 Django 中的 HTTP 请求是建立在请求和响应的简单概念之上的。浏览器发出请求&#xff0c;Django服务调用相应的视图函数&#xff0c;并返回响应内容给浏览器渲染。但是没有办法做到 服务器主动推送消息给浏览器。 因此&#xff0c;WebSocket 就应运而生了。…...

HTTP——五、与HTTP协作的Web服务器

HTTP 一、用单台虚拟主机实现多个域名二、通信数据转发程序 &#xff1a;代理、网关、隧道1、代理2、网关3、隧道 三、保存资源的缓存1、缓存的有效期限2、客户端的缓存 一台 Web 服务器可搭建多个独立域名的 Web 网站&#xff0c;也可作为通信路径上的中转服务器提升传输效率。…...

pyspark笔记 Timestamp 类型的比较

最近写pyspark遇到的一个小问题。 假设我们有一个pyspark DataFrame叫做dart 首先将dart里面timestamp这一列转化成Timestamp类型 dartdart.withColumn(timestamp,col(timestamp).cast(TimestampType()))查看timestamp的前5个元素 dart.select(timestamp).show(5,truncateFal…...

SpringBoot 集成 Redis

本地Java连接Redis常见问题&#xff1a; bind配置请注释掉保护模式设置为noLinux系统的防火墙设置redis服务器的IP地址和密码是否正确忘记写访问redis的服务端口号和auth密码 集成Jedis jedis是什么 Jedis Client是Redis官网推荐的一个面向java客户端&#xff0c;库文件实现…...

黑客学习笔记(网络安全)

一、首先&#xff0c;什么是黑客&#xff1f; 黑客泛指IT技术主攻渗透窃取攻击技术的电脑高手&#xff0c;现阶段黑客所需要掌握的远远不止这些。 以前是完全涉及黑灰产业的反派角色&#xff0c;现在大体指精通各种网络技术的程序人员 二、为什么要学习黑客技术&#xff1f;…...

[openCV]基于拟合中线的智能车巡线方案V1

import cv2 as cv import os import numpy as np# 遍历文件夹函数 def getFileList(dir, Filelist, extNone):"""获取文件夹及其子文件夹中文件列表输入 dir&#xff1a;文件夹根目录输入 ext: 扩展名返回&#xff1a; 文件路径列表"""newDir d…...

MyBatis-Plus 和达梦数据库实现高效数据持久化

一、添加依赖 首先&#xff0c;我们需要在项目的 pom.xml 文件中添加 MyBatis-Plus 和达梦数据库的依赖&#xff1a; <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifac…...

静态分析失效了?SITS2026实测数据:92.7%的隐蔽依赖漏洞仅靠AI图神经网络可检出,你还在用正则?

第一章&#xff1a;SITS2026演讲&#xff1a;AI代码依赖分析 2026奇点智能技术大会(https://ml-summit.org) 在SITS2026主会场&#xff0c;来自MIT与GitHub联合实验室的研究团队首次公开演示了基于大语言模型的静态代码依赖图实时重构引擎——DepGraph-LLM。该系统不依赖传统…...

从GRID到Common Voice:不同语音语料库到底该怎么选?(附适用场景与优缺点对比)

语音语料库选型指南&#xff1a;从科研到落地的精准匹配策略 语音技术从业者常面临一个关键挑战&#xff1a;如何在众多语料库中找到最适合特定任务的数据资源&#xff1f;本文将深入解析主流语音语料库的核心特性、适用场景与潜在限制&#xff0c;帮助您建立系统化的选型决策框…...

Windows右键菜单终极清理指南:ContextMenuManager五分钟快速上手

Windows右键菜单终极清理指南&#xff1a;ContextMenuManager五分钟快速上手 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾经因为右键菜单过于臃肿而感…...

【数字信号去噪】猫头鹰搜索算法OSA优化变分模态分解SDO-VMD数字信号去噪(优化K值 alpha值 综合指标 适应度函数包络熵)【含Matlab源码 15355期】

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;Matlab武动乾坤博客之家&#x1f49e;…...

从状态机到中断:深入解析NRF52832 ESB库的通信流程与调试技巧

从状态机到中断&#xff1a;深入解析NRF52832 ESB库的通信流程与调试技巧 在嵌入式无线通信领域&#xff0c;NRF52832凭借其强大的射频性能和灵活的协议栈支持&#xff0c;成为众多物联网设备的首选方案。其中Enhanced ShockBurst(ESB)协议作为与经典NRF24L01兼容的核心通信机…...

加了领导微信,发现他从不发朋友圈。同事说把你屏蔽了。后来才知道没屏蔽任何人,只是不发!问他为什么,他说发什么都不对!

职场里最高级的“躺平”&#xff0c;是把朋友圈彻底清零。最近刷到一个扎心帖子&#xff0c;瞬间戳中了无数职场人的共鸣&#xff1a;加了领导微信&#xff0c;翻遍他的朋友圈&#xff0c;一条动态都没有。同事说“你被屏蔽了”&#xff0c;结果真相更现实——他只是彻底不发了…...

02-GlobalBurdenR包进阶-数据筛选与趋势地图绘制

1. GlobalBurdenR包数据筛选实战技巧 当你已经掌握了GlobalBurdenR包的基础数据读取功能后&#xff0c;接下来就要面对更实际的问题&#xff1a;如何从海量GBD数据中快速提取出我们需要的部分。这个环节就像在图书馆找书——如果不会使用检索系统&#xff0c;你可能会淹没在数…...

Superpowers - 16 用好「finishing-a-development-branch 」这最后一步:从混乱收尾到可复用的工程化流程

文章目录Pre一、这个技能到底解决什么问题&#xff1f;1.1 问题&#xff1a;收尾阶段的“灰色地带”1.2 位置&#xff1a;它不是一个“命令”&#xff0c;而是两个工作流的终点二、设计理念&#xff1a;元数据、显式激活与“五步完成协议”2.1 前置元数据&#xff1a;何时触发、…...

不只是网格:聊聊Ansys Fluent外气动仿真中,那些比画网格更重要的设置(以可压缩流为例)

超越网格划分&#xff1a;Ansys Fluent外气动仿真中的高阶设置精要 当气流以0.7马赫掠过机翼表面时&#xff0c;大多数工程师的第一反应是检查网格质量。但真正影响仿真精度的&#xff0c;往往是那些隐藏在软件深处、鲜少被深入讨论的参数设置。本文将带您穿透操作界面&#xf…...

从 GitCode 口袋工具 v1.0.2 看 Flutter 应用的用户体验设计:如何优雅地展示用户与仓库详情?

Flutter 应用的用户体验设计&#xff1a;以 GitCode 口袋工具为例解析详情页的最佳实践 在移动应用开发领域&#xff0c;用户体验(UX)设计的重要性日益凸显。作为一款基于 Flutter 框架开发的开源工具&#xff0c;GitCode 口袋工具 v1.0.2 版本在用户详情页和仓库详情页的设计上…...