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

àì夳堔傛蜴生んèń 2024-04-17 06:40 90阅读 0赞

#### 文章目录 ####

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

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

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

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

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

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

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

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

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

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

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

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

## ?使用步骤 ##

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

在控制台输入下面的命令

npm i wangeditor --save

![在这里插入图片描述][ed407da20e904fd6be995ed41d9ed6f4.png]

### ⭐在 ###

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

import E from 'wangeditor'

![在这里插入图片描述][32422d1f06194663a8013ebb5b6ec945.png]

### ⭐富文本图片上传接口 ###

上传图片

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

![在这里插入图片描述][e6d34729285f4b23be56c2f8009081f7.png]

### ⭐初始化富文本编辑器 ###

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)
    }

![在这里插入图片描述][844b97f720a44d89a82a6d00935312ed.png]

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

#### ?新增 ####

initWangEditor('')

![在这里插入图片描述][52ffb774e5e94b4e9dcf82596c479780.png]

#### ?编辑 ####

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

![在这里插入图片描述][c408c525aaf14e09a8a322aa5ceeb0c8.png]

#### ?保存 ####

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

![在这里插入图片描述][8a5a9d557eb44759bdd29c9e7555098a.png]

--------------------

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

我们可以添加一个按钮操作，点击按钮后，就可以进行查看  
![在这里插入图片描述][3c19eaccc4954f5a910f59b7abf8efc6.png]

### ⭐添加按钮 ###

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

<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>

![在这里插入图片描述][e577a39bbd404a979ab857acddeb9785.png]  
我们点击按钮后，会调用viewEditor，下面我们来实现viewEditor函数

### ⭐实现viewEditor函数 ###

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

![在这里插入图片描述][26ec22ee16d24d2b801acebc054cd9c1.png]

#### ?实现对话框viewData ####

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

![在这里插入图片描述][00fdcfaf5b284a0daba829be16455e52.png]

### ⭐在data中初始化2个变量 ###

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

![在这里插入图片描述][c61bf6b0393e4bb8a1ce1f9e09b81501.png]

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

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

![在这里插入图片描述][dfddb78d2d9842c4bb6db1bbc30b0577.png]

### ⭐cancel函数 ###

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

![在这里插入图片描述][379473896d32406dbf203ef46780f276.png]

## ?效果 ##

![在这里插入图片描述][a9c720f487674be19758ed014679a07a.gif]

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

![在这里插入图片描述][6c9c2d21457243b388bba3287292b13c.png_pic_center]

[c9a43bfc79ae4bec930401f5aa380922.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/6121e2a4ad9f4e9285bc5340e4ef8f2a.png
[ed407da20e904fd6be995ed41d9ed6f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/cb8027028d6847c3971b0061e9deda5e.png
[32422d1f06194663a8013ebb5b6ec945.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/8024b612f108497f8f10aeecb844c597.png
[e6d34729285f4b23be56c2f8009081f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/5ae35d83f6c14e2a8d477420fe93fb4a.png
[844b97f720a44d89a82a6d00935312ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/5a48d19584e34ea8bd4b92a36c1369b3.png
[52ffb774e5e94b4e9dcf82596c479780.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/b9fffce5c5374e03875b471d12715d9c.png
[c408c525aaf14e09a8a322aa5ceeb0c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/f8347dc167db4abaa3633fd69de11981.png
[8a5a9d557eb44759bdd29c9e7555098a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/fcd1f3fd1a8548ce8ff65256db21f4e6.png
[3c19eaccc4954f5a910f59b7abf8efc6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/ecec2ddbe4d04e4ab45ade2b9ea3f304.png
[e577a39bbd404a979ab857acddeb9785.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/25044beacb5742d6817a7d59621c5111.png
[26ec22ee16d24d2b801acebc054cd9c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/7c9eaaefe5914bd9ad4e8070e25d6dc9.png
[00fdcfaf5b284a0daba829be16455e52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/5b4d08155cfc42bba55a3bca1dc158bd.png
[c61bf6b0393e4bb8a1ce1f9e09b81501.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/9d7e9bdcb8e446b781fceda9d25c90b1.png
[dfddb78d2d9842c4bb6db1bbc30b0577.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/af8a795dbf3e4e18b54eacb63451b93c.png
[379473896d32406dbf203ef46780f276.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/284459f3cec64625b6743f2cdb27b648.png
[a9c720f487674be19758ed014679a07a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/0bf64718136a4a49a0fa2bf1c9062752.gif
[6c9c2d21457243b388bba3287292b13c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/f4eb6ab198914bfabd7f16d5de4ca9e6.png