Vue实现输入框回车发送和粘贴文本与图片功能

目录

• 实现回车发送
• 粘贴文本
• 粘贴图片
• 总结

...
handleKeydown(event) {
    if (event.shiftKey && event.keyCode === 13) {
        document.execCommand("insertLineBreak"); // 换行
    } else if (event.keyCode === 13) { // 回车键
        console.log("回车发送");
        event.preventDefault();
        return false;
    }
}

...
},
submit() {
    console.log("回车发送");
},
handleKeydown(event) {
    event.preventDefault();
    return false;
},

...
import onPaste from "@/utils/onPaste.js"; // 引入专门处理粘贴的方法
...
// 注意是异步处理
async onPaste(event) {
    const result = await onPaste(event); // 传入粘贴事件
    console.log("处理后的数据", result);
    // 插入文本
    document.execCommand("insertText", false, result.data);
}

// onPaste.js
// 定义粘贴函数
const OnPaste= (event) => {
  // 剪贴板没数据，则直接返回
  if (!event.clipboardData || !event.clipboardData.items) {
    return;
  }
  // 封装Promise
  return new Promise((resovle, reject) => {
    // 遍历剪贴板
    for(let i = 0, len = event.clipboardData.items.length; i /g; // 匹配粘贴文本中的html标签
        // 处理字符串类型，参数为回调函数
        item.getAsString(str => {
          resovle({
            data: str.replace(reg, "").replace(/(
)|(
)/g, "") // 去掉换行符
          })
        })
      } else {
        reject(new Error("不支持粘贴该类型"));
      }
    }
  })
}
export default onPaste; // 默认导出方法

// DivEditable.vue
async onPaste(event) {
      const result = await onPaste(event);
      console.log("处理后的粘贴数据", result);
      const imgRegx = /^data:image/png|jpg|jpeg|gif|svg|bmp|tif/; // 支持的图片格式
      if (imgRegx.test(result.compressedDataUrl)) {
        // document.execCommand("insertImage", false, result.compressedDataUrl);
        const sel = window.getSelection(); // 获取当前光标位置
        if (sel && sel.rangeCount === 1 && sel.isCollapsed) {
          const range = sel.getRangeAt(0);
          const img = new Image();
          img.src = result.compressedDataUrl; // 使用压缩后的图片
          range.insertNode(img);
          range.collapse(false);
          sel.removeAllRanges();
          sel.addRange(range);
        }
      }
}

// onPaste.js
// 定义粘贴函数
const OnPaste= (event) => {
  ...
  return new Promise((resovle, reject) => {
    for(let i = 0, len = event.clipboardData.items.length; i  {
            resovle(data)
          })
        } else {
          // 其他文件直接返回
          resovle({
            data: file,
            type: "file"
          })
        }
      } else {
        reject(new Error("不支持粘贴该类型"));
      }
    }
  })
}
function handleImage(file, callback, maxWidth = 200) {
  console.log("粘贴的图片", file);
  if (!file || !//(?:png|jpg|jpeg|gif)/i.test(file.type)) {
    console.log("图片格式不支持");
    return;
  }
  const reader = new FileReader();
  reader.Onload= function () {
    const result = this.result;
    console.log("compressedDataUrl", result);
    let img = new Image();
    img.Onload= function() {
      let compressedDataUrl = compress(img, file.type, maxWidth, true);
      let url = compress(img, file.type, maxWidth, false);
      img = null;
      callback({
        data: file,
        compressedDataUrl,
        url,
        type: "image"
      })
    }
    img.src = result;
  };
  reader.readAsDataURL(file);
}
function compress(img, type, maxWidth, flag) {
  let canvas = document.createElement("canvas");
  let ctx2 = canvas.getContext("2d");
​
  let ratio = img.width / img.height;
  let width = img.width, height = img.height;
  // 根据flag判断是否压缩图片
  if (flag) {
    // 压缩后的图片展示在输入框
    width  = maxWidth;
    height = maxWidth / ratio; // 维持图片宽高比
  }
  canvas.width = width;
  canvas.height = height;
​
  ctx2.fillStyle = "#fff";
  ctx2.fillRect(0, 0, canvas.width, canvas.height);
  ctx2.drawImage(img, 0, 0, width, height);
​
  let base64Data = canvas.toDataURL(type, 0.75);
​
  if (type === "image/gif") {
    let regx = /(?<=data:image).*?(?=;base64)/; // 正则表示时在用于replace时，根据浏览器的不同，有的需要为字符串
    base64Data = base64Data.replace(regx, "/gif");
  }
  canvas = null;
  ctx2 = null;
  return base64Data;
}
export default onPaste;