Question about contenteditable & execCommand

[WolfShade]

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,

^ _ ^

[WolfShade · Accepted solution]

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

V/r,

^ _ ^

[pziecina]

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

[WolfShade]

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,

^ _ ^

[pziecina]

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

[WolfShade]

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,

^ _ ^

[pziecina]

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.