DIV内容可编辑在按Enter时插入新元素

Question

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

客户端按下" Enter"按钮Chrome添加了" DIV"元素时，但是当您将Caret放在该DIV内部的文本之间并再次按Enter中，它会创建另一个嵌套到上一个" Div"中的" Div"。

我要实现现有的。

示例：

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

因此，当我将伦名放在"更多"one_answers"文本"之间时，请按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个小时，我只找到了草稿。。

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

有人可以帮助我实现这一目标，或者有人知道vue.js解决方案吗？我不想要完整的wysiwyg编辑器。

Answer 1

您描述的行为是我从Chrome中可满足的。唯一的收获是，如果您删除所有内容，则需要将其重置。这还不是Vue的，但是我想看看问题是否正确定义。

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>