如何在 contentEditable div 中的 p 标签中添加新行

Question

我有一个 contentEditable div，每当我通过按 Enter 或 shift+enter 插入新行时，新行是 div 中的 textNode，但我希望新行位于

p

元素中。

我想要一个简单的解决方案

我正在使用 React Js，所以我将 contentEditable div 的内容保存在由

content

更新的名为

onChange

的状态中，并且我正在使用

react-contenteditable

组件包

Answer 1

您可以处理

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;