脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → SpringBoot添加富文本编辑器

SpringBoot添加富文本编辑器操作步骤

 更新时间：2024年01月18日 09:03:04   作者：在下小吉.  
富文本编辑器是一种能够编辑和展示富文本内容的工具或程序,与纯文本编辑器不同,富文本编辑器可以处理文本的格式、样式、布局等方面,使文本更加丰富多样,本文给大家介绍了SpringBoot添加富文本编辑器操作步骤,需要的朋友可以参考下

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

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

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

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

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

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

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

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

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

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

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

使用步骤

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

在控制台输入下面的命令

npm i wangeditor --save

在这里插入图片描述

在<script>中引入富文本编辑器

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

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;
}
/**
 * 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'
},

在这里插入图片描述

效果

在这里插入图片描述

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

以上就是SpringBoot添加富文本编辑器操作步骤的详细内容，更多关于SpringBoot添加富文本编辑器的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Mybatis-plus和Mybatis出现版本不兼容的问题解决

    Mybatis-plus和Mybatis出现版本不兼容的问题解决

    MyBatis-Plus 与 MyBatis 之间的兼容性问题通常是由于版本不匹配引起的,本文主要介绍了Mybatis-plus和Mybatis出现版本不兼容的问题解决,具有一定的参考价值,感兴趣的可以了解一下
    2024-08-08
  • JMeter中Java Request采样器的使用指南

    JMeter中Java Request采样器的使用指南

    Apache JMeter 是一款功能强大的性能测试工具,支持多种协议和测试场景,JMeter还允许通过 Java Request采样器 调用自定义的Java代码,本文将详细介绍如何在JMeter中使用Java Request采样器,需要的朋友可以参考下
    2025-02-02
  • SpringBoot整合Redis的实现示例

    SpringBoot整合Redis的实现示例

    本文主要介绍了SpringBoot整合Redis的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • SpringBoot+Mybatis plus+React实现条件选择切换搜索实践

    SpringBoot+Mybatis plus+React实现条件选择切换搜索实践

    本文主要介绍了SpringBoot+Mybatis plus+React实现条件选择切换搜索实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Spring基于注解配置AOP详解

    Spring基于注解配置AOP详解

    这篇文章主要介绍了Spring基于注解配置AOP详解,Spring 的 AOP 功能是基于 AspectJ 实现的,支持使用注解声明式定义 AOP 切面,Spring 基于注解配置 AOP 需要启用 AspectJ 自动代理功能,需要的朋友可以参考下
    2023-09-09
  • Mybatis返回int或者Integer类型报错的解决办法

    Mybatis返回int或者Integer类型报错的解决办法

    这篇文章主要介绍了Mybatis返回int或者Integer类型报错的解决办法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-12-12
  • Springboot项目使用拦截器方法详解

    Springboot项目使用拦截器方法详解

    这篇文章主要介绍了Springboot项目使用拦截器方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • java模拟http的Get/Post请求,并设置ip与port代理的方法

    java模拟http的Get/Post请求,并设置ip与port代理的方法

    下面小编就为大家带来一篇java模拟http的Get/Post请求,并设置ip与port代理的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • java定时任务的实现方式

    java定时任务的实现方式

    这篇文章主要介绍了java定时任务的实现方式，在应用里经常都有用到在后台跑定时任务的需求，如何进行java定时任务，本文为大家进行讲解，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • Java之String字符串在JVM中的存储及其内存地址的问题

    Java之String字符串在JVM中的存储及其内存地址的问题

    这篇文章主要介绍了Java之String字符串在JVM中的存储及其内存地址的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07

最新评论