您可以处理onKeyDown事件来拦截Enter键并手动插入<p>元素。

import React, { useState } from 'react';
import ContentEditable from 'react-contenteditable';

const App = () => {
  const [content, setContent] = useState('<p>Start typing...</p>');

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault(); // Prevent the default behavior (new line)
      setContent((prevContent) => `${prevContent}<p><br></p>`); // Insert a <p> element
    }
  };

  return (
    <ContentEditable
      html={content}
      onChange={(e) => setContent(e.target.value)}
      onKeyDown={handleKeyDown}
    />
  );
};

export default App;

字符串

const insertNewLine = (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();

            // Create a new <p> element
            const newParagraph = document.createElement('p');
            newParagraph.innerHTML = '<br>'; // Add a line break to make the new paragraph visible

            // Insert the new <p> element after the current selection
            const selection = window.getSelection();
            const range = selection.getRangeAt(0);
            range.deleteContents();
            range.insertNode(newParagraph);

            // Move the caret inside the new <p> element
            const newRange = document.createRange();
            newRange.setStart(newParagraph, 0);
            newRange.setEnd(newParagraph, 0);
            selection.removeAllRanges();
            selection.addRange(newRange);
        }
    };

字符串