Div 内容可编辑按 Enter 键时插入新元素

Question

对于我的项目，前端用户需要能够将数据发送到我的服务器。 这些数据应该很简单（不允许自定义 html），但问题出在这里，

当客户端按下“enter”按钮时，chrome 会添加一个“div”元素，但是当您将插入符号放在该 div 内的文本之间并再次按下 enter 时，它会创建另一个嵌套在前一个“div”中的“div”。

我想要实现的是，每当客户端按下“输入”时，它都会创建一个“div”（作为新行），如果插入符号位置在文本之间，它会拆分文本并在之后创建一个新的“div”现有的。

例子：

<div contenteditable="true">
    <div class="text">Some text</div>
    <div class="text">Some more text</div>
</div>

所以当我将插入符号放在“更多”和“文本”之间并按 Enter 时，它应该变成这样：

<div contenteditable="true">
    <div class="text">Some text</div>
    <div class="text">Some more</div> <-- caret between "more" & "text"
    <div class="text">text</div> <-- becomes this
</div>

我正在使用 Vue.js，我搜索了大约 5 个小时来寻找具有这种行为的简单前端编辑器，我只找到了 Draft.js，但它是基于 React.js 构建的，我找不到 Vue.js 替代品.

我希望这种行为能够为输入提供一些结构，这样我就可以在服务器端轻松处理数据。

有人可以帮助我实现这一点，或者有人知道 Vue.js 解决方案吗？我不想要一个成熟的 WYSIWYG 编辑器。

Answer 1

您描述的行为是我从 Chrome 中的 contenteditable 中得到的。唯一的问题是，如果您删除所有内容，则需要重置它。这还不是 Vue-ified，但我想看看问题是否定义正确。

const out = document.querySelector('.contents');
const source = document.querySelector('[contenteditable="true"]');
source.addEventListener('input', () => {
  if (source.innerHTML === '') {
    source.innerHTML = '<div class="input-text"><br></div>';
  }
});
setInterval(() => {
  out.textContent = source.innerHTML;
}, 200);

<div contenteditable="true">
    <div class="input-text">Some text</div>
    <div class="input-text">Some more text</div>
</div>
<pre class="contents">
</pre>