百度UEditor展示

如上圖所示，是一個百度UEditor富文本編輯器。這里就講解一下：如何使用百度UEditor，添加toolbar以及如何實現上傳本地圖片，和將外部黏貼進來的圖片進行地址替換。

---

使用百度UEditor前遇到的問題

大家知道，富文本編輯器有很多種。我一個星期前用了Vue2Editor發現，這個的封裝存在很多問題。它是使用了quill的這個庫，但是呢，利用的還是有很多問題。比如：toolbar無法進行自定義，外部復制來東西會格式化樣式。

---

使用百度UEditor

(1) 引入+ 組建內注冊：

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

(2) 在view中進行展示：

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

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

ueditorReady(editorInstance) {this.editorInstance = editorInstance;},initUeditor() {// 注冊富文本框按鈕(這里講解：第一張圖中最后兩個圖片按鈕：單張上傳和批量上傳的操作)const _this = this;window.UE.registerUI("上傳外部圖片", (editor, uiName) => { /*----------上傳外部圖片按鈕-----------*/// 注冊按鈕執行時的command命令，使用命令默認就會帶有回退操作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);}});// 創建一個buttonconst btn = new window.UE.ui.Button({// 按鈕的名字name: uiName,// 提示title: uiName,// 需要添加的額外樣式，指定icon圖標，這里默認使用一個重復的iconcssRules: "background-position: -726px -76px;",// 點擊時執行的命令onclick() {// 這里可以不用執行命令,做你自己的操作也可editor.execCommand(uiName);}});return btn;});window.UE.registerUI( /*----------上傳內部圖片按鈕-----------*/"上傳圖片",(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: "請先放置圖片！"});}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("你不想轉換的圖片地址片段") >= 0) { this.uploadSingle(imgs, (i += 1), doc, editor);return;}DataResearch.getImageDataUrl({ url: img.src }) // 調用更改圖片地址接口（你們公司的更改圖片地址接口）.then(res => {this.imageChange(res, resolve => { // 獲得更改后的圖片地址img.setAttribute("src", resolve);this.uploadSingle(imgs, (i += 1), doc, editor); // 進行遞歸的上傳圖片});},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("上傳圖片格式錯誤!");return false;}if (!isLt5M) {this.$message.error("上傳圖片大小不能超過 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("圖片上傳失敗，請稍后重試");});},

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

原理：

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

當點擊上傳內部圖片按鈕時，去調用該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("上傳圖片格式錯誤!");return false;}if (!isLt5M) {this.$message.error("上傳圖片大小不能超過 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("圖片上傳失敗，請稍后重試");});},

總結

以上是生活随笔為你收集整理的使用百度UEditor的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。