Question

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

当客户按下＆＃34;输入＆＃34;按钮chrome添加＆＃34; div＆＃34;元素，但是当你将插入符号放在div中的文本之间并再次按下enter键时，它会创建另一个＆＃34; div＆＃34;嵌套在前面的＆＃34; div＆＃34;中。

我想要实现的是每当客户按下＆＃34;输入＆＃34;它创造了一个＆＃34; div＆＃34; （作为一个新行）如果插入符号位于文本之间，它会分割文本并创建一个新的＆＃34; div＆＃34;在现有的之后。

示例：

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

所以，当我把我的插入点放在＆＃34;更多＆＃34;和＆＃34;文字＆＃34;并按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中的满足感中获得的行为。唯一的问题是如果删除所有内容，则需要重置它。这还不是Vue-ified，但我想知道问题是否正确定义。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

1 个答案: