SpringBoot添加富文本編輯器操作步驟
富文本編輯器是一種能夠編輯和展示富文本內(nèi)容的工具或程序。與純文本編輯器不同，富文本編輯器可以處理文本的格式、樣式、布局等方面，使文本更加豐富多樣。
富文本編輯器通常提供以下功能：
文字樣式: 可以設(shè)置字體、字號(hào)、顏色、粗體、斜體、下劃線等文字樣式。
段落樣式: 可以設(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)容。
撤銷和重做: 可以撤銷和重做編輯操作，方便恢復(fù)或修改之前的操作。
富文本編輯器wangeditor官方文檔：https://www.wangeditor.com/v4
使用步驟
首先我們需要安裝富文本編輯器
在控制臺(tái)輸入下面的命令
npm i wangeditor --save
在<script>中引入富文本編輯器
我們?cè)谛枰褂酶晃谋揪庉嬈鞯牡胤竭M(jìn)行引入
下面我們?cè)谏唐纺K進(jìn)行引入（這樣商家就可以編輯商品信息，上傳圖片等操作，從而方便進(jìn)行售賣）
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ì)話框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ì)話框里面可以加上一個(gè)close回掉，取消的按鈕也加一個(gè)cancel
<el-button @click="cancel">取 消</el-button>
cancel函數(shù)
cancel() {
this.fromVisible = false
location.href = '/goods'
},
效果
在技術(shù)的道路上，我們不斷探索、不斷前行，不斷面對(duì)挑戰(zhàn)、不斷突破自我。科技的發(fā)展改變著世界，而我們作為技術(shù)人員，也在這個(gè)過(guò)程中書寫著自己的篇章。讓我們攜手并進(jìn)，共同努力，開創(chuàng)美好的未來(lái)！愿我們?cè)诳萍嫉恼魍旧喜粩鄪^進(jìn)，創(chuàng)造出更加美好、更加智能的明天！
以上就是SpringBoot添加富文本編輯器操作步驟的詳細(xì)內(nèi)容，更多關(guān)于SpringBoot添加富文本編輯器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
SpringBoot如何實(shí)現(xiàn)緩存預(yù)熱
緩存預(yù)熱是指在 Spring Boot 項(xiàng)目啟動(dòng)時(shí),預(yù)先將數(shù)據(jù)加載到緩存系統(tǒng)（如 Redis）中的一種機(jī)制,本文主要介紹了SpringBoot如何實(shí)現(xiàn)緩存預(yù)熱,感興趣的可以了解下2024-12-12
很多開發(fā)者會(huì)遇到一個(gè)常見的問題,攔截器配置了卻不生效,本文主要介紹了SpringBoot攔截器不生效的問題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09
這篇文章主要介紹了Java日志正確使用姿勢(shì)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了springboot返回html和jsp的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
使用 Spring Boot 實(shí)現(xiàn) WebSocket實(shí)時(shí)通信
本篇文章主要介紹了使用 Spring Boot 實(shí)現(xiàn) WebSocket實(shí)時(shí)通信，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章給大家分享了關(guān)于Java內(nèi)存管理中的JVM垃圾回收的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)參考下。2018-08-08
SpringBoot從yml配置文件中讀常用參數(shù)值實(shí)例方法
在本篇文章里小編給大家整理了關(guān)于SpringBoot從yml配置文件中讀常用參數(shù)值實(shí)例方法，有需要的朋友們學(xué)習(xí)下。2019-12-12
Servlet實(shí)現(xiàn)點(diǎn)擊計(jì)數(shù)器的方法
這篇文章主要介紹了Servlet實(shí)現(xiàn)點(diǎn)擊計(jì)數(shù)器的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
SpringMVC提供了基于xml和基于注解的異常處理機(jī)制,一般情況下兩者都要進(jìn)行配置,xml異常處理機(jī)制主要用于處理xml方式產(chǎn)生的異常,注解異常處理機(jī)制主要用于處理基于注解方式產(chǎn)生的異常,這篇文章主要介紹了SpringMVC中的異常處理機(jī)制,需要的朋友可以參考下2024-05-05
Jmeter3.0發(fā)布!版本更新到底更新了什么？這篇文章主要告訴大家Jmeter3.0版本更新了什么，感興趣的小伙伴們可以參考一下2016-08-08