使用百度UEditor
阿新 • • 發佈：2018-11-26
百度UEditor展示
如上圖所示，是一個百度UEditor富文字編輯器。這裡就講解一下：如何使用百度UEditor，新增toolbar以及如何實現上傳本地圖片，和將外部黏貼進來的圖片進行地址替換。
使用百度UEditor前遇到的問題
大家知道，富文字編輯器有很多種。我一個星期前用了Vue2Editor發現，這個的封裝存在很多問題。它是使用了quill的這個庫，但是呢，利用的還是有很多問題。比如：toolbar無法進行自定義，外部複製來東西會格式化樣式。
使用百度UEditor
(1) 引入+ 組建內註冊：
import VueUeditorWrap from "vue-ueditor-wrap"; export default { components: { VueUeditorWrap, }, data(){ return{ data.pageContent = ""; editorConfig: { // 如果需要上傳功能,找後端小夥伴要伺服器介面地址 serverUrl: "/book/update/upload", // 你的UEditor資源存放的路徑,相對於打包後的index.html(路由使用history模式注意使用絕對路徑或者填寫正確的相對路徑) UEDITOR_HOME_URL: "/static/UEditor/", // 編輯器不自動被內容撐高 autoHeightEnabled: false, // 初始容器高度 initialFrameHeight: 600, // 初始容器寬度 initialFrameWidth: "100%", // 關閉自動儲存 enableAutoSave: false }, editorInstance: null, } } }
(2) 在view中進行展示：
<vue-ueditor-wrap ref="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); } }); // 建立一個button const btn = new window.UE.ui.Button({ // 按鈕的名字 name: uiName, // 提示 title: uiName, // 需要新增的額外樣式，指定icon圖示，這裡預設使用一個重複的icon cssRules: "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("圖片上傳失敗，請稍後重試");
});
},