【SpringBoot篇】添加富文本编辑器操作

文章目录

  • 🍔使用步骤
    • ⭐首先我们需要安装富文本编辑器
    • ⭐在<script>中引入富文本编辑器
    • ⭐富文本图片上传接口
    • ⭐初始化富文本编辑器
    • ⭐调用 初始化富文本编辑器的方法
      • 🎈新增
      • 🎈编辑
      • 🎈保存
    • ⭐添加按钮
    • ⭐实现viewEditor函数
      • 🎈实现对话框viewData
    • ⭐在data中初始化2个变量
    • ⭐在对话框里面可以加上一个close回掉,取消的按钮也加一个cancel
    • ⭐cancel函数
  • 🌺效果

在这里插入图片描述
富文本编辑器是一种能够编辑和展示富文本内容的工具或程序。与纯文本编辑器不同,富文本编辑器可以处理文本的格式、样式、布局等方面,使文本更加丰富多样。

富文本编辑器通常提供以下功能:

文字样式: 可以设置字体、字号、颜色、粗体、斜体、下划线等文字样式。

段落样式: 可以设置标题、段落对齐方式、缩进等段落样式。

列表: 可以创建有序或无序列表,方便排列项目或要点。

插入图片和视频: 可以插入图片和视频文件,丰富文本内容。

超链接: 可以插入超链接,使文本具有跳转功能。

表格: 可以插入和编辑表格,方便制作数据的展示。

复制粘贴: 可以复制和粘贴文本、图像等内容,方便从其他地方导入内容。

撤销和重做: 可以撤销和重做编辑操作,方便恢复或修改之前的操作。

富文本编辑器wangeditor官方文档:https://www.wangeditor.com/v4

🍔使用步骤

⭐首先我们需要安装富文本编辑器

在控制台输入下面的命令

npm i wangeditor --save

在这里插入图片描述

⭐在

我们在需要使用富文本编辑器的地方进行引入
下面我们在商品模块进行引入(这样商家就可以编辑商品信息,上传图片等操作,从而方便进行售卖)

import E from 'wangeditor'

在这里插入图片描述

⭐富文本图片上传接口

上传图片

/**
 * wang-editor编辑器文件上传接口
 */
@PostMapping("/wang/upload")
public Map<String, Object> wangEditorUpload(MultipartFile file) {
    String flag = System.currentTimeMillis() + "";
    String fileName = file.getOriginalFilename();
    try {
        // 文件存储形式:时间戳-文件名
        FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName);
        System.out.println(fileName + "--上传成功");
        Thread.sleep(1L);
    } catch (Exception e) {
        System.err.println(fileName + "--文件上传失败");
    }
    String http = "http://" + ip + ":" + port + "/files/";
    Map<String, Object> resMap = new HashMap<>();
    // wangEditor上传图片成功后, 需要返回的参数
    resMap.put("errno", 0);
    resMap.put("data", CollUtil.newArrayList(Dict.create().set("url", http + flag + "-" + fileName)));
    return resMap;
}

在这里插入图片描述

⭐初始化富文本编辑器

let editor
function initWangEditor(content) {	setTimeout(() => {
  if (!editor) {
    editor = new E('#editor')
    editor.config.placeholder = '请输入内容'
    editor.config.uploadFileName = 'file'
    editor.config.uploadImgServer = 'http://localhost:9090/files/wang/upload'
    editor.create()
  }
  editor.txt.html(content)
}, 0)
}

在这里插入图片描述

⭐调用 初始化富文本编辑器的方法

🎈新增

initWangEditor('')

在这里插入图片描述

🎈编辑

initWangEditor(this.form.description || '')

在这里插入图片描述

🎈保存

this.form.description = editor.txt.html()

在这里插入图片描述


上面我们添加了富文本编辑器的操作,首先了上传图片的功能,但是我们要查看图片应该怎么办呢

我们可以添加一个按钮操作,点击按钮后,就可以进行查看
在这里插入图片描述

⭐添加按钮

表格上面加一个点击查看的按钮:

<el-table-column prop="description" label="商品描述">
  <template slot-scope="scope">
    <el-button type="success" @click="viewEditor(scope.row.description)">点击查看</el-button>
  </template>
</el-table-column>

在这里插入图片描述
我们点击按钮后,会调用viewEditor,下面我们来实现viewEditor函数

⭐实现viewEditor函数

viewEditor(content) {
  this.viewData = content
  this.editorVisible = true
},

在这里插入图片描述

🎈实现对话框viewData

<el-dialog title="商品介绍" :visible.sync="editorVisible" width="50%">
  <div v-html="this.viewData" class="w-e-text"></div>
</el-dialog>

在这里插入图片描述

⭐在data中初始化2个变量

data() {
    return {
      editorVisible: false,
      viewData: null
    }
  },

在这里插入图片描述

⭐在对话框里面可以加上一个close回掉,取消的按钮也加一个cancel

<el-button @click="cancel">取 消</el-button>

在这里插入图片描述

⭐cancel函数

cancel() {
  this.fromVisible = false
  location.href = '/goods'
},

在这里插入图片描述

🌺效果

在这里插入图片描述

在技术的道路上,我们不断探索、不断前行,不断面对挑战、不断突破自我。科技的发展改变着世界,而我们作为技术人员,也在这个过程中书写着自己的篇章。让我们携手并进,共同努力,开创美好的未来!愿我们在科技的征途上不断奋进,创造出更加美好、更加智能的明天!

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Vue】后端返回文件流,前端预览文件

let date;request({url: this.$route.query.url,method: get,responseType: blob,}).then(resp > {date respthis.path window.URL.createObjectURL(new Blob([resp], {type: "application/pdf"}))}).catch((e) > {//旧版本浏览器下的blob创建对象window.Blo…

网站防御爬虫攻击有哪些方式

很多网站都深受爬虫困扰&#xff0c;网站在被爬虫大量抓取的的时候经常容易被爬虫把服务器资源抓崩了&#xff0c;有的时候&#xff0c;同行也会来爬取我们网站进行数据采集&#xff0c;影响我们站点的原创性&#xff0c;那么如何进行相对应的防护还是非常重要的&#xff01; …

Nacos 高级详解

一 、服务集群 1 需求 服务提供者搭建集群 服务调用者&#xff0c;依次显示集群中各服务的信息 2 搭建 1&#xff09;修改服务提供方的controller&#xff0c;打印服务端端口号 package com.czxy.controller;import org.springframework.web.bind.annotation.*;import …

2024 年 SEO 您需要了解的 8 个关键 SEO 趋势

SEO的未来正趋向于更加以用户为中心、合乎道德和技术先进的方法。 为什么&#xff1f; 人工智能 &#xff08;AI&#xff09; 和机器学习在搜索引擎中的兴起使他们能够更好地理解用户意图并提供更相关的结果Google 将经验、专业知识、权威性和可信度 &#xff08;E-E-A-T&…

C# wpf 获取控件刷新的时机

文章目录 前言一、为何要获取刷新时机&#xff1f;例子一、隐藏控件后截屏例子二、修改控件大小后做计算 二、如何实现&#xff1f;1.使用动画2.使用TaskCompletionSource 三、完整代码四、使用示例1、隐藏工具条截屏2、修改宽高后获取ActualWidth、ActualHeight 总结 前言 做…

export CUDA_HOME=/usr/local/cuda-11.8

echo $CUDA_HOM export CUDA_HOME/usr/local/cuda-11.8

MATLAB二维与三维绘图实验

本文MATLAB源码&#xff0c;下载后直接打开运行即可[点击跳转下载]-附实验报告https://download.csdn.net/download/Coin_Collecter/88740747 一、实验目的 掌握图形对象属性的基本操作。掌握利用图形对象进行绘图操作的方法。 二、实验内容 利用图形对象绘制曲线&#xff…

如何使用服务器?

文章目录 如何使用服务器&#xff1f;一、工具二、第一种方法三、第二种方法四、实例 个人经验 如何使用服务器&#xff1f; 本文详细介绍了如何利用服务器跑模型&#xff0c;具体流程如下&#xff1a; 一、工具 ToDeskPyCharm Professional移动硬盘JetBrains GatewayGit 二…

什么是用户态和内核态?用户态和内核态是如何切换的?

一、什么是用户态和内核态&#xff1f; 1.1、概述 用户态和内核态是操作系统的两种运行状态。 内核态&#xff1a;处于内核态的 CPU 可以访问任意的数据&#xff0c;包括外围设备&#xff0c;比如网卡、硬盘等&#xff0c;处于内核态的 CPU 可以从一个程序切换到另外一个程序…

【Rust学习】安装Rust环境

本笔记为了记录学习Rust过程&#xff0c;内容如有错误请大佬指教 使用IDE&#xff1a;vs code 参考教程&#xff1a;菜鸟教程链接: 菜鸟教程链接: Rust学习 Rust入门安装Rust编译环境Rust 编译工具 构建Rust 工程目录 Rust入门 安装Rust编译环境 因为我已经安装过VSCode了&am…

数据结构中的一棵树

一、树是什么&#xff1f; 有根有枝叶便是树&#xff01;根只有一个&#xff0c;枝叶可以有&#xff0c;也可以没有&#xff0c;可以有一个&#xff0c;也可以有很多。 就像这样&#xff1a; 嗯&#xff0c;应该是这样&#xff1a; 二、一些概念 1、高度 树有多高&#x…

正点原子imx6ull网络环境配置:开发板和电脑通过网线直连、电脑WiFi上网

1.硬件连接 开发板通过网线连接电脑。电脑连接wifi 2.VMware设置 2.1添加桥接模式和NAT模式 1&#xff09;打开vm设置 2&#xff09;设置网络适配器为桥接模式&#xff0c;不要勾选 “赋值物理网络连接状态” 3&#xff09; 添加一个网络适配器并设置成NAT模式&#xff0c;…

力扣hot100 颜色分类 双指针 滚动赋值

Problem: 75. 颜色分类 文章目录 思路解题方法复杂度Code&#x1f496; 超简洁版 思路 解题方法 描述你的解题方法 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( 1 ) O(1) O(1) Code class Solution { public void sortColors(int[] nums){int n nums.length…

QGroundControl Qt安卓环境搭建及编译出现的问题

记录Qt 5.15.2搭建安卓环境出现的各种问题。 zipalign tool not found: D:/JavaAndroid/Android/sdk/build-tools//zipalign.exe&#xff1f; 答&#xff1a;需要将DANDROID_PLATFORM升级到已下载的版本. bin/llvm-readobj.exe: error: unknown argument ‘–libs’ 答&…

社交媒体数据分析:解读Facebook用户行为

在当今数字化时代&#xff0c;社交媒体已经成为人们生活不可或缺的一部分&#xff0c;而Facebook作为这个领域的巨头&#xff0c;承载了数十亿用户的社交活动。这庞大的用户群体产生了海量的数据&#xff0c;通过深度数据分析&#xff0c;我们能够深入解读用户行为&#xff0c;…

乐鑫科技业绩超预期修复,Wi-Fi芯片龙头走出“V底”了?

2024年伊始&#xff0c;又到了A股开始业绩披露的时间节点。 尽管A股业绩预告序幕刚刚拉开&#xff0c;但为数不多的企业预告似乎还是透露出某些信号&#xff1a;2023年国内半导体企业的业绩或许并没有想象中的“差”&#xff0c;相反正在逐渐改善。 通过同花顺问财进行筛选发…

php反序列化漏洞基础

一、序列化 serialize(): 序列化是将对象或类转换为字符串的过程,以便在程序运行过程中对其进行持久化存储或传输的操作。在PHP中,序列化主要用于将类对象或数组转换成字节流的形式,以便于存储在磁盘或传输到其他系统。 通过序列化,可以将对象或类转换成一串字符串,然后可…

PPO 跑CartPole-v1

gym-0.26.2 cartPole-v1 参考动手学强化学习书中的代码,并做了一些修改 代码 import gym import torch import torch.nn as nn import torch.nn.functional as F import numpy as np import matplotlib.pyplot as plt from tqdm import tqdmclass PolicyNet(nn.Module):def __…

2024最新PyQt5及其工具(Qt Designer、PyUIC、PyRcc)手把手操作实践指南

2024最新PyQt5及其工具&#xff08;Qt Designer、PyUIC、PyRcc&#xff09;手把手操作实践指南 前言 最近做了一些个人项目&#xff0c;内部逻辑还是挺多的&#xff0c;而且也有想要开源的想法&#xff0c;但是总不能直接把源码端给大家直接运行&#xff0c;有一些需求还有萌…

ubuntu设置每天定时关机

ubuntu设置每天定时关机 终端输入命令&#xff1a; sudo crontab -e输入密码&#xff0c;回车。 我这里使用nano作为编辑器&#xff0c;你可以选择vim。 在末尾输入以下命令&#xff1a; 59 23 * * * sudo -u root shutdown now设置&#xff1a;每天23:59分&#xff0c;电脑…