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

wangEditor 编辑器 Vue 2.0 + Nodejs 配置

news 来源：原创 2025/9/20 12:56:34

资料

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.安装界面基础部分 <!-- 富文本编辑器…...

编程日记 2025/9/20 12:56:34

机器学习·数据处理

前言对于大规模数据，我们经常会使用python内置函数或者编写脚本进行批量化处理，从而提高后续使用算法的效率。 1. 正则表达式定义：用于检索、替换符合某个模式的文本，是文本预处理常用技术。基本语法符号描述.匹配除换行符 …...

编程日记 2025/9/20 5:38:53

如何在Bigemap Pro中用线分割面、挖空

有时候需要以一条线为界对面元素进行分割或者是需要在一个面元素里面挖空一个面形状的洞，对此需求可以使用bigemap pro工具实现，这里为你介绍一下具体的操作方法。【一】画线分割面第一步：现在这是一个不规则多边形，想要以手动…...

编程日记 2025/9/7 22:56:12

网络安全入门攻击与防御实战（四）

漏洞利用：永恒之蓝（MS17-010）与同类漏洞解析 1 永恒之蓝（MS17-010）漏洞背景 （1）漏洞信息 CVE编号：CVE-2017-0143 ~ CVE-2017-0148 影响范围：Windows XP ~ Windows 201…...

编程日记 2025/9/13 5:06:28

DeepSeek 接入PyCharm实现AI编程！（支持本地部署DeepSeek及官方DeepSeek接入）

前言在当今数字化时代，AI编程助手已成为提升开发效率的利器。DeepSeek作为一款强大的AI模型，凭借其出色的性能和开源免费的优势，成为许多开发者的首选。今天，就让我们一起探索如何将DeepSeek接入PyCharm，实现高效、智…...

编程日记 2025/9/19 9:44:10

CF1801D

CF1801D 题目大意： n n n 个顶点， m m m 条边的图。你一开始在起点 1，拥有 P P P 枚硬币，通过每条 ( i , j ) (i,j) (i,j) 边都需要花费一定的硬币 s ( i , j ) s(i,j) s(i,j)。但你在每个城市 i i i 都可以打工赚硬币 w i w…...

编程日记 2025/9/10 19:28:56

大厂算法面试常见问题总结：高频考点与备战指南

在大厂算法面试中，数据结构与算法是必考的核心内容。无论是校招还是社招，算法题的表现往往决定了面试的成败。为了帮助大家更好地备战，本文总结了大厂算法面试中的高频考点，并提供了详细的备战建议，助你轻松应对面…...

编程日记 2025/9/19 4:40:41

【R语言】主成分分析与因子分析

一、主成分分析主成分分析（Principal Component Analysis, PCA）是一种常用的无监督数据降维技术，广泛应用于统计学、数据科学和机器学习等领域。它通过正交化线性变换将（高维）原始数据投影到一个新的坐标系&#xff…...

编程日记 2025/9/14 5:01:15

解锁 AIoT 无限可能，乐鑫邀您共赴 Embedded World 2025

2025 年 3 月 11-13 日，全球规模最大的嵌入式展览会——Embedded World 2025 将在德国纽伦堡盛大开幕。作为物联网和嵌入式技术领域的领先企业，乐鑫信息科技 (688018.SH) 将展示在 AI LLM、HMI、双频 Wi-Fi 6、低功耗 MCU 和 Matter 等领域的最新技术及解…...

编程日记 2025/9/18 15:57:08

人工智能基础之数学基础：01高等数学基础

函数极限按照一定次数排列的一列数:“，“,…,"…，其中u 叫做通项。对于数列{Un}如果当n无限增大时，其通项无限接近于一个常数A，则称该数列以A为极限或称数列收敛于A，否则称数列为发散， 极限值左…...

编程日记 2025/9/10 13:53:10

【从0做项目】Java搜索引擎（8）停用词表正则

阿华代码，不是逆风，就是我疯你们的点赞收藏是我前进最大的动力！！ 希望本文内容能够帮助到你！！ 目录文章导读零：项目结果展示一：前引二：停用词表 1：…...

编程日记 2025/9/10 9:40:48

线程和进程的区别

如果说一个服务器同一时刻收到了许多请求，针对每一个请求，操作系统都会产生一个进程，从而给这个请求提供一些服务 ，返回响应，如果请求处理完了，这个进程就要销毁了！如果请求很多的话&#xff0c…...

编程日记 2025/9/10 20:17:52

深入理解 QObject的作用

QObject 作为 Qt 库中所有对象的基类，其地位无可替代。几乎 Qt 框架内的每一个类，无论是负责构建用户界面的 QWidget，还是专注于数据处理与呈现的 QAbstractItemModel，均直接或间接继承自 QObject。这种继承体系赋予 Qt 类库高度的…...

编程日记 2025/9/19 15:14:54

解码 NLP：从萌芽到蓬勃的技术蜕变之旅

内容概况： 主要讲述NLP专栏的内容和NLP的发展及其在现代生活中的广泛应用。课程强调实践为主、理论为辅的学习方法，并通过多个生活场景展示了NLP技术的实际应用，如对话机器人、搜索引擎、翻译软件、电商推荐和智能客服等。这边我就不多做自我…...

编程日记 2025/9/15 18:21:46

【核心算法篇十五】《深度解析DeepSeek遗传算法：让超参数调优从“玄学”变“科学”的终极指南》

引言：超参数调优的“炼丹困局”与破局之路在机器学习的世界里，调参工程师常被戏称为"炼丹师"——面对动辄几十个超参数的复杂模型，我们就像古代术士守着炼丹炉，不断尝试各种参数组合，期待偶然炼出"仙丹"。传统网格搜索（Grid Search）需要遍历所有可…...

编程日记 2025/9/7 17:43:59

Python—变量、基本数据类型、类型的转换

文章目录 Python—变量、基本数据类型1 格式化输出2 号的使用3 变量的数据类型4 type() 函数的使用5 数据类型的基本介绍5.1 int 整型5.2 float 浮点类型5.3 bool 布尔类型5.4 str 字符串类型5.5 字符串驻留机制5.6 数据类型的转换（1）隐式转换&#xff…...

编程日记 2025/9/13 20:36:28

启明星辰规则库下载

启明星辰规则库下载一、脚本介绍 1、背景介绍因为项目上有启明星辰的安全设备、并且在内网无法直接连接互联网进行在线升级，必须使用离线升级模式，下载规则库升级，每月一更有点繁琐，所以写了这个b脚本，偷懒一下&a…...

编程日记 2025/9/15 18:00:10

uniapp 拖拽排序

1.拖拽排序使用 sortablejs库 npm install sortablejs --save-dev <template><view id"list"><view v-for"(item, index) in list" :key"item.id" class"item">{{ item.name }}</view></view> </t…...

编程日记 2025/9/15 9:53:32

测试。。。

移动到中位数位置能保证总移动距离最小，数学知识 #include <iostream> #include <vector> #include <cmath> using namespace std;int main() {int n;string s;cin >> n >> s;vector<int> positions;// 记录所有1的位置for (…...

编程日记 2025/9/7 17:43:52

Java常用设计模式及其应用场景

1. 什么是设计模式？ 设计模式是一个经过多次验证的、针对常见问题的可复用解决方案。设计模式并不是具体的代码实现，而是给出了如何解决问题的思路和结构。在实际开发过程中，设计模式有助于开发者快速找到合适的解决方案，从而减少…...

编程日记 2025/9/19 15:42:45

2000字，极简版华为数字化转型方法论

作为国内科技行业的领军者，华为的成功经验为众多企业提供了宝贵的借鉴。本文将围绕准备、规划和执行三个阶段展开，结合华为的实践案例，深入剖析其数字化转型的方法论，希望能为您的企业数字化转型提供有益的参考。一、数字化转型…...

编程日记 2025/9/19 23:15:17

Ubuntu：20.04更新cmake到更高版本

从输出信息可以看出，您当前的系统中已经安装了 cmake，但版本是 3.16.3，而您的项目需要 CMake 3.18 或更高版本。默认情况下，Ubuntu 20.04 的官方软件仓库中提供的 CMake 版本较低（如 3.16.3），因…...

编程日记 2025/9/15 21:52:35

【SpringBoot教程】Spring Boot + MySQL + Druid连接池整合教程

🙋大家好！我是毛毛张! 🌈个人首页： 神马都会亿点点的毛毛张前面毛毛张介绍过HikariCP连接池，今天毛毛张来介绍一下Druid连接池，SpringBoot 2.0以上默认使用HikariCP数据源，但是也要学会使用…...

编程日记 2025/9/19 9:47:27

基于SpringBoot实现的宠物领养系统平台功能一

一、前言介绍： 1.1 项目摘要宠物领养需求增加：随着人们生活水平的提高和对宠物养护意识的增强，越来越多的人选择领养宠物作为家庭的一员。这导致了宠物领养需求的显著增加。传统领养方式存在问题：传统的宠物领养方式&#xf…...

编程日记 2025/9/14 13:31:35

【DeepSeek 学C++】std::atomic 用于线程控制，和内存强顺序一致性

std::atomic<bool> workerTerminate_{}; std::atomic<bool> workerTerminate_{}; 是一个原子布尔变量的声明，变量名为 workerTerminate_。这种变量通常用于多线程编程中，用来控制或通知工作线程的终止。使用 std::atomic 可以确保对该变量的…...

编程日记 2025/9/14 8:59:49

计算存储一幅大小为 1024×10241024×1024、256 灰度级的图像所需的字节数

1. 图像的基本信息图像分辨率：1024102410241024，表示图像有 1024 行和 1024 列，总像素数为： 102410241,048,576 像素102410241,048,576 像素灰度级：256 灰度级，表示每个像素的灰度值可以用 256 个不同的值…...

编程日记 2025/9/20 12:56:13

Flutter 网络请求与数据处理：从基础到单例封装

Flutter 网络请求与数据处理：从基础到单例封装在 Flutter 开发中，网络请求是一个非常常见的需求，比如获取 API 数据、上传文件、处理分页加载等。为了高效地处理网络请求和数据管理，我们需要选择合适的工具并进行合理的封装。 …...

编程日记 2025/9/16 10:30:57

从开发到部署：EasyRTC嵌入式视频通话SDK如何简化实时音视频通信的集成与应用

嵌入式设备和视频综合管理平台均支持B/S架构。在B/S架构下，传统的视频观看方式依赖于微软的OCX控件，然而OCX控件的使用正面临越来越多的挑战： 首先，用户需要安装浏览器插件、调整浏览器安全级别，并允许ActiveX控件弹出…...

编程日记 2025/9/11 20:49:24

Jeesite5：Star24k,Spring Boot 3.3+Vue3实战开源项目,架构深度拆解！让企业级项目开发效率提升300的秘密武器

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法企业级应用开发的需求日益增长。今天，我们要介绍的是一个在GitHub上广受好评的开源项目——Jeesite5。这不仅是一个技术框架，更…...

编程日记 2025/9/20 8:59:45

C++(23)：lambda可以省略()

C越来越多的使用了lambda，C23也进一步的放宽了对lambda的限制，这一次，如果lambda没有参数列表，那么可以直接省略掉()： #include <iostream> using namespace std;void func() {auto f []{cout<<"in…...

编程日记 2025/9/19 20:35:04

vue3之echarts柱状图-圆锥加自动轮播

vue3之echarts柱状图-圆锥加自动轮播效果： 版本 "echarts": "5.4.2" 核心代码： <template><div ref"echartRef" class"chart"></div><svg><linearGradient v-for"(item, i…...

编程日记 2025/9/19 21:27:34

Qt中利用httplib调用https接口

httplib中如果要调用https接口，需要开启OPENSSL支持，经过半天坑爹得摸索，总结下经验。 1，下载并安装Win64OpenSSL 地址如下，我Qt版本是5.15.2 ，openssl选择的是 64位（Win64OpenSSL-3_3_3.msi…...

编程日记 2025/9/19 16:17:41

深度学习04 数据增强、调整学习率

目录数据增强常用的数据增强方法调整学习率学习率调整学习率调整学习率的方法有序调整等间隔调整多间隔调整指数衰减余弦退火自适应调整自定义调整数据增强数据增强是通过对训练数据进行各种变换（如旋转、翻转、裁剪等）&am…...

编程日记 2025/9/16 13:07:40

卷积神经网络之AlexNet经典神经网络，实现手写数字0~9识别

深度学习中较为常见的神经网络模型AlexNet，AlexNet 是一个采用 GPU 训练的深层 CNN，本质是种 LeNet 变体。由特征提取层的5个卷积层两个下采样层和分类器中的三个全连接层构成。先看原理： AlexNet网络特点采用 ReLU 激活函数，…...

编程日记 2025/9/20 12:33:18

建筑兔零基础自学python记录22|实战人脸识别项目——视频人脸识别（下）11

这次我们继续解读代码，我们主要来看下面两个部分； 至于人脸识别成功的要点我们在最后总结~ 具体代码学习： #定义人脸名称 def name():#预学习照片存放位置path M:/python/workspace/PythonProject/face/imagePaths[os.path.join(path,f) f…...

编程日记 2025/9/20 7:32:18

全球化趋势下中资企业出海投资及合规运营实战分享

企业全球化布局需构建“战略-架构-合规-运营”四位一体体系，通过灵活的投资架构、精准的税务规划、本土化运营和ESG融合，实现风险可控的海外扩张。核心策略包括： 供应链多节点布局（至少3个国家备份产能）；融…...

编程日记 2025/9/14 21:35:51

2025-2-19 leetcode刷题情况（二叉树）

一、226.翻转二叉树 1.题目描述给你一棵二叉树的根节点root，翻转这棵二叉树，并返回其根节点 2.代码 3.思路递归遍历（DFS）交换每个节点的左 / 右子节点，即可生成二叉树的镜像。递归解析： 终止条件&a…...

编程日记 2025/9/20 10:43:07

Linux常见命令

文件和目录操作命令 cd：用于切换目录。例如，cd /home/user 可进入 /home/user 目录；cd.. 可返回上一级目录。ls：用于列出目录内容。ls 直接列出当前目录下的文件和文件夹；ls -l 以详细列表形式显示；ls -a 显…...

编程日记 2025/9/9 21:19:38

C++ 一篇读懂“值传递”和“地址传递”

让我们通过一个简单的、形象的比喻来帮助你理解“值传递”和“地址传递”是如何影响实参的。 1. 值传递想象你有一个 **信封**（代表变量），里面放着一张纸条（代表数据）。你决定把这个信封寄给一个朋友，让他…...

编程日记 2025/9/18 15:50:53

我用AI做数据分析之数据清洗

我用AI做数据分析之数据清洗 AI与数据分析的融合效果怎样？ 这里描述自己在使用AI进行数据分析（数据清洗）过程中的几个小故事： 1. 变量名的翻译有一个项目是某医生自己收集的数据，变量名使用的是中文，分…...

编程日记 2025/9/17 23:09:01

韩国哈希散列算法DHA-256

韩国哈希散列算法DHA-256 DHA-256是在2005年11月由NIST举行的Hash研讨会(Cryptographic Hash Workshop)上提出的。DHA-256压缩函数将长度为512比特的分组，压缩成长度为256比特的串，总共迭代64步，扩展的消息字在步函数中使用了两次。 DHA-25…...

编程日记 2025/9/16 8:12:38

【愚公系列】《Python网络爬虫从入门到精通》022-Splash的爬虫应用

标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度…...

编程日记 2025/9/20 7:31:05

Golang深度学习

前言在2009年，Google公司发布了一种新的编程语言，名为Go（或称为Golang），旨在提高编程效率、简化并发编程，并提供强大的标准库支持。Go语言的设计者们希望通过Go语言能够解决软件开发中的一些长期存在的问…...

编程日记 2025/9/18 15:44:03

React（8）

封装评论列表的Item组件实现父传子以及子组件调用父组件方法 import { useEffect, useState } from "react"; import "./index.css"; import _ from "lodash"; import classNames from "classnames"; import axios from "axio…...

编程日记 2025/9/19 19:40:33

自制AirTag，支持安卓/鸿蒙/PC/Home Assistant，无需拥有iPhone

苹果的AirTag很贵，虽然某强北有平价代替品，但是仍需要苹果设备才能绑定，才能查看位置。不支持安卓/鸿蒙/PC，也不支持集成到Home Assistant中。 AirTag 的原理每个AirTag都会发送一个蓝牙信号，其可以被临近的苹果设备…...

编程日记 2025/9/16 7:30:07

docker修改镜像默认存储路径（基于页面迁移）

文章目录 1、停止服务2、拷贝镜像3、docker界面设置路径4、重新启动服务5、重启电脑 1、停止服务桌面底部右键打开任务管理器停止docker服务 2、拷贝镜像从原目录拷贝到新的目录下，新的目录自己定，如果没有权限，需要先对原文件添加权限…...

编程日记 2025/9/15 12:26:04

10. 软件设计架构-经典架构问题

文章目录前言一、高并发场景下的系统崩溃1. 问题描述2. 解决方案：3. 案例分析：电商秒杀系统二、单体架构到微服务的拆分陷阱1. 问题描述2. 解决方案：3. 案例分析：在线教育平台拆分三、分布式系统中的数据一致性难题1. 问题描述…...

编程日记 2025/9/18 17:32:06

Qt学习（五）自定义对话框，多窗口开发---添加设计师类， MDI多窗口开发

一对话框实现功能：打开文件，选择目录，保存文件，选择颜色，选择字体，输入信息， 消息提示框 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow>QT_BEGIN_NAMESPACE na…...

编程日记 2025/9/11 12:20:36

【部署优化篇三】《DeepSeek边缘计算实战：把目标检测模型塞进树莓派，让AI在巴掌大的设备上“开天眼“》

“谁说只有超级计算机才能跑AI？今天咱们就要在树莓派上玩转DeepSeek目标检测，让这个巴掌大的小盒子变成会‘看’世界的智能终端！” 本文手把手教你从零开始，把最潮的目标检测模型塞进树莓派。全程高能预警，建议准备好你的树莓派4B/5和散热风扇，咱们这就开启边缘计算的魔法…...

编程日记 2025/9/15 10:08:17

深入浅出CSS复合选择器：掌控元素关系与层级选择

目录前言一、子代选择器（Descendant Selector） 1. 什么是子代选择器？ 2. 基本语法 3. 示例 4. 注意事项二、直接子元素选择器（Child Selector） 1. 什么是直接子元素选择器？ 2. 基本语法 3. 示例…...

编程日记 2025/9/15 14:09:05

资料