如何在textbox及聊天框中同时添加文本与图片？

首先明确一个基础结论：原生普通textbox（包括<input type="text">、<textarea>等原生文本输入控件）仅支持纯文本内容处理，本身没有渲染图片、插入非文本节点的能力，不存在直接基于原生textbox实现图文混插的方案。包括Facebook聊天框在内的所有支持图文混合输入的控件，本质都是用可编辑富文本容器模拟的文本输入框。

通用实现逻辑 #

• 用添加了contenteditable="true"属性的块级元素（通常是div）作为输入容器，通过CSS调整样式让它的外观和交互逻辑和普通文本框保持一致，它本身支持光标定位、文本输入、内容选中操作，同时支持插入任意HTML节点
• 图片插入逻辑：用户触发图片选择操作后，先将选中的图片生成临时访问地址（可以是base64格式，也可以是本地Blob URL），之后创建<img>标签关联该地址，通过浏览器Selection API将图片节点插入到当前光标所在位置，插入完成后主动将光标移动到图片末尾，方便用户继续输入文本
• 数据提交与还原：提交内容时不要仅读取容器的纯文本内容，需要序列化整个容器的HTML结构，或者自定义规则解析内容，按顺序存储文本片段和对应的图片资源地址，后续渲染时按存储的顺序还原文本和图片的位置即可

核心代码示例（JS） #

// 假设editableContainer是你的contenteditable输入容器
function insertImageToCursor(imgUrl) {
  const img = document.createElement('img')
  img.src = imgUrl
  img.style.maxWidth = '200px' // 自定义图片显示尺寸
  
  const selection = window.getSelection()
  if (selection.rangeCount === 0) return
  const range = selection.getRangeAt(0)
  range.deleteContents()
  range.insertNode(img)
  
  // 光标移到图片后
  range.setStartAfter(img)
  range.collapse(true)
  selection.removeAllRanges()
  selection.addRange(range)
}

内容的提问来源于stack exchange，提问作者Dat Cong Dinh