提问人：Quiet Coder 提问时间：11/7/2023 更新时间：11/9/2023 访问量：41
如何在 contentEditable div 的 p 标签中放置新行
How to put new lines in p tag in contentEditable div
问：
我有一个 contentEditable div，每当我通过按 enter 或 shift+enter 插入新行时，新行都是 div 中的 textNode，但我希望新行位于元素中。p
我想要一个简单的解决方案
我正在使用 React Js，所以我将 contentEditable div 的内容保存在名为 updated by 的状态中，并且我正在使用组件包contentonChangereact-contenteditable
答：
1赞
Ale_Bianco
11/7/2023
#1
您可以处理该事件以拦截 Enter 按键并手动插入元素。onKeyDown<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;
评论
0赞
Quiet Coder
11/8/2023
但是，如果我尝试在内容中间添加新行，它只会在内容末尾添加新行不起作用
-1赞
Quiet Coder
11/9/2023
#2
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);
}
};
评论