Div內容可編輯，按Enter時插入一個新元素

Question

對於我的項目，前端用戶需要能夠將數據發送到我的服務器。 此數據應該很簡單（不允許使用自定義html），但這是問題所在，

當客戶按下“輸入”按鈕時，鑲邊會添加一個“ div”元素，但是當您將插入符號插入該div內的文本之間並再次按Enter時，它將創建嵌套在先前“ div”中的另一個“ div”。

我想要實現的是，每當客戶按下“ enter”鍵時，它都會創建一個“ 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解決方案？ 我不想要一個完整的所見即所得的編輯器。

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>