如何获取contenteditable div中焦点图片元素以修改其样式？

我来帮你搞定这个需求！要在contenteditable区域里实现粘贴图片的比例缩放、边框样式，同时能识别并操作处于焦点状态的元素，咱们可以分两个核心部分来实现：

一、拦截粘贴事件，自动处理图片样式 #

当用户把图片粘贴到contenteditable div里时，浏览器会自动插入原生的<img>标签，我们可以通过监听paste事件来拦截这个过程，替换成带有自定义样式的图片，同时保证图片按比例缩放。

步骤1：定义CSS样式 #

先给图片准备好样式类，设置边框、自动按比例缩放的规则：

/* 自定义编辑区域图片样式 */
.editable-img {
  border: 2px solid #ddd;
  border-radius: 4px;
  /* 按比例缩放，最大宽度不超过容器宽度 */
  max-width: 100%;
  height: auto;
  margin: 8px 0;
}

/* 焦点状态的图片高亮样式 */
.editable-img:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

步骤2：监听粘贴事件处理图片 #

通过JS拦截粘贴操作，读取剪贴板中的图片，创建带有自定义类的img元素并插入到光标位置：

<div class="editable-container" contenteditable="true">
  这是一个可编辑区域，试试粘贴图片进来！
</div>

<script>
const editableDiv = document.querySelector('.editable-container');

editableDiv.addEventListener('paste', async (e) => {
  // 只处理图片类型的粘贴
  if (!e.clipboardData || !e.clipboardData.items) return;

  const imageItem = Array.from(e.clipboardData.items).find(item => item.type.startsWith('image/'));
  if (!imageItem) return;

  // 阻止浏览器默认的图片粘贴行为
  e.preventDefault();

  // 将剪贴板中的图片转为Blob对象
  const blob = await imageItem.getAsFile();
  const imageUrl = URL.createObjectURL(blob);

  // 创建带有自定义样式的img元素
  const img = document.createElement('img');
  img.src = imageUrl;
  img.className = 'editable-img';
  // 设置tabindex让图片可以获得焦点
  img.tabIndex = 0;

  // 将图片插入到当前光标位置
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    range.deleteContents();
    range.insertNode(img);
    // 插入后自动让图片获得焦点
    img.focus();
  }
});
</script>

二、识别并操作焦点状态的元素 #

要获取当前处于焦点（激活）的元素，有两种可靠的实现方式：

1. 使用document.activeElement直接获取焦点元素 #

这个API能直接拿到当前页面中获得焦点的元素，只要我们给图片设置了tabindex="0"（上面代码已添加），点击或选中图片时就能通过这个方法定位：

// 监听全局焦点变化事件
document.addEventListener('focus', (e) => {
  const focusedElement = e.target;
  // 判断是否是我们的编辑区域图片
  if (focusedElement.classList.contains('editable-img')) {
    console.log('当前焦点图片：', focusedElement);
    // 这里可以添加自定义操作，比如修改边框颜色、显示调整控件等
    // focusedElement.style.borderColor = '#ff5722';
  }
}, true);

2. 结合Selection API获取选中元素 #

如果用户是通过鼠标拖拽选中图片，我们可以用Selection API获取当前选中的元素：

// 监听编辑区域的点击事件
editableDiv.addEventListener('click', () => {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;
  
  const selectedElement = selection.getRangeAt(0).commonAncestorContainer;
  // 向上查找确保拿到img元素
  const targetImg = selectedElement.tagName === 'IMG' ? selectedElement : selectedElement.closest('img');
  
  if (targetImg?.classList.contains('editable-img')) {
    targetImg.focus(); // 让图片获得焦点
    console.log('点击选中的图片：', targetImg);
  }
});

把上面的代码整合到一起，就能实现：粘贴图片自动应用样式并按比例缩放，点击或选中图片时能识别焦点状态并进行样式修改。

内容的提问来源于stack exchange，提问作者Samo Zaparola