富文本編輯器是一種能夠編輯和展示富文本內(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

?在

我們?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;
}

?初始化富文本編輯器

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 = contentthis.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 = falselocation.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)造出更加美好、更加智能的明天！