wangEditor 编辑器 Vue 2.0 + Nodejs 配置
资料
- Vue2.0 版本的安装:https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8
- 上传图片配置:https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87
安装步骤
1.安装界面基础部分
<!-- 富文本编辑器 -->
<template><div class="WangEditor" style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"/></div>
</template><script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'export default {components: { Editor, Toolbar },data() {return {editor: null,html: '<p>hello</p>',toolbarConfig: {},editorConfig: { placeholder: '请输入内容...',},mode: 'default', // or 'simple'}},mounted() {// 模拟 ajax 请求,异步渲染编辑器setTimeout(() => {this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'}, 1500)},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时,及时销毁编辑器},methods: {// 编辑器实例创建完毕后回调onCreated(editor) {// 对象密封this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错},},}
</script><style scoped lang="scss">
.WangEditor{// 去掉重影小叉::v-deep .btn-close {svg {display: none;}}
}
</style>
2.配置上传服务
editorConfig: { placeholder: '请输入内容...',MENU_CONF: {uploadImage:{fieldName: 'images',server: 'http://localhost:3000/api/uploadImage', // 默认的是8081,这里要设置自己的IP和端口maxSize: 5 * 1024 * 1024, // 5MB}}
},
3.搭建后端Api
3-1. 设置静态文件,添加目录
// 创建主应用
const app = express();// 使 public/uploads 目录可以作为静态文件目录访问
app.use('/uploads', express.static(path.join(__dirname, 'public', 'uploads')));
3-2. 配置Multer
// Multer 配置
const storage = multer.diskStorage({destination: (req, file, cb) => {cb(null, 'public/uploads/'); // 上传文件的存储路径},filename: (req, file, cb) => {// 对文件名进行处理,确保文件名中的非英文字符不会出现乱码const sanitizedFilename = Date.now() + '-' + encodeURIComponent(file.originalname);cb(null, sanitizedFilename); // 使用 URL 编码后的文件名}
});// 创建 multer 实例
const upload = multer({storage: storage,limits: { fileSize: 5 * 1024 * 1024 }, // 限制文件大小最大为5MB
}).single('images'); // 这里使用 single() 来接收单个文件,'images' 是表单字段名称
3-3. 配置图片上传api
// 图片上传
app.post('/api/uploadImage', (req, res) => {// 使用 multer 中间件来处理文件上传upload(req, res, (err) => {if (err) {return res.status(500).json({errno: 1,message: '文件上传失败',});}const file = req.file; // 上传的文件信息存储在 req.file 中if (!file) {return res.status(400).json({errno: 1,message: '没有上传文件',});}// 获取服务器的 IP 地址const ip = req.socket.localAddress === '::1' ? 'localhost' : req.socket.localAddress;const port = 3000; // 端口号const baseUrl = `http://${ip}:${port}/uploads/`; // 构建完整的 URL// 返回文件的URL路径res.status(200).json({errno: 0,data: {url: `${baseUrl}${file.filename}`, // 上传后的文件路径alt: 'Uploaded Image',href: '', // 可选的链接(点击图片时跳转)},});})
})
4.解决弹窗小叉重影
<style scoped lang="scss">
.WangEditor{// 去掉重影小叉::v-deep .btn-close {svg {display: none;}}
}
</style>
相关文章:
wangEditor 编辑器 Vue 2.0 + Nodejs 配置
资料 Vue2.0 版本的安装:https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8上传图片配置:https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87 安装步骤 1.安装界面基础部分 <!-- 富文本编辑器…...
DeepSeek R1生成图片总结2(虽然本身是不能直接生成图片,但是可以想办法利用别的工具一起实现)
DeepSeek官网 目前阶段,DeepSeek R1是不能直接生成图片的,但可以通过优化文本后转换为SVG或HTML代码,再保存为图片。另外,Janus-Pro是DeepSeek的多模态模型,支持文生图,但需要本地部署或者使用第三方工具。…...
x86平台基于Qt+opengl优化ffmpeg软解码1080P视频渲染效率
一般的在arm嵌入式平台,大多数板子都要硬解码硬件渲染的框架,使用即可。 在x86下比较麻烦了。 优化的思路一共有以下几个方面, 1. 软解码变成硬解码 2. 将YUV转QImage的操作转移到GPU 3. QWidget渲染QImage变成opengGL渲染AVFrame 这三点…...
机器学习入门-读书摘要
先看了《深度学习入门:基于python的理论和实践》这本电子书,早上因为入迷还坐过站了。。 因为里面的反向传播和链式法则特别难懂,又网上搜了相关内容进行进一步理解,参考的以下文章(个人认为都讲的都非常好࿰…...
前端【技术方案】重构项目
1. 明确重构目标 优化性能 减少页面加载时间降低资源占用 提升代码可维护性 更规范的代码风格更清晰的代码结构更明确的模块设计 扩展功能 为项目添加新功能改进现有功能 2. 评估项目现状 审查代码 全面检查现有代码,找出代码中的问题,如代码冗余、耦合…...
大语言模型简史:从Transformer(2017)到DeepSeek-R1(2025)的进化之路
2025年初,中国推出了具有开创性且高性价比的「大型语言模型」(Large Language Model — LLM)DeepSeek-R1,引发了AI的巨大变革。本文回顾了LLM的发展历程,起点是2017年革命性的Transformer架构,该架构通过「…...
RabbitMQ服务异步通信
消息队列在使用过程中,面临着很多实际问题需要思考: 1. 消息可靠性 消息从发送,到消费者接收,会经理多个过程: 其中的每一步都可能导致消息丢失,常见的丢失原因包括: 发送时丢失: 生…...
Python常见面试题的详解7
1. 内置的数据结构有哪几种 Python 中有多种内置的数据结构,主要分为以下几种: 1.1 数值类型 整数(int):用于表示整数,没有大小限制。例如:1, -5, 100。浮点数(float)…...
Django REST Framework (DRF) 中用于构建 API 视图类解析
Django REST Framework (DRF) 提供了丰富的视图类,用于构建 API 视图。这些视图类可以分为以下几类: 1. 基础视图类 这些是 DRF 中最基础的视图类,通常用于实现自定义逻辑。 常用类 APIView: 最基本的视图类,所有其…...
Huatuo热更新--安装HybridCLR
1.自行安装unity编辑器 支持2019.4.x、2020.3.x、2021.3.x、2022.3.x 中任一版本。推荐安装2019.4.40、2020.3.26、2021.3.x、2022.3.x版本。 根据你打包的目标平台,安装过程中选择必要模块。如果打包Android或iOS,直接选择相应模块即可。如果你想打包…...
读书笔记 - 修改代码的艺术
读书笔记 - 修改代码的艺术 第 1 章 修改软件第 2 章 带着反馈工作系统变更方式反馈方式遗留代码修改方法 第 3 章 感知和分离伪协作程序模拟对象 第 4 章 接缝模型接缝 第 5 章 工具自动化重构工具单元测试用具 第 6 章 时间紧迫,但必须修改新生方法(Sp…...
【Go并发编程】Goroutine 调度器揭秘:从 GMP 模型到 Work Stealing 算法
每天一篇Go语言干货,从核心到百万并发实战,快来关注魔法小匠,一起探索Go语言的无限可能! 在 Go 语言中,Goroutine 是一种轻量级的并发执行单元,它使得并发编程变得简单高效。而 Goroutine 的高效调度机制是…...
c# -01新属性-模式匹配、弃元、析构元组和其他类型
文章目录 **学习摘抄分享**模式匹配概述Null 检查类型测试比较离散值关系模型多个输入ObServation列表模式弃元元组和对象析构利用switch的模式进行匹配对于out的方法调用独立弃元析构元组和其他类型元组方法一方法二方法三方法四使用弃元元组的元素使用弃元的用户定义类型解构…...
同步异步日志系统-日志落地模块的实现
功能:将格式化完成后的日志消息字符串,输出到指定的位置 扩展:支持同时将日志落地到不同的位置 位置分类: 1.标准输出 2.指定文件(时候进行日志分析) 3.滚动文件(文件按照时间/大小进行滚动…...
LabVIEW 天然气水合物电声联合探测
天然气水合物被认为是潜在的清洁能源,其储量丰富,预计将在未来能源格局中扮演重要角色。由于其独特的物理化学特性,天然气水合物的探测面临诸多挑战,涉及温度、压力、电学信号、声学信号等多个参数。传统的人工操作方式不仅效率低…...
类型通配符上限
主函数 package typeWildcardTop;import java.util.ArrayList;public class typeWildcardTopTest {/**/public static void main(String[] args) { // test1();test2();}/*测试showList接收ArrayList类型 ArrayList接收各种类型参数创建animals cats mincats集合 传入s…...
嵌入式音视频开发(二)ffmpeg音视频同步
系列文章目录 嵌入式音视频开发(零)移植ffmpeg及推流测试 嵌入式音视频开发(一)ffmpeg框架及内核解析 嵌入式音视频开发(二)ffmpeg音视频同步 嵌入式音视频开发(三)直播协议及编码器…...
Mongodb数据管理
Mongodb数据管理 1.登录数据库,查看默认的库 [rootdb51~]# mongo> show databases; admin 0.000GB config 0.000GB local 0.000GB> use admin switched to db admin > show tables system.version > admin库:admin 是 MongoDB 的管理…...
Django 创建表 choices的妙用:get_<field_name>_display()
1.定义choices 我在创建表时,对于性别这个字段,定义了choices 选项,1代表男,2代表女 mysql中表的数据如下,里面存储的是1或2 如果我们在网页上展示的时候,想展示“男”或“女”,而不是数字1或2…...
Spring Boot 集成 Kettle
Kettle 简介 Kettle 最初由 Matt Casters 开发,是 Pentaho 数据集成平台的一部分。它提供了一个用户友好的界面和丰富的功能集,使用户能够轻松地设计、执行和监控 ETL 任务。Kettle 通过其强大的功能和灵活性,帮助企业高效地处理大规模数据集…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...
springboot 日志类切面,接口成功记录日志,失败不记录
springboot 日志类切面,接口成功记录日志,失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)
UniApp 集成腾讯云 IM 富媒体消息全攻略(地理位置/文件) 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型,核心实现方式: 标准消息类型:直接使用 SDK 内置类型(文件、图片等)自…...
