百度UEditor展示

如上圖所示，是一個(gè)百度UEditor富文本編輯器。這里就講解一下：如何使用百度UEditor，添加toolbar以及如何實(shí)現(xiàn)上傳本地圖片，和將外部黏貼進(jìn)來(lái)的圖片進(jìn)行地址替換。

---

使用百度UEditor前遇到的問(wèn)題

大家知道，富文本編輯器有很多種。我一個(gè)星期前用了Vue2Editor發(fā)現(xiàn)，這個(gè)的封裝存在很多問(wèn)題。它是使用了quill的這個(gè)庫(kù)，但是呢，利用的還是有很多問(wèn)題。比如：toolbar無(wú)法進(jìn)行自定義，外部復(fù)制來(lái)東西會(huì)格式化樣式。

---

使用百度UEditor

(1) 引入+ 組建內(nèi)注冊(cè)：

import VueUeditorWrap from "vue-ueditor-wrap"; export default {components: {VueUeditorWrap, },data(){return{data.pageContent = "";editorInstance: null,editorConfig: {// 如果需要上傳功能,找后端小伙伴要服務(wù)器接口地址serverUrl: "/book/update/upload",// 你的UEditor資源存放的路徑,相對(duì)于打包后的index.html(路由使用history模式注意使用絕對(duì)路徑或者填寫正確的相對(duì)路徑)UEDITOR_HOME_URL: "/static/UEditor/",// 編輯器不自動(dòng)被內(nèi)容撐高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 600,// 初始容器寬度initialFrameWidth: "100%",// 關(guān)閉自動(dòng)保存enableAutoSave: false}}} }

(2) 在view中進(jìn)行展示：

<vue-ueditor-wrapref="ueditor"v-model="data.pageContent":config="editorConfig":destroy="true":init="initUeditor"@ready="ueditorReady" />

(3) methods:里面的方法 （批量上傳外部圖片）

ueditorReady(editorInstance) {this.editorInstance = editorInstance;},initUeditor() {// 注冊(cè)富文本框按鈕(這里講解：第一張圖中最后兩個(gè)圖片按鈕：單張上傳和批量上傳的操作)const _this = this;window.UE.registerUI("上傳外部圖片", (editor, uiName) => { /*----------上傳外部圖片按鈕-----------*/// 注冊(cè)按鈕執(zhí)行時(shí)的command命令，使用命令默認(rèn)就會(huì)帶有回退操作editor.registerCommand(uiName, {execCommand() {const doc = new DOMParser().parseFromString(_this.editorInstance.getContent(),"text/html");const imgs = doc.querySelectorAll("img");if (!imgs.length) return;editor.setDisabled();_this.uploadImg(imgs, doc, editor);}});// 創(chuàng)建一個(gè)buttonconst btn = new window.UE.ui.Button({// 按鈕的名字name: uiName,// 提示title: uiName,// 需要添加的額外樣式，指定icon圖標(biāo)，這里默認(rèn)使用一個(gè)重復(fù)的iconcssRules: "background-position: -726px -76px;",// 點(diǎn)擊時(shí)執(zhí)行的命令onclick() {// 這里可以不用執(zhí)行命令,做你自己的操作也可editor.execCommand(uiName);}});return btn;});window.UE.registerUI( /*----------上傳內(nèi)部圖片按鈕-----------*/"上傳圖片",(editor, uiName) => {editor.registerCommand(uiName, {execCommand() {_this.$refs.fileInputHidden.click();}});const btn = new window.UE.ui.Button({name: uiName,title: uiName,cssRules: "background-position: -380px 0px;",onclick() {editor.execCommand(uiName);}});return btn;},44);},// 獲取圖片地址uploadImg(imgs, doc, editor) {if (imgs) {if (imgs.length === 0) {this.$message({type: "warning",message: "請(qǐng)先放置圖片！"});}this.uploadSingle(imgs, 0, doc, editor);}},// 批量上傳外部圖片uploadSingle(imgs, i, doc, editor) {if (imgs.length === i) {this.enableEditor(doc, editor);return;}const img = imgs[i];if (img.src.indexOf("你不想轉(zhuǎn)換的圖片地址片段") >= 0) { this.uploadSingle(imgs, (i += 1), doc, editor);return;}DataResearch.getImageDataUrl({ url: img.src }) // 調(diào)用更改圖片地址接口（你們公司的更改圖片地址接口）.then(res => {this.imageChange(res, resolve => { // 獲得更改后的圖片地址img.setAttribute("src", resolve);this.uploadSingle(imgs, (i += 1), doc, editor); // 進(jìn)行遞歸的上傳圖片});},resolve => {throw resolve;}).then(() => {this.$message({type: "success",message: "圖片上傳成功！"});});},// 將傳外部圖片地址修改為你們公司的地址imageChange(file, getdata) {const uploadData = getFormData({file,a_id: this.admin.admin_id,a_token: this.admin.app_token,prefix: "shop-manage/product",overwrite: 2});const imageTypes = ["image/jpeg", "image/png", "image/gif"];const validType = imageTypes.some(type => type === String(file.type).toLowerCase());const isLt5M = file.size / 1024 / 1024 < 5;if (!validType) {this.$message.error("上傳圖片格式錯(cuò)誤!");return false;}if (!isLt5M) {this.$message.error("上傳圖片大小不能超過(guò) 5MB!");return false;}axios({method: "post",url: `${this.config.fs_url}/upload`, // 你們公司的修改圖片地址接口data: uploadData}).then(res => getdata(res.data.data.url)).catch(() => {this.$message.error("圖片上傳失敗，請(qǐng)稍后重試");});},

(4) methods:里面的方法 （單張上傳內(nèi)部圖片）

原理：

寫一個(gè)input輸入框并將其type設(shè)置為文件類型，將其隱藏。

當(dāng)點(diǎn)擊上傳內(nèi)部圖片按鈕時(shí)，去調(diào)用該input框的change方法

view里面

<input ref="fileInputHidden" type="file" style="display: none" @change="uploadHiddenFile">

methods:里面的方法

uploadHiddenFile() {const file = this.$refs.fileInputHidden.files[0];this.imageChange(file, url => {this.editorInstance.focus();this.editorInstance.execCommand("inserthtml", `<img src=${url}>`);});},// 將傳外部圖片地址修改為噠噠地址imageChange(file, getdata) {const uploadData = getFormData({file,a_id: this.admin.admin_id,a_token: this.admin.app_token,prefix: "shop-manage/product",overwrite: 2});const imageTypes = ["image/jpeg", "image/png", "image/gif"];const validType = imageTypes.some(type => type === String(file.type).toLowerCase());const isLt5M = file.size / 1024 / 1024 < 5;if (!validType) {this.$message.error("上傳圖片格式錯(cuò)誤!");return false;}if (!isLt5M) {this.$message.error("上傳圖片大小不能超過(guò) 5MB!");return false;}axios({method: "post",url: `${this.config.fs_url}/upload`,data: uploadData}).then(res => getdata(res.data.data.url)).catch(() => {this.$message.error("圖片上傳失敗，請(qǐng)稍后重試");});},

總結(jié)

以上是生活随笔為你收集整理的使用百度UEditor的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。