Saving contenteditable elements text to DB vs Textarea

JavaScript
,
1

Hello,

I am working on an edit comment script that will allows users to edit their comments, this is done with JavaScript/Jquery.
The end goal is simply to allow users to click the “Edit” button, which will convert the comment to an editable element, this could either be a textarea, or a div with contenteditable enabled, which of those is best i do not know and would appreciate clarification on since i could not find an answer for that online.

In the mean time, i have tried using a contenteditable div.
Clicking on the “Edit” button adds some styles to make the div look like a textarea, and i added the contenteditable attribute to make the element editable.
There is also a listener on the element that when saving the edit (either by clickin on the “save” button or pressing ctrl+enter), the div element will revert back to what it was with the new text, and the new text will be sent to the database through ajax.

The issue that i am having with this is that i cannot figure out how to properly get the correctly formatted data, for example, when i enter this in to the element:

test1

test2

Its output is actually:

test1


test2

An extra line break is added, and when i see what the code actually shows, it shows this:

test1<div><br></div><div>test2</div>

I have tried a few different things, but nothing has worked so far, i also tried document.execCommand("defaultParagraphSeparator", false, "p"); but that didnt work either.

The code i am using to get the new text from the contenteditable div is this:

commentTextNew = formElements['commentTextEle'].html().trim()
.replace(/<br\s*\/*>/ig, '\n')
.replace(/(<(p|div))/ig, '\n$1')
.replace(/(<([^>]+)>)/ig, "");

which outputs:

test1


test2

(adding an extra line break).

Any thoughts? maybe using a textarea is better and just switching between them is a better option?
This comment system is based on javascript/jquery, so when the new comment is saved, it does it through ajax, so a full form isnt required, only the textarea/editable div.

2

Hi @Divuni, yes this seems right – it adds a div containing only a br, which renders as a single blank line… if you don’t want to get some actual markup, a textarea might indeed be the better choice here.

As for your code though, you’re first replacing the <br> tag with a line feed and then the surrounding as well as the following <div> tag, resulting in 3 line feeds and thus 2 blank lines. Parsing HTML using regular expressions is notoriously difficult and error prone; I’d suggest to use the DOM API instead, e.g. with jQuery like so:

<!-- Sample comment content -->
<div class="comment">
  foo<div><br></div><div>bar<br></div>
</div>

const $comment = $('.comment').clone()

$comment.find('div, p, br').replaceWith(function () {
  return '\n' + this.textContent
})

console.log(
  $comment.html().trim()
)
3

Hey, thanks for the help and explanations, i tried the code you gave in the end, and it does work better, but it also adds an extra line break.
First, i edited a comment that only said “test” and changed it to:

test

test1

This worked fine, but when i added another:

test

test1

test2

All of a sudden it added an extra line break above test1… not sure why.

But, i do wonder if this is all necessary and if its not best to just go with a textarea, that way i also wont have to deal with excluding any text styling and canceling keyboard commands except copy/past/select all, because textareas dont support text styling, and i wont have to deal with all the text format conversions.

1 Like
4

I couldnt get this to work, so i just finished working on converting it to a textarea.
When the user clicks on “Edit”, the content from from the comment element is added to a textarea value, and then the comment element is replaced with the textarea, when done, its reverted.

I still do wonder which would be best, using a textarea or using a contentEditable approach.
I have been reading comments and articles on it and it seems maybe its just a matter of preference and requirements:
If you need text formatting and styling = contentEditable, if not = textarea.

5

Yes by all means, if you don’t need the generated markup anyway better go with a textarea. There also seem to be some browser inconsistencies regarding the editable content – e.g. chrome will also wrap the first text node in a div while FF will not. Just be sure to sanitise the textarea value before saving / rendering it, or just use text() rather than html() to prevent XSS attacks.

Here’s a small example how you can pretty much mimic the editable content behaviour:

1 Like
6

Thanks! Ill check that example out, and I will stick to the textarea, I dont see a reason for the contentEditable at the moment and everything is working with the textarea, so its done for now.

Thanks for the help!

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.