SpringBoot+Vue集成富文本编辑器

1.引入

我们常常在各种网页软件中编写文档的时候，常常会有富文本编辑器，就比如csdn写博客的这个页面，包含了富文本编辑器，那么怎么实现呢？下面来详细的介绍！

2.安装wangeditor插件

在Vue工程中，安装一个叫作wangeditor的插件时，得先回退到根目录，然后再下载，如下

#回退到根目录
cd ..
#下载wangeditor
npm install wangeditor --save

安装好的效果如下： 

3.导入wangeditor插件

在<script>标签内导入插件

import E from "wangeditor"

在data封装数据区中添加editor变量 

editor:null,

一般来说，我们的富文本编辑器都会添加在新增文档页面，将样式添加到添加新闻的样式里，如下：

在这个新增新闻样式对应的函数处，添加以下程序，如下

  • this.$nextTick(() => {...}): 这行代码调用$nextTick方法，传入一个回调函数。这个回调函数将在DOM更新完成后执行。简单地说就是，这个函数里的代码，会在整个页面加载完之后再执行

  • this.editor = new E('#editor'):创建一个E实例，并将其给刚刚我们在data数据区里创建的editor变量，参数是刚刚我们在新增新闻那一块写的<div>的id

  • this.editor.create():创建富文本编辑器

4. 样式展示

5.完善功能

5.1.销毁编辑器

如果不销毁编辑器，那么下一次点开，里面的内容还会停留在上一次关闭的时候，如下，内容部分还是上一次编辑的内容，按理来说应该清空，下面来看看怎么实现 

Element UI中的dialog对话框有一个close事件，这是在关闭对话框之后，会执行的事件，给我们自己的对话框添加上这个事件

然后在函数里添加销毁编辑器的代码，如下：

   //销毁编辑器closeDialog(){this.editor.destroy()this.editor = null;},

5.2.将新闻内容添加到数据库中

在提交函数中添加以下程序

  • 第一行：获取编辑框的内容
  • 第二行：将获取的内容赋值给data数据区里的content

之后请求会将addPatientInfo交给后端，用来向数据库提交新闻内容，详情代码看之前的博客

//获得编辑框的内容
let content = this.editor.txt.html()
this.addPatientInfo.content = content

5.3.编辑新闻功能

同样的，将之前create富文本编辑器的代码在编辑函数中ctrl+c/v一个，这样，当我们点击编辑按钮时，也能看到这个富文本编辑器，同时代码还添加了一个回显功能，在插槽中使用我们自定义的scope参数可以访问到插槽内的数据，scope.row是获取一行的数据，它作为参数传到了handleEdit里

 5.4.解决新闻内容样式问题

在列表的内容模块会显示新闻的内容，但是如果新闻内容较多，那么在这个列表中再显示，就显得不太美观，并且其显示的格式影响观看，如下

所以我们要把这个内容模块，加一个按钮，点击按钮之后单独来到一个对话框进行显示，代码如下：

<!--对话框代码-->
<el-dialog title="新闻内容" :visible.sync="formVisable1" style="width: 100%"><div><div v-html="content"></div><div slot="footer" class="dialog-footer"><el-button type="primary" size="mini" @click="formVisable1 = false">确 定</el-button></div></div></el-dialog>

添加一个插槽即可，并且像刚刚上面讲得编辑功能那样，获取新闻内容，并且在对话框里显示出来

将函数获取的content，交给全局变量content，然后在在对话框里的v-html中绑定起来，就能实现在对话框里展示新闻内容，效果如下：

还有一个问题：当我们点开展示内容按钮之后，发现格式不对，我写的时候明明是用的表格，但是这里展示的格式却不匹配

编辑的时候： 

 点击显示内容的时候：

那么如何修复这个问题呢？ 

进入到能显示富文本格式的页面，比如编辑新闻的页面，查看页面元素，找到富文本表格样式跟前的代码，然后找到下面一个类名：

 w-e-text   我们把这个类名添加到我们自己显示新闻内容的div处，如下：

这样就ok了

当我们在再次点击展示内容的按钮后，所展示的样式就匹配了,如下所示

 5.5.上传图片功能

原本的富文本编辑器的上传文件的功能，只能是输入图片的url路径来上传，这样太烂了，所以要扩展下这个上传功能

给前端创建富文本编辑器的函数里添加下面的代码

//图片上传的配置
this.editor.config.uploadImgServer = 'http://localhost:8082'+'/file/editor/upload'
this.editor.config.uploadFileName = 'file'

其中，第一行是wangeditor提供的请求接口，后面的url写后端接口地址，第二行是上传的文件名称，和后端接口的参数名称保持一致，当有了这两行代码之后，我们就开始写后端的接口程序，如下 

//上传图片@PostMapping("/editor/upload")public Dict editorUpload(MultipartFile file) throws IOException {//获取文件原始名称String originalFilename = file.getOriginalFilename();//获取文件后缀(含这个".")String suffixFileName = originalFilename.substring(originalFilename.lastIndexOf("."));//使用UUID重新给文件命名，为了防止重名String currentFileName = UUID.randomUUID().toString() + suffixFileName;//创建一个文件目录对象File dir = new File(filePath);//如果这个路径不存在,就创建一个if (!dir.exists()){dir.mkdir();}//将file指向的文件移动到由basePath+fileName指定的新路径file.transferTo(new File(filePath + currentFileName));//返回文件链接，这个链接就是文件的下载地址，这个下载地址是后台提供的String url = "http://localhost:8082/file/download/" + currentFileName;System.out.println(url);//hutool提供的HashMapreturn Dict.create().set("errno",0).set("data",CollUtil.newArrayList(Dict.create().set("url",url)));}

这个文件上传的程序，在我之前的博客里有详细的讲解，这里只是解释下，针对这个富文本编辑器而添加的部分

  • 首先是采用了Hutool工具类下的一个HashMap，叫作Dict
  • 然后按照wangeditor官方提供的后端返回类型编写程序对应上面程序的return的部分，如下：
  • {
      "errno": 0,
      "data": [
        {
          "url": "这里是URL的值"
        }
      ]
    } 

 演示如下：

5.6.上传视频功能

有了图片上传，那么视频上传也得有！ 同样的，上传视频原本的格式非常不方便

我们同样的在前端创建富文本编辑器的函数里添加wangeditor提供的上传视频的配置代码 

 //视频上传的配置this.editor.config.uploadVideoServer = 'http://localhost:8082'+'/file/editor/video/upload'this.editor.config.uploadVideoName = 'file'

 添加了之后，前端视频上传样式就会发生变化

接着来写后端接口的代码，与上传图片后端接口代码唯一的区别就是，wangeditor要求返回的格式不一样，如下：

{

  "errno": 0,
  "data": {
      "url": "这里是URL的值"

   }
} 

 //上传视频@PostMapping("/editor/video/upload")public Dict editorVideoUpload(MultipartFile file) throws IOException {//获取文件原始名称String originalFilename = file.getOriginalFilename();//获取文件后缀(含这个".")String suffixFileName = originalFilename.substring(originalFilename.lastIndexOf("."));//使用UUID重新给文件命名，为了防止重名String currentFileName = UUID.randomUUID().toString() + suffixFileName;//创建一个文件目录对象File dir = new File(filePath);//如果这个路径不存在,就创建一个if (!dir.exists()){dir.mkdir();}//将file指向的文件移动到由basePath+fileName指定的新路径file.transferTo(new File(filePath + currentFileName));//返回文件链接，这个链接就是文件的下载地址，这个下载地址是后台提供的String url = "http://localhost:8082/file/download/" + currentFileName;System.out.println(url);//hutool提供的HashMapreturn Dict.create().set("errno",0).set("data",Dict.create().set("url",url));}

如果在之前的业务里加了JWTtoken验证，那么在前端的请求头要加上token，代码如下：

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于 SpringBoot + Vue 的图书购物商城项目

基于 SpringBoot + Vue 的图书购物商城项目

本项目是一个基于 SpringBoot 和 Vue 的图书购物商城系统。系统主要实现了用户注册、登录&#xff0c;图书浏览、查询、加购&#xff0c;购物车管理&#xff0c;订单结算&#xff0c;会员折扣&#xff0c;下单&#xff0c;个人订单管理&#xff0c;书籍及分类管理&#xff0c;用…
阅读更多...
PCL 使用列文伯格-马夸尔特法计算变换矩阵

PCL 使用列文伯格-马夸尔特法计算变换矩阵

目录 一、算法原理1、计算过程2、主要函数3、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫与GPT。 一、算法原理 1、计算过程 2、主要函数 void pcl
阅读更多...
EXCEL快速填充空白内容

EXCEL快速填充空白内容

** EXCEL快速填充空白内容 ** 1.全选所有需要填充的内容&#xff0c;按住电脑的F5或者CTRLG点击定位 2.可以看到空白处被自动选定&#xff0c;之后按电脑和⬆&#xff0c;最后CTRLenter 可以看到空白处已经被填充。
阅读更多...
计网入门还没到放弃

计网入门还没到放弃

TCP报文段格式 源端口&#xff1a;标识报文的返回地址 目的端口&#xff1a;指明计算机上的应用程序接口 序号&#xff1a;通过SYN包传给接收端主机&#xff0c;每传送一次就1&#xff0c;用来解决网络包乱序的问题。 确认号&#xff1a;期望下一次收到的数据的序列号&#xff…
阅读更多...
酷开科技用酷开系统打造数字化家庭娱乐与教育的新天地

酷开科技用酷开系统打造数字化家庭娱乐与教育的新天地

家庭教育的重要性不言而喻&#xff0c;俗话说&#xff1a;父母是孩子的第一任老师&#xff0c;也是终生的老师。一个人是否能够成长成才&#xff0c;家庭教育是基础和前提&#xff0c;学校教育能够起到促进和引导作用&#xff0c;社会教育也会对一个人的成长产生重要影响。在数…
阅读更多...
【YOLOv5/v7改进系列】引入PConv——轻量快速的卷积块

【YOLOv5/v7改进系列】引入PConv——轻量快速的卷积块

一、导言 《奔跑吧&#xff0c;别走&#xff1a;追求更高的FLOPS以实现更快的神经网络》&#xff0c;主要探讨了如何设计快速且高效的神经网络模型。文章指出&#xff0c;尽管许多研究致力于减少浮点运算次数(FLOPs)来提升模型速度&#xff0c;但FLOPs的减少并不直接等同于延迟…
阅读更多...
Zookeeper部署

Zookeeper部署

Zookeeper部署 下载安装包Linux解压安装包修改配置文件编辑zoo.cf配置 启动服务停止服务常用zookeeper指令查看namespace列表创建namespace删除namespace 注意&#xff1a;该文章为简单部署操作&#xff0c;没有复杂的配置内容&#xff0c;用的是3.7.2版本。 下载安装包 进入z…
阅读更多...
python爬虫需要什么HTTP代理？

python爬虫需要什么HTTP代理？

用来爬虫的话&#xff0c;还是建议用高匿名代理&#xff0c;但显然题主用了高匿名代理还是出现了一部分问题&#xff0c;我们可以先找到问题关键再解决它&#xff0c;一般爬虫用了高匿名代理出现被封会有以下几种原因&#xff1a; 1.代理IP的质量不过关 一般来说每个网站都有…
阅读更多...
秋招突击——6/20——复习{（单调队列优化）——最大子序列和，背包问题——宠物小精灵收服问题}——新作{两两交换链表中的节点}

秋招突击——6/20——复习{（单调队列优化）——最大子序列和，背包问题——宠物小精灵收服问题}——新作{两两交换链表中的节点}

文章目录 引言复习单调队列优化——最大子序列和思路分析实现代码参考实现 背包问题——宠物小精灵的收服问题个人实现参考实现 新作两两交换链表中的节点个人实现参考实现 删除有序数组中的重复项个人实现知识补全迭代器的访问和控制vector删除特定的元素erasevector底层删除元…
阅读更多...
PHP 数组排序详解与实例

PHP 数组排序详解与实例

在PHP编程中&#xff0c;数组是一种非常常见和重要的数据结构&#xff0c;而对数组进行排序则是处理和展示数据时必不可少的操作之一。本文将详细介绍PHP中数组排序的各种方法、函数和示例&#xff0c;帮助您掌握如何根据不同需求对数组进行排序。 1. PHP 中的数组排序函数 PH…
阅读更多...
Consul入门笔记

Consul入门笔记

简介 Consul&#xff0c;HashiCorp公司推出的开源工具&#xff0c;用于实现分布式系统的服务发现与配置。与其他分布式服务注册与发现的方案&#xff0c;Consul的方案更一站式&#xff0c;内置服务注册与发现框架、分布一致性协议实现、健康检查、K/V存储、多数据中心方案&…
阅读更多...
面试-java并发与多线程的部分函数

面试-java并发与多线程的部分函数

1.sleep和wait的区别 基本的差别&#xff1a; Sleep是Thread的方法。Wait是object方法。Wait不传参&#xff0c;最终也是调用wait(native)的传参方法。 Sleep方法可以在任何地方使用。 Wait方法只能在synchronized方法或synchronized方法块中使用。 最主要的本质区别&#xf…
阅读更多...
【NOI】C++程序结构入门之嵌套循环一

【NOI】C++程序结构入门之嵌套循环一

文章目录 前言一、嵌套循环1.概念2.语法2.1 for循环嵌套for2.2 while循环嵌套for2.3 while循环嵌套while2.4for循环嵌套while2.5 注意2.5.1内层循环之前2.5.2内层循环之后 3.按位检查 二、例题讲解问题&#xff1a;1448. 随机体能测试问题&#xff1a;1469. 数的统计问题&#…
阅读更多...
vue中图谱关系插件relation-graph

vue中图谱关系插件relation-graph

vue中图谱关系插件relation-graph 一、效果图二、安装下载&#xff08;vue2.0版本的&#xff09;三、直接上代码 一、效果图 二、安装下载&#xff08;vue2.0版本的&#xff09; npm install --save relation-graph var foo bar;三、直接上代码 <template><div cla…
阅读更多...
【从0实现React18】 (五) 初探react mount流程 完成核心递归流程

【从0实现React18】 (五) 初探react mount流程 完成核心递归流程

更新流程的目的&#xff1a; 生成wip fiberNode树标记副作用flags 更新流程的步骤&#xff1a; 递&#xff1a;beginWork归&#xff1a;completeWork 在 上一节 &#xff0c;我们探讨了 React 应用在首次渲染或后续更新时的整体更新流程。在 Reconciler 工作流程中&#xff…
阅读更多...
LLC开关电源开发：LLC设计参考文档（模态分析）

LLC开关电源开发：LLC设计参考文档（模态分析）

电源简析和全桥LLC模型分析 1.1模拟电源、开关电源和数字电源简介 1.1.1 模拟电源 模拟电源&#xff1a;即变压器电源&#xff0c;通过铁芯、线圈来实现&#xff0c;线圈的匝数决定了两端的电压比&#xff0c;铁芯的作用是传递变化磁场&#xff0c;&#xff08;我国&#xff09…
阅读更多...
摒弃反模式：使用Kotlin委托优化Android BaseActivity

摒弃反模式：使用Kotlin委托优化Android BaseActivity

摒弃反模式&#xff1a;使用Kotlin委托优化Android BaseActivity 在Android开发中&#xff0c;许多开发者习惯于创建名为“BaseActivity”或“BaseFragment”的基类&#xff0c;以便在所有Activity或Fragment中共享一些通用行为。这种方法乍一看似乎是个好主意&#xff0c;但实…
阅读更多...
零基础女生如何入门人工智能，从哪里下手？学习时间大概要多久？

零基础女生如何入门人工智能，从哪里下手？学习时间大概要多久？

作为一个理工科早期毕业生&#xff0c;出于近乎本能的敏感&#xff0c;格外关注全网热议的ChatGPT。 本来国内就业环境就不好&#xff0c;各行各业内卷越来越严重&#xff0c;加上人工智能的异军突起&#xff0c;各行各业势必将迎来科技进步跨时代的巨大冲击&#xff0c;在此情…
阅读更多...
000005 - HDFS 读写流程

000005 - HDFS 读写流程

HDFS 读写流程 1 HDFS 写数据流程1.1 HDFS 写数据流程图1.2 HDFS 写数据之网络拓扑 - 节点距离计算1.3 机架感知&#xff08;副本存储节点选择&#xff09; 2 HDFS 读数据流程2.1 HDFS 读数据流程图 3 HDFS 如何做到机架感知 1 HDFS 写数据流程 1.1 HDFS 写数据流程图 &#x…
阅读更多...
【代码随想录刷题】day02——977.有序数组的平方 ，209.长度最小的子数组 ，59.螺旋矩阵II

【代码随想录刷题】day02——977.有序数组的平方 ，209.长度最小的子数组 ，59.螺旋矩阵II

977.有序数组的平方 方法一&#xff1a;暴力法 class Solution { public:vector<int> sortedSquares(vector<int>& nums) {// 暴力法for(int i 0; i < nums.size(); i){nums[i] * nums[i];}sort(nums.begin(), nums.end());return nums;} };方法二&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023