如何在自定义可编辑div中仅捕获粘贴事件，不启用contenteditable

完全可以单独捕获粘贴事件做自定义处理，不用给canvas加contenteditable属性，下面是具体实现步骤和代码修改建议：

1. 先修复现有代码的关键bug #

你的editText函数里，event.preventDefault少了括号，这会导致浏览器默认键盘输入行为没被阻止，可能出现输入重复的问题，先修正：

function editText(event) {  
  event.preventDefault(); // 这里要加括号！
  // ... 其余代码不变
}

2. 添加自定义粘贴事件监听 #

给canvas绑定paste事件，阻止浏览器默认粘贴行为，然后按你的编辑器结构处理剪贴板内容：

// 在现有代码末尾添加粘贴事件监听
canvas.addEventListener('paste', handlePaste);

function handlePaste(e) {
  e.preventDefault(); // 阻止浏览器默认粘贴，避免破坏自定义结构
  
  // 优先获取带格式的HTML内容，没有则取纯文本
  let pasteContent = e.clipboardData.getData('text/html') || e.clipboardData.getData('text/plain');
  
  // 分情况处理粘贴内容
  if (!pasteContent.includes('<')) {
    // 处理纯文本内容，和你现有键盘输入逻辑保持一致
    for (let char of pasteContent) {
      let newElement = createCanvasChild(char);
      canvas.insertBefore(newElement, cursor);
    }
  } else {
    // 处理带格式的内容（示例：提取图片、保留文本格式）
    let tempContainer = document.createElement('div');
    tempContainer.innerHTML = pasteContent;
    
    // 处理粘贴的图片
    tempContainer.querySelectorAll('img').forEach(img => {
      let imgElement = document.createElement('img');
      imgElement.src = img.src;
      imgElement.className = 'canvas-child';
      bindElementEvents(imgElement);
      canvas.insertBefore(imgElement, cursor);
    });
    
    // 处理带格式的文本（示例：保留加粗格式）
    tempContainer.querySelectorAll('*').forEach(node => {
      if (node.innerText.trim()) {
        let textSpan = document.createElement('span');
        textSpan.className = 'canvas-child';
        if (node.tagName === 'B' || node.style.fontWeight === 'bold') {
          textSpan.classList.add('bold'); // 自定义加粗类，需配合CSS
        }
        textSpan.innerText = node.innerText;
        bindElementEvents(textSpan);
        canvas.insertBefore(textSpan, cursor);
      }
    });
  }
}

// 封装创建编辑器子元素的逻辑，避免重复代码
function createCanvasChild(content) {
  let newElement = document.createElement('span');
  newElement.className = 'canvas-child';
  if (content === ' ') {
    newElement.innerHTML = '&nbsp;';
  } else if (content === '\n') {
    newElement.innerText = '\n';
  } else {
    newElement.innerText = content;
  }
  bindElementEvents(newElement);
  return newElement;
}

// 封装元素事件绑定逻辑
function bindElementEvents(element) {
  element.addEventListener('mouseleave', () => {
    element.style.background = 'none';
  });
  element.addEventListener('dblclick', () => {
    canvas.insertBefore(cursor, element);
  });
}

3. 可选：添加格式对应的CSS #

如果要支持加粗等格式，补充CSS：

.canvas-child.bold {
  font-weight: bold;
}

这样处理后，你既可以保留自己的自定义键盘输入、光标导航逻辑，又能完全控制粘贴内容的解析和插入，不会和contenteditable的默认行为冲突。

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