SpringBoot添加富文本編輯器操作步驟
富文本編輯器是一種能夠編輯和展示富文本內(nèi)容的工具或程序。與純文本編輯器不同，富文本編輯器可以處理文本的格式、樣式、布局等方面，使文本更加豐富多樣。
富文本編輯器通常提供以下功能：
文字樣式: 可以設(shè)置字體、字號(hào)、顏色、粗體、斜體、下劃線(xiàn)等文字樣式。
段落樣式: 可以設(shè)置標(biāo)題、段落對(duì)齊方式、縮進(jìn)等段落樣式。
列表: 可以創(chuàng)建有序或無(wú)序列表，方便排列項(xiàng)目或要點(diǎn)。
插入圖片和視頻: 可以插入圖片和視頻文件，豐富文本內(nèi)容。
超鏈接： 可以插入超鏈接，使文本具有跳轉(zhuǎn)功能。
表格： 可以插入和編輯表格，方便制作數(shù)據(jù)的展示。
復(fù)制粘貼: 可以復(fù)制和粘貼文本、圖像等內(nèi)容，方便從其他地方導(dǎo)入內(nèi)容。
撤銷(xiāo)和重做: 可以撤銷(xiāo)和重做編輯操作，方便恢復(fù)或修改之前的操作。
富文本編輯器wangeditor官方文檔：https://www.wangeditor.com/v4
使用步驟
首先我們需要安裝富文本編輯器
在控制臺(tái)輸入下面的命令
npm i wangeditor --save
在<script>中引入富文本編輯器
我們?cè)谛枰褂酶晃谋揪庉嬈鞯牡胤竭M(jìn)行引入
下面我們?cè)谏唐纺K進(jìn)行引入（這樣商家就可以編輯商品信息，上傳圖片等操作，從而方便進(jìn)行售賣(mài)）
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 {
// 文件存儲(chǔ)形式：時(shí)間戳-文件名
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 {
// 文件存儲(chǔ)形式：時(shí)間戳-文件名
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 = '請(qǐng)輸入內(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()
上面我們添加了富文本編輯器的操作，首先了上傳圖片的功能，但是我們要查看圖片應(yīng)該怎么辦呢
我們可以添加一個(gè)按鈕操作，點(diǎn)擊按鈕后，就可以進(jìn)行查看
添加按鈕
表格上面加一個(gè)點(diǎn)擊查看的按鈕：
<el-table-column prop="description" label="商品描述">
<template slot-scope="scope">
<el-button type="success" @click="viewEditor(scope.row.description)">點(diǎn)擊查看</el-button>
</template>
</el-table-column>
我們點(diǎn)擊按鈕后，會(huì)調(diào)用viewEditor，下面我們來(lái)實(shí)現(xiàn)viewEditor函數(shù)
實(shí)現(xiàn)viewEditor函數(shù)
viewEditor(content) {
this.viewData = content
this.editorVisible = true
},
實(shí)現(xiàn)對(duì)話(huà)框viewData
<el-dialog title="商品介紹" :visible.sync="editorVisible" width="50%"> <div v-html="this.viewData" class="w-e-text"></div> </el-dialog>
在data中初始化2個(gè)變量
data() {
return {
editorVisible: false,
viewData: null
}
},
在對(duì)話(huà)框里面可以加上一個(gè)close回掉，取消的按鈕也加一個(gè)cancel
<el-button @click="cancel">取 消</el-button>
cancel函數(shù)
cancel() {
this.fromVisible = false
location.href = '/goods'
},
效果
在技術(shù)的道路上，我們不斷探索、不斷前行，不斷面對(duì)挑戰(zhàn)、不斷突破自我?？萍嫉陌l(fā)展改變著世界，而我們作為技術(shù)人員，也在這個(gè)過(guò)程中書(shū)寫(xiě)著自己的篇章。讓我們攜手并進(jìn)，共同努力，開(kāi)創(chuàng)美好的未來(lái)！愿我們?cè)诳萍嫉恼魍旧喜粩鄪^進(jìn)，創(chuàng)造出更加美好、更加智能的明天！
以上就是SpringBoot添加富文本編輯器操作步驟的詳細(xì)內(nèi)容，更多關(guān)于SpringBoot添加富文本編輯器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Mybatis-plus和Mybatis出現(xiàn)版本不兼容的問(wèn)題解決
MyBatis-Plus?與?MyBatis?之間的兼容性問(wèn)題通常是由于版本不匹配引起的,本文主要介紹了Mybatis-plus和Mybatis出現(xiàn)版本不兼容的問(wèn)題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
Apache JMeter 是一款功能強(qiáng)大的性能測(cè)試工具,支持多種協(xié)議和測(cè)試場(chǎng)景,JMeter還允許通過(guò) Java Request采樣器 調(diào)用自定義的Java代碼,本文將詳細(xì)介紹如何在JMeter中使用Java Request采樣器,需要的朋友可以參考下2025-02-02
SpringBoot整合Redis的實(shí)現(xiàn)示例
本文主要介紹了SpringBoot整合Redis的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
SpringBoot+Mybatis plus+React實(shí)現(xiàn)條件選擇切換搜索實(shí)踐
本文主要介紹了SpringBoot+Mybatis plus+React實(shí)現(xiàn)條件選擇切換搜索實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Spring基于注解配置AOP詳解,Spring 的 AOP 功能是基于 AspectJ 實(shí)現(xiàn)的,支持使用注解聲明式定義 AOP 切面,Spring 基于注解配置 AOP 需要啟用 AspectJ 自動(dòng)代理功能,需要的朋友可以參考下2023-09-09
Mybatis返回int或者Integer類(lèi)型報(bào)錯(cuò)的解決辦法
這篇文章主要介紹了Mybatis返回int或者Integer類(lèi)型報(bào)錯(cuò)的解決辦法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了Springboot項(xiàng)目使用攔截器方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
java模擬http的Get/Post請(qǐng)求,并設(shè)置ip與port代理的方法
下面小編就為大家?guī)?lái)一篇java模擬http的Get/Post請(qǐng)求,并設(shè)置ip與port代理的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
java定時(shí)任務(wù)的實(shí)現(xiàn)方式
這篇文章主要介紹了java定時(shí)任務(wù)的實(shí)現(xiàn)方式，在應(yīng)用里經(jīng)常都有用到在后臺(tái)跑定時(shí)任務(wù)的需求，如何進(jìn)行java定時(shí)任務(wù)，本文為大家進(jìn)行講解，感興趣的小伙伴們可以參考一下2016-02-02
Java之String字符串在JVM中的存儲(chǔ)及其內(nèi)存地址的問(wèn)題
這篇文章主要介紹了Java之String字符串在JVM中的存儲(chǔ)及其內(nèi)存地址的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07