实现一个可插入标签的聊天框-CSDN博客

在这里插入图片描述

解决换行问题

div 设置 contenteditable=“true” 时插入新 div 会换行，主要是因为 div 是块级元素（block-level），默认会独占一行。解决这个问题需要结合 CSS 调整元素显示方式和 JavaScript 精确控制插入行为。
通过将插入的 div 设为行内块元素（inline-block）并控制光标位置，避免不必要的换行：

CSS 层面：
- 将插入的 div 设置为 inline-block（通过 inline-div 类），使其能与其他内容在同一行显示
- 避免使用默认的块级显示方式（block），从根本上解决独占一行的问题
JavaScript 层面：
- 精确控制光标位置：插入元素后将光标自动移动到新元素后面，避免浏览器自动添加换行
- 清理空文本节点：移除编辑区中可能产生的空白节点，防止累积换行
- 控制插入时机：通过按钮点击事件插入元素，避免直接在编辑区输入导致的默认行为
额外优化：
- 添加焦点样式，提升编辑体验
- 监听输入事件，实时清理空节点
- 确保插入后编辑区保持焦点状态

解决光标跑到了插入标签内部了

关键修复说明
禁止标签内部编辑：
- 为插入的 div 添加了 contentEditable=“false” 属性，明确禁止在其内部编辑
- 添加 pointer-events: none CSS 属性，防止鼠标事件作用于标签本身
改进光标定位：
- 优化了光标位置设置逻辑，确保 range.setStartAfter() 和 range.setEndAfter() 正确执行
- 添加了点击事件处理，当用户点击标签时，自动将光标移至标签后面
增强用户体验：
- 现在插入标签后，光标会稳定地出现在标签外部右侧
- 即使点击已插入的标签，光标也会自动移至标签后面
- 标签不可编辑，避免用户意外在标签内部输入内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解决contenteditable插入div光标位置问题</title>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    
    h3 {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin-bottom: 16px;
    }
    
    .button-container {
      margin-bottom: 16px;
    }
    
    #insertBtn {
      background-color: #3B82F6;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }
    
    #insertBtn:hover {
      background-color: #2563EB;
      transition: background-color 0.2s;
    }
    
    #editor {
      min-height: 150px;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 20px;
    }
    
    #editor:focus {
      outline: none;
      border-color: #3B82F6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }
    
    .inline-div {
      display: inline-block;
      background-color: rgba(59, 130, 246, 0.1);
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 4px;
      padding: 4px 8px;
      margin: 0 4px;
      /* 关键：禁止在标签内部编辑 */
      pointer-events: none;
    }
  </style>
</head>
<body>
  <h3>可编辑区域示例</h3>
  
  <div class="button-container">
    <button id="insertBtn">
      <i class="fa fa-plus-circle"></i> 插入标签
    </button>
  </div>
  
  <!-- 可编辑区域 -->
  <div 
    id="editor" 
    contenteditable="true" 
  >
    在这里输入内容，点击上方按钮插入标签...
  </div>

  <script>
    const editor = document.getElementById('editor');
    const insertBtn = document.getElementById('insertBtn');
    
    // 插入div并控制光标位置
    insertBtn.addEventListener('click', () => {
      // 创建要插入的div
      const newDiv = document.createElement('div');
      newDiv.className = 'inline-div';
      newDiv.textContent = `标签${Date.now().toString().slice(-4)}`;
      // 确保标签不可编辑
      newDiv.contentEditable = "false";
      
      // 获取当前选择范围
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        
        // 删除选中的内容（如果有）
        range.deleteContents();
        
        // 在光标位置插入新元素
        range.insertNode(newDiv);
        
        // 关键修复：确保光标移动到新元素后面
        range.setStartAfter(newDiv);
        range.setEndAfter(newDiv);
        
        // 清除并重新设置选择范围
        selection.removeAllRanges();
        selection.addRange(range);
      }
      
      // 确保编辑区获得焦点
      editor.focus();
      
      // 清理空文本节点
      cleanEmptyNodes(editor);
    });
    
    // 清理空文本节点
    function cleanEmptyNodes(element) {
      const childNodes = Array.from(element.childNodes);
      childNodes.forEach(node => {
        if (node.nodeType === 3 && /^\s*$/.test(node.textContent)) {
          element.removeChild(node);
        } else if (node.nodeType === 1) {
          cleanEmptyNodes(node);
        }
      });
    }
    
    // 监听输入事件
    editor.addEventListener('input', () => {
      cleanEmptyNodes(editor);
    });
    
    // 防止点击标签时光标进入
    editor.addEventListener('click', (e) => {
      if (e.target.classList.contains('inline-div')) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.setStartAfter(e.target);
        range.setEndAfter(e.target);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    });
  </script>
</body>
</html>