CODEWITHSUNDEEP
javascripthtmlvue.js
SirCumz
SirCumz

Reputation: 171

Div content editable insert a new element when pressing enter

For my project front-end users need to be able to send data to my server. This data should be simple (no custom html allowed) but here is the problem,

When the client presses the "enter" button chrome adds a "div" element, but when you place the caret in between text inside that div and press enter again it creates another "div" nested into the previous "div".

What i want to achieve is that whenever the client presses "enter" it creates a "div" (as a new line) and if the caret position in between text it split up the text and creates a new "div" after the existing one.

Example:

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

so when i put my caret between "more" and "text" and press enter it should become this:

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

i am using Vue.js and i searched for like 5 hours for a simple front-end editor with this behavior and i only found Draft.js but that is build on React.js and i could not find Vue.js alternative.

I want this behavior to give the input some structure, this way i am able to process the data easily on the server side.

Can someone help me to achieve this, or maybe someone knows a Vue.js solution? i do not want a full blown WYSIWYG editor.

Upvotes: 1

Views: 2058

Answers (2)

Mayank Verma
Mayank Verma

Reputation: 1

If this problem persists, there is a very simple fix—all you have to do is utilise event on listener, event.preventDefault(); and boom, it won't insert a new element on clicking enter

Example: React.js

const handleClick= (event) => {
  event.preventDefault();
  // Perform you operation here
}

Upvotes: 0

Roy J
Roy J

Reputation: 43901

The behavior you describe is what I get from a contenteditable in Chrome. The only catch is if you delete all the contents, you need to reset it. This isn't Vue-ified yet, but I want to see if the issue is defined properly.

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>

Upvotes: 1

Related Questions