React-Quill按Enter键添加多余换行问题求助

我懂你遇到的困扰——把Quill的块标签换成DIV后，按Enter会生成一堆独立的DIV，导致后端QnA Maker存的内容换行间距过大，而你想要的是单个DIV里用<br>分隔的紧凑换行格式。下面给你两种实用的解决方案：

方案一：修改Enter键行为，直接插入换行而非新块 #

Quill默认按Enter会创建新的块级元素（现在是DIV），我们可以通过自定义键盘绑定，把Enter键的默认行为改成插入软换行（也就是<br>），这样所有内容都会乖乖待在同一个DIV里：

首先在你的modules配置里添加键盘绑定逻辑：

this.modules = {
  keyboard: {
    bindings: {
      // 覆盖Enter键的默认行为
      enter: {
        key: 13, // Enter键的keyCode
        handler: () => {
          const quill = this.reactQuillRef.getEditor(); // 先获取Quill实例
          const range = quill.getSelection();
          if (range) {
            // 插入换行符，Quill会自动转换成<br>
            quill.insertText(range.index, '\n');
            // 把光标移到换行后的位置
            quill.setSelection(range.index + 1);
            return false; // 阻止默认的创建新块行为
          }
          return true;
        }
      }
    }
  },
  // 你的其他modules配置（比如toolbar等）
};

注意：要拿到Quill实例，得给ReactQuill组件加个ref：

<ReactQuill 
  ref={(el) => { this.reactQuillRef = el; }}
  value={this.props.value} 
  onChange={this.handleChange} 
  onBlur={this.setProps} 
  modules={this.modules} 
  formats={this.formats} 
/>

这样用户按Enter时就会直接在当前DIV里插入<br>，所有内容都会被包裹在同一个DIV中，完全符合你期望的格式。

方案二：提交前处理HTML，合并多个DIV为单个带<br>的DIV #

如果你不想改变用户的输入习惯（比如用户已经习惯按Enter分段，但你需要后端存成紧凑换行），可以在提交或onChange时手动处理HTML内容：

handleChange = (value) => {
  let processedHtml = value;
  // 1. 去掉所有DIV的开始标签
  processedHtml = processedHtml.replace(/<div>/g, '');
  // 2. 把DIV结束标签替换成<br>
  processedHtml = processedHtml.replace(/<\/div>/g, '<br>');
  // 3. 去掉最后多余的<br>（因为最后一个</div>会被替换成<br>）
  processedHtml = processedHtml.replace(/<br>$/, '');
  // 4. 处理空DIV变成的连续<br>（比如用户按多次Enter）
  processedHtml = processedHtml.replace(/<br><br>/g, '<br>');
  // 5. 把处理后的内容包裹回单个DIV
  processedHtml = `<div>${processedHtml}</div>`;
  
  // 把处理后的内容传给父组件或后端
  this.props.onChange(processedHtml);
};

这种方式会把你当前生成的多个独立DIV转换成：

<div>click <a href="https://twitter.com" target="_blank">here </a> for sample link test test testing test new line sample link <a href="https://www.google.com" target="_blank">here</a>.. and then <a href="https://www.facebook.com" target="_blank">here</a> test here<br>endtered value here<br>this is a new paragraphs<br>but this is just a new line</div>

完美匹配你想要的后端存储格式，QnA Maker显示时就是连续的换行效果。

为什么原来的代码没解决问题？ #

你之前替换Block的tagName只是把默认的<p>改成了<div>，但Quill的核心行为——按Enter创建新块级元素——并没有改变，所以还是会生成多个独立的DIV。上面的两种方案要么改变输入行为，要么转换输出结果，都能解决你的问题。

内容的提问来源于stack exchange，提问作者Page F.P.T