欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SpringBoot添加富文本編輯器操作步驟

 更新時間：2024年01月18日 09:03:04   作者：在下小吉.  
富文本編輯器是一種能夠編輯和展示富文本內(nèi)容的工具或程序,與純文本編輯器不同,富文本編輯器可以處理文本的格式、樣式、布局等方面,使文本更加豐富多樣,本文給大家介紹了SpringBoot添加富文本編輯器操作步驟,需要的朋友可以參考下

富文本編輯器是一種能夠編輯和展示富文本內(nèi)容的工具或程序。與純文本編輯器不同，富文本編輯器可以處理文本的格式、樣式、布局等方面，使文本更加豐富多樣。

富文本編輯器通常提供以下功能：

文字樣式: 可以設置字體、字號、顏色、粗體、斜體、下劃線等文字樣式。

段落樣式: 可以設置標題、段落對齊方式、縮進等段落樣式。

列表: 可以創(chuàng)建有序或無序列表，方便排列項目或要點。

插入圖片和視頻: 可以插入圖片和視頻文件，豐富文本內(nèi)容。

超鏈接： 可以插入超鏈接，使文本具有跳轉(zhuǎn)功能。

表格： 可以插入和編輯表格，方便制作數(shù)據(jù)的展示。

復制粘貼: 可以復制和粘貼文本、圖像等內(nèi)容，方便從其他地方導入內(nèi)容。

撤銷和重做: 可以撤銷和重做編輯操作，方便恢復或修改之前的操作。

富文本編輯器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上傳圖片成功后， 需要返回的參數(shù)
    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上傳圖片成功后， 需要返回的參數(shù)
    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 = '請輸入內(nèi)容'
    editor.config.uploadFileName = 'file'
    editor.config.uploadImgServer = 'http://localhost:9090/files/wang/upload'
    editor.create()
  }
  editor.txt.html(content)
}, 0)
}

在這里插入圖片描述

調(diào)用 初始化富文本編輯器的方法

新增

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>

在這里插入圖片描述

我們點擊按鈕后，會調(diào)用viewEditor，下面我們來實現(xiàn)viewEditor函數(shù)

實現(xiàn)viewEditor函數(shù)

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

在這里插入圖片描述

實現(xiàn)對話框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函數(shù)

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

在這里插入圖片描述

效果

在這里插入圖片描述

在技術(shù)的道路上，我們不斷探索、不斷前行，不斷面對挑戰(zhàn)、不斷突破自我?？萍嫉陌l(fā)展改變著世界，而我們作為技術(shù)人員，也在這個過程中書寫著自己的篇章。讓我們攜手并進，共同努力，開創(chuàng)美好的未來！愿我們在科技的征途上不斷奮進，創(chuàng)造出更加美好、更加智能的明天！

以上就是SpringBoot添加富文本編輯器操作步驟的詳細內(nèi)容，更多關(guān)于SpringBoot添加富文本編輯器的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • SpringBoot如何實現(xiàn)緩存預熱

    SpringBoot如何實現(xiàn)緩存預熱

    緩存預熱是指在 Spring Boot 項目啟動時,預先將數(shù)據(jù)加載到緩存系統(tǒng)（如 Redis）中的一種機制,本文主要介紹了SpringBoot如何實現(xiàn)緩存預熱,感興趣的可以了解下
    2024-12-12
  • SpringBoot攔截器不生效的問題解決

    SpringBoot攔截器不生效的問題解決

    很多開發(fā)者會遇到一個常見的問題,攔截器配置了卻不生效,本文主要介紹了SpringBoot攔截器不生效的問題解決,具有一定的參考價值,感興趣的可以了解一下
    2024-09-09
  • 詳解Java日志正確使用姿勢

    詳解Java日志正確使用姿勢

    這篇文章主要介紹了Java日志正確使用姿勢，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • springboot返回html和jsp的方法示例

    springboot返回html和jsp的方法示例

    這篇文章主要介紹了springboot返回html和jsp的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • 使用 Spring Boot 實現(xiàn) WebSocket實時通信

    使用 Spring Boot 實現(xiàn) WebSocket實時通信

    本篇文章主要介紹了使用 Spring Boot 實現(xiàn) WebSocket實時通信，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • 詳解Java內(nèi)存管理中的JVM垃圾回收

    詳解Java內(nèi)存管理中的JVM垃圾回收

    這篇文章給大家分享了關(guān)于Java內(nèi)存管理中的JVM垃圾回收的相關(guān)知識點內(nèi)容，有興趣的朋友們可以學習參考下。
    2018-08-08
  • SpringBoot從yml配置文件中讀常用參數(shù)值實例方法

    SpringBoot從yml配置文件中讀常用參數(shù)值實例方法

    在本篇文章里小編給大家整理了關(guān)于SpringBoot從yml配置文件中讀常用參數(shù)值實例方法，有需要的朋友們學習下。
    2019-12-12
  • Servlet實現(xiàn)點擊計數(shù)器的方法

    Servlet實現(xiàn)點擊計數(shù)器的方法

    這篇文章主要介紹了Servlet實現(xiàn)點擊計數(shù)器的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • SpringMVC中的異常處理機制詳解

    SpringMVC中的異常處理機制詳解

    SpringMVC提供了基于xml和基于注解的異常處理機制,一般情況下兩者都要進行配置,xml異常處理機制主要用于處理xml方式產(chǎn)生的異常,注解異常處理機制主要用于處理基于注解方式產(chǎn)生的異常,這篇文章主要介紹了SpringMVC中的異常處理機制,需要的朋友可以參考下
    2024-05-05
  • Jmeter3.0發(fā)布!版本更新到底更新了什么

    Jmeter3.0發(fā)布!版本更新到底更新了什么

    Jmeter3.0發(fā)布!版本更新到底更新了什么？這篇文章主要告訴大家Jmeter3.0版本更新了什么，感興趣的小伙伴們可以參考一下
    2016-08-08

最新評論