Highlighted

Question about contenteditable & execCommand

LEGEND ,
May 10, 2018

Copy link to clipboard

Copied

Hello, all,

I am, for the first time, immersing myself in contenteditable and execCommand.  Very interesting.  I think I like it.

I do have one question, though.  I've been Googling for it, and not finding any answers.

Every example that I've found, so far, all use "document.execCommand()", which affects the whole document.  Is it possible to use execCommand on a specific element, only???

I'm working on a custom CMS for a blog, and I want to give moderators a way to edit user comments (in case a user inserts PII - Personally Identifiable Information - or uses profanity, or some such).  Now, I don't think that any moderator would edit more than one comment at a time - but I can't think that it won't happen.  Yes, I know, I'm being pedantic, OCD, and just plain weird about this, but that's who I am.    So, I want to set my JavaScript so that if an undo button is clicked, it will only affect the editable area that it is associated with.

Is this possible?

V/r,

^ _ ^

The answer would be NO.  You cannot specify an element and have only it affected by execCommand().

V/r,

^ _ ^

Views

294

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Question about contenteditable & execCommand

LEGEND ,
May 10, 2018

Copy link to clipboard

Copied

Hello, all,

I am, for the first time, immersing myself in contenteditable and execCommand.  Very interesting.  I think I like it.

I do have one question, though.  I've been Googling for it, and not finding any answers.

Every example that I've found, so far, all use "document.execCommand()", which affects the whole document.  Is it possible to use execCommand on a specific element, only???

I'm working on a custom CMS for a blog, and I want to give moderators a way to edit user comments (in case a user inserts PII - Personally Identifiable Information - or uses profanity, or some such).  Now, I don't think that any moderator would edit more than one comment at a time - but I can't think that it won't happen.  Yes, I know, I'm being pedantic, OCD, and just plain weird about this, but that's who I am.    So, I want to set my JavaScript so that if an undo button is clicked, it will only affect the editable area that it is associated with.

Is this possible?

V/r,

^ _ ^

The answer would be NO.  You cannot specify an element and have only it affected by execCommand().

V/r,

^ _ ^

Views

295

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 10, 2018 0
LEGEND ,
May 10, 2018

Copy link to clipboard

Copied

The answer would be NO.  You cannot specify an element and have only it affected by execCommand().

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2018 0
LEGEND ,
May 10, 2018

Copy link to clipboard

Copied

Not 100% certain what you are trying to do, but if you set the contenteditable to true and prefix it with the target element (p.contenteditable(true).   ) then this will target the 'p' element, and allow changes only on that specific element, (which should turn light grey).

Just for info if you look at Dw's live view in live edit mode, you will see the content editable api in action, though not the updated version that is part of the html5 specs, (the editable content api is just one example of what is missing in Dw).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2018 0
LEGEND ,
May 10, 2018

Copy link to clipboard

Copied

I appreciate your input.  But I have learned about setting contenteditable to true, although I did it differently than you (jQuery.attr('contenteditable','true')).  The thing is that if a blog post has more than one comment, all comments can be edited at the same time.  Again, not that I think a moderator necessarily _would_ do that; but I can't swear that a moderator won't.  And just to test it, I set three comments to editable, made a minor change in all three, and clicked ONE undo button three times.  All were undone.  Because undo affects the whole document, and can't be limited to just one element.

Seems kind of counter-intuitive, if you ask me, given that most things _can_ be limited to a single element; or conversely many/all.

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2018 0
LEGEND ,
May 10, 2018

Copy link to clipboard

Copied

Don't know if you have read the html5 specs for editable content -

https://html.spec.whatwg.org/multipage/interaction.html#contenteditable

Just as a bit of history on the spec.

It was originally from IE5, (expanded on in 5.5) and most of the specs were written for use with the IE browser and sharepoint server. Originally used to allow users to create their own layouts and editing facilities, (at least that was what I used it for).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2018 0
LEGEND ,
May 10, 2018

Copy link to clipboard

Copied

I took a long, hard look at this issue, ran at it as fast as I could, head-faked to the left, and slam-dunked it into the net.

Instead of having each comment div editable, the edit button now opens a modal, populates a textarea with the content, and the form submit updates the database and refreshes the content in the div. 

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2018 1
pziecina LATEST
LEGEND ,
May 11, 2018

Copy link to clipboard

Copied

Thank for posting your solution.

I don't know how many people use the editable content feature, (given that this is the Dw forum) but your solution is probably the most common. If you still wish to allow multiple edits, one solution I have seen is to store each edit into an array, (placing the number of edits counts into the button, (so the button shows 'edits(3)' )), and the number decreases/increases each time it is pressed, with the text showing the edited content.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 11, 2018 1