针对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>

针对im输入框的一种处理方式的相关教程结束。