欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue使用wangEditor實現(xiàn)自定義粘貼功能

 更新時間:2024年12月28日 09:41:39   作者:不cong明的亞子  
這篇文章主要為大家詳細(xì)介紹了Vue如何使用wangEditor實現(xiàn)自定義粘貼功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

背景

收起來這個事情,那還是源于年前需求,由于急需打造公司自己的文檔中心且不啟用新的項目的前提下,在選取富文本編輯器這一步,果斷選擇了wangeditor這個插件,沒有考慮粘貼這種問題,在使用的過程中,不舒適度極高,無奈之下接到了優(yōu)化需求,進行自定義粘貼改造。

技術(shù)棧

vue2.x

@wangeditor/editor@5.1.x

自定義粘貼

官網(wǎng),已經(jīng)給出了自定義粘貼的入口,點擊這里

我們需要處理的,就是針對復(fù)制媒體文件和帶有格式的文本進行特殊處理

帶有格式的文本,不保留原有格式,純粘貼文本;

圖片等媒體資源,可支持粘貼

可能出現(xiàn)的問題及解決方案

編輯器中通過insertNode插入媒體文件之后,執(zhí)行insertText失效

- 插入一個空段落即可(下面代碼中有示例)

如何讀取剪切板中,含有的本地原生文件,(復(fù)制圖片怎么讀?。?/p>

- clipboardData.items 中,獲取每一項的item.getAsFile()

富文本編輯器中,怎么初始化修改插入視頻的大小 ?

- insertNode(video), 核心是使用該api去插入一個視頻節(jié)點,它的數(shù)據(jù)結(jié)構(gòu)中加入width和height的值即可,(下面代碼中有示例)

請使用 ‘@customPaste’,不要放在 props 中。。。

- 出現(xiàn)類似的報錯,請不要在config中使用customPaste而是用組件上的方法,改文章后續(xù)有使用示例代碼

代碼

大家期待的代碼環(huán)節(jié),

/** 異步等待 */
function sleep(delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, delay);
  });
}

/**
 * 插入一個空段落
 * @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 必須包含一個空 text
            };
            editor.insertNode(elem); // 插入圖片
            insertPragraph(editor); // 插入一個空段落
          }
        }
        // 如果是由視頻文件
        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); // 插入一個空段落
          }
        } 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 必須包含一個空 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); // 插入一個空段落
                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);

怎么使用這個方法呢?

答:只說在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實現(xiàn)自定義粘貼功能的文章就介紹到這了,更多相關(guān)Vue wangEditor自定義粘貼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue3+Element Plus實現(xiàn)自定義穿梭框的詳細(xì)代碼

    vue3+Element Plus實現(xiàn)自定義穿梭框的詳細(xì)代碼

    找到一個好用的vue樹形穿梭框組件都很難,又不想僅僅因為一個穿梭框在element-ui之外其他重量級插件,本文給大家分享vue3+Element Plus實現(xiàn)自定義穿梭框的示例代碼,感興趣的朋友一起看看吧
    2024-01-01
  • vue2.0中set添加屬性后視圖不能更新的解決辦法

    vue2.0中set添加屬性后視圖不能更新的解決辦法

    在本文里我們給大家整理了關(guān)于vue2.0中set添加屬性后視圖不能更新的解決辦法以及相關(guān)知識點,需要的朋友們學(xué)習(xí)下。
    2019-02-02
  • vue之郵箱、密碼、手機號碼等輸入驗證規(guī)則說明

    vue之郵箱、密碼、手機號碼等輸入驗證規(guī)則說明

    這篇文章主要介紹了vue之郵箱、密碼、手機號碼等輸入驗證規(guī)則說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 解決vue-photo-preview 異步圖片放大失效的問題

    解決vue-photo-preview 異步圖片放大失效的問題

    這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue腳手架創(chuàng)建項目時報catch錯誤及解決

    vue腳手架創(chuàng)建項目時報catch錯誤及解決

    這篇文章主要介紹了vue腳手架創(chuàng)建項目時報catch錯誤及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue Cli3 創(chuàng)建項目的方法步驟

    Vue Cli3 創(chuàng)建項目的方法步驟

    Vue CLI是一個用于快速Vue.js開發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項目的方法步驟,非常具有實用價值,需要的朋友可以參考下
    2018-10-10
  • Vue?Canvas實現(xiàn)電子簽名

    Vue?Canvas實現(xiàn)電子簽名

    這篇文章主要為大家詳細(xì)介紹了Vue?Canvas實現(xiàn)電子簽名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue實現(xiàn)購物車拋物線小球動畫效果的方法詳解

    vue實現(xiàn)購物車拋物線小球動畫效果的方法詳解

    這篇文章主要介紹了vue實現(xiàn)購物車拋物線小球動畫效果的方法,結(jié)合實例形式較為詳細(xì)的分析了vue.js實現(xiàn)拋物線動畫效果購物車功能相關(guān)原理與操作注意事項,需要的朋友可以參考下
    2019-02-02
  • vue接入高德地圖繪制扇形效果的案例詳解

    vue接入高德地圖繪制扇形效果的案例詳解

    這篇文章主要介紹了vue接入高德地圖繪制扇形,需求是有一個列表,列表的數(shù)據(jù)就是一個基站信息,包含基站的經(jīng)緯度信息和名字,基站下面又分扇區(qū),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-04-04
  • 如何實現(xiàn)vue的tree組件

    如何實現(xiàn)vue的tree組件

    這篇文章主要介紹了如何實現(xiàn)vue的tree組件,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下
    2020-12-12

最新評論