Skip to main content
WolfShade
WolfShade
Legend
May 10, 2018
Answered

Question about contenteditable & execCommand

  • May 10, 2018
  • 2 replies
  • 766 views

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,

^ _ ^

    This topic has been closed for replies.
    Correct answer WolfShade

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

    V/r,

    ^ _ ^

    2 replies

    pziecina
    pziecina
    Legend
    May 10, 2018

    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
    WolfShadeAuthor
    Legend
    May 10, 2018

    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
    pziecina
    Legend
    May 11, 2018

    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.

    WolfShade
    WolfShadeAuthorCorrect answer
    Legend
    May 10, 2018

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

    V/r,

    ^ _ ^

    pziecina
    pziecina
    Legend
    May 10, 2018

    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
    WolfShadeAuthor
    Legend
    May 10, 2018

    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,

    ^ _ ^

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices