针对im输入框的一种处理方式

针对im输入框的一种处理方式

复制<template>
  <div class="chatInput">
    <!-- 通过contenteditable使普通的div变成富文本模式
 		由于要实现富文本的本地实时搜索，富文本没有change事件，而只能借用compositionstart，compositionend，input三个事件组合模拟出change
		compositionstart：当用户使用拼音输入法开始输入拼音时触发，在键入之前只会触发一次（因此此方法可以判断用户是否在使用拼音输入法）
 		compositionend：中文输入完成时触发
		input：输入什么都会触发
		设置一个变量doing，初始值为false，compositionstart触发将doing值为true，拼音输入完成触发compositionend，此时将doing置为false，开始搜索，input只有在doing为false时触发，即表示此时未使用拼音，直接搜索-->
    <div
      id="edit"
      ref="edit"
      contenteditable
      @compositionstart="doing = true"
      @compositionend="handleSearch"
      @input="handleKey"
      @keyup="carReply"
      @paste.prevent.trim="paste"
    >
      {{ splitContent.trim() }}
    </div>
    <div class="btn_wrap flex-end">
      按Ctrl+Enter换行，按Enter输出
      <el-button @click="send" type="primary"> 发送</el-button>
    </div>
  </div>
</template>

<script setup lang="ts" name="chatInput">
import { ref, onMounted } from "vue";
import { httpRequest } from "../chatUtil";
import { fileUpload } from "@/api/modules/chat";

interface PropsInterface {
  send: any;
}
const props = defineProps<PropsInterface>();
const doing = ref(false);

const edit = ref() as any;

// 这两属性都是控制输入框输入拆分的
let splitContent = "";
// 鼠标光标值
let lastEditRange = null as any;

onMounted(() => {
  // 初始化输入框聚焦，设置初始的选定对象节点
  const editDom = document.querySelector("#edit") as any;
  // 在失去焦点前保留上一次的选定对象节点
  editDom.addEventListener("blur", (e: any) => setSection());
  editDom.focus();
  setSection();
});
const setSection = () => {
  // 获取选定对象
  let selection = getSelection() as any;
  if (selection.getRangeAt && selection.rangeCount) {
    // 设置最后光标对象
    lastEditRange = selection.getRangeAt(0);
  }
};

const handleSearch = () => {
  doing.value = false;
  // 此时搜索
};
const handleKey = () => {
  const e = window.event as any;
  if (!doing.value) {
    // 此时搜索
  }
};
// 按键控制输出
const carReply = () => {
  const e = window.event as any;
  //   ctrl+enter实现换行，实测只有通过execCommened的方式插入换行符才可以实现换行
  if (e.ctrlKey && e.keyCode == 13) {
    document.execCommand("insertText", false, "\n");
  } else if (e.keyCode == 13) {
    send();
  }
};

// 文本框粘贴
const paste = (e: any) => {
  // 获取粘贴板数据
  const clipdata = e.clipboardData || (window as any).clipboardData;
  const files = clipdata.files;
  const text = clipdata.getData("text/plain");

  // 将文本按照html的格式粘贴进输入框中
  text && document.execCommand("insertHTML", false, text);
  if (files.length) {
    Array.from(files).forEach((file: any) => {
      // 只针对图片进行粘贴
      if (file.type.match(/^image\//)) {
        const windowURL = window.URL || window.webkitURL;
        // 将file生成一个blob链接，可用于本地直接打开，也可以用于下载
        const url = windowURL.createObjectURL(file);
        document.execCommand("insertImage", true, url);
      }
    });
  }
};

const send = () => {
  const edit = document.querySelector("#edit") as any;

  if (edit.childNodes.length == 0) {
    // 内容为空，给个提示阻止了
    return;
  }

  const _arr = Array.from(edit.childNodes) as any;

  // 递归遍历文本框内容，取dom元素的最深一级（实测发现富文本的html结构很乱，取到最深一层才能拿到内容）
  contentRevese(_arr);
  splitContent && props.send(splitContent);
  // 输出后清空
  splitContent = "";
  edit.textContent = "";
};

const contentRevese: any = async (_arr: any) => {
  for (let i = 0; i < _arr.length; i++) {
    // 拿最深层
    if (_arr[i].childNodes.length > 0) {
      contentRevese(Array.from(_arr[i].childNodes));
    } else {
      if (_arr[i].tagName == "IMG") {
        // 在取文本内容时，多行的文本应同时取，不能像图片一样，取到了就直接发送
        props.send(splitContent);
        splitContent = "";
        // blob路径转file
        let img = (await httpRequest(_arr[i].src)) as any;

        // 该blob对象用完后，应及时回收资源，节省内存
        const windowURL = window.URL || window.webkitURL;
        windowURL.revokeObjectURL(_arr[i].src);
        const formData = new FormData() as any;
        formData.append("files", img);
        formData.append("type", "3");
        const { data } = (await fileUpload(formData)) as any;
        props.send(`img[${data.url}][${data.file_name}][size:${data.size}]`);
      } else {
        // 匹配下一段文本加换行
        splitContent += _arr[i].textContent + "\n";
      }
    }
  }
};
</script>