Vue使用wangEditor實(shí)現(xiàn)自定義粘貼功能
背景
收起來(lái)這個(gè)事情,那還是源于年前需求,由于急需打造公司自己的文檔中心且不啟用新的項(xiàng)目的前提下,在選取富文本編輯器這一步,果斷選擇了wangeditor這個(gè)插件,沒(méi)有考慮粘貼這種問(wèn)題,在使用的過(guò)程中,不舒適度極高,無(wú)奈之下接到了優(yōu)化需求,進(jìn)行自定義粘貼改造。
技術(shù)棧
vue2.x
@wangeditor/editor@5.1.x
自定義粘貼
官網(wǎng),已經(jīng)給出了自定義粘貼的入口,點(diǎn)擊這里
我們需要處理的,就是針對(duì)復(fù)制媒體文件和帶有格式的文本進(jìn)行特殊處理
帶有格式的文本,不保留原有格式,純粘貼文本;
圖片等媒體資源,可支持粘貼
可能出現(xiàn)的問(wèn)題及解決方案
編輯器中通過(guò)insertNode插入媒體文件之后,執(zhí)行insertText失效
- 插入一個(gè)空段落即可(下面代碼中有示例)
如何讀取剪切板中,含有的本地原生文件,(復(fù)制圖片怎么讀?。?/p>
- clipboardData.items 中,獲取每一項(xiàng)的item.getAsFile()
富文本編輯器中,怎么初始化修改插入視頻的大小 ?
- insertNode(video), 核心是使用該api去插入一個(gè)視頻節(jié)點(diǎn),它的數(shù)據(jù)結(jié)構(gòu)中加入width和height的值即可,(下面代碼中有示例)
請(qǐng)使用 ‘@customPaste’,不要放在 props 中。。。
- 出現(xiàn)類似的報(bào)錯(cuò),請(qǐng)不要在config中使用customPaste而是用組件上的方法,改文章后續(xù)有使用示例代碼
代碼
大家期待的代碼環(huán)節(jié),
/** 異步等待 */ function sleep(delay) { return new Promise((resolve) => { setTimeout(() => { resolve(); }, delay); }); } /** * 插入一個(gè)空段落 * @description 為了插入圖片/視頻后,光標(biāo)不被圖片覆蓋 * @param {*} editor */ function insertPragraph(editor) { const p = { type: "paragraph", children: [{ text: "" }] }; editor.insertNode(p); } /** * 自定義粘貼 * @description 富文本自定義粘貼 */ export async function customPasteItemFunc(editor, event) { try { /** 粘貼事件 */ const clipboardData = event.clipboardData; if (clipboardData && clipboardData.items) { for (let i = 0; i < clipboardData.items.length; i++) { const item = clipboardData.items[i]; if (item.type.indexOf("image") !== -1) { /** 粘貼圖片 */ const file = item.getAsFile(); if (file) { const notify = this.$notify({ title: '提示', message: '當(dāng)前有正在上傳的媒體文件', duration: 0, showClose: false, type: 'warning' }); const { code, data } = await uploadFile(file); notify.close(); if (code !== 0) { throw new Error("圖片上傳失敗"); } const elem = { type: "image", src: data.url, alt: "bvox", href: "", children: [{ text: "" }], // void node 必須包含一個(gè)空 text }; editor.insertNode(elem); // 插入圖片 insertPragraph(editor); // 插入一個(gè)空段落 } } // 如果是由視頻文件 else if (item.type.indexOf("video") !== -1) { const file = item.getAsFile(); if (file) { const notify = this.$notify({ title: '提示', message: '當(dāng)前有正在上傳的媒體文件', duration: 0, showClose: false, type: 'warning' }); const { code, data } = await uploadFile(file); notify.close(); if (code !== 0) { throw new Error("視頻上傳失敗"); } const elem = { type: "video", src: data.url, poster, width: 530, height: 220, children: [{ text: "" }], }; editor.insertNode(elem); // 插入視頻 insertPragraph(editor); // 插入一個(gè)空段落 } } else if (item.type.indexOf("text/html") !== -1) { // 自定義復(fù)制 const html = clipboardData.getData("text/html"); const text = clipboardData.getData("text/plain"); const resultImgs = html.match(/<img[^>]+>/g); const imgNodes = []; // 將匹配到的所有圖片插入到編輯器中 if (resultImgs) { resultImgs.forEach((img) => { const imgUrl = img.match(/src="([^"]+)"/)[1]; const elem = { type: "image", src: imgUrl, alt: "bvox", href: "", children: [{ text: "" }], // void node 必須包含一個(gè)空 text }; imgNodes.push(elem); }); } // 多圖插入 const positions = text.split("\n"); if (positions.length > 1) { for (let i = 0; i < positions.length; i++) { if (positions[i] === "[圖片]") { editor.insertNode(imgNodes.shift()); insertPragraph(editor); // 插入一個(gè)空段落 await sleep(1000); } else { editor.insertText(positions[i]); await sleep(300); } } } } } } } catch (e) { this.$Message.error(e.message); } }
大家疑惑的地方
為什么代碼中直接出現(xiàn)this.$Message.error()
?
答: customPasteItemFunc.call(this, editor, event);
怎么使用這個(gè)方法呢?
答:只說(shuō)在vue中的使用,react自行去看官網(wǎng)使用即可,
<Editor .... @customPaste="handleCustomPaste" /> method: { handleCustomPaste(editor, event) { customPasteItemFunc.call(this, editor, event); // 阻止默認(rèn)的粘貼行為 event.preventDefault() return false; } }
到此這篇關(guān)于Vue使用wangEditor實(shí)現(xiàn)自定義粘貼功能的文章就介紹到這了,更多相關(guān)Vue wangEditor自定義粘貼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3+Element Plus實(shí)現(xiàn)自定義穿梭框的詳細(xì)代碼
找到一個(gè)好用的vue樹(shù)形穿梭框組件都很難,又不想僅僅因?yàn)橐粋€(gè)穿梭框在element-ui之外其他重量級(jí)插件,本文給大家分享vue3+Element Plus實(shí)現(xiàn)自定義穿梭框的示例代碼,感興趣的朋友一起看看吧2024-01-01vue之郵箱、密碼、手機(jī)號(hào)碼等輸入驗(yàn)證規(guī)則說(shuō)明
這篇文章主要介紹了vue之郵箱、密碼、手機(jī)號(hào)碼等輸入驗(yàn)證規(guī)則說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10解決vue-photo-preview 異步圖片放大失效的問(wèn)題
這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟
Vue CLI是一個(gè)用于快速Vue.js開(kāi)發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-10-10vue實(shí)現(xiàn)購(gòu)物車拋物線小球動(dòng)畫(huà)效果的方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)購(gòu)物車拋物線小球動(dòng)畫(huà)效果的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js實(shí)現(xiàn)拋物線動(dòng)畫(huà)效果購(gòu)物車功能相關(guān)原理與操作注意事項(xiàng),需要的朋友可以參考下2019-02-02