top | item 33747699

(no title)

jesushax | 3 years ago

TIL about the contenteditable attribute, which it turns out can be used on arbitrary elements to make them editable!

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

You seem like a really cool person!

discuss

order

blacksmith_tb|3 years ago

That made me think... it should be pretty easy to set that attribute on every element in the DOM (overkill, but then it makes every piece of text on the page editable, poof!) I can imagine giving that to not-too-technical users to play with changing things on a page - as long as they could paste a one-liner into the dev console:

document.querySelectorAll('*').forEach(function(node){node.setAttribute('contentEditable','true')});

personjerry|3 years ago

Editable content also supports rich text copy-and-paste, so you can literally control+c a portion of a site and control+v into a content-editable, and it will look exactly how it did on the other site :D

paulcole|3 years ago

When I used to demo sites to clients, before the meeting started, I’d go into the inspector and set body to be contenteditable.

That way I could edit text while they talked and at the end of the meeting I’d just do a full-page screenshot.

The problem with letting non-technical users have at it is that they don’t realize it’s temporary.

jcparkyn|3 years ago

Bonus tip: set `display: block` on a style tag and add `contenteditable`, then users can even edit your page styles in real-time.

davidbanham|3 years ago

Just before you get too far down the content-editable-is-amazeballs rabbit hole I have to have a quick talk with you.

Sadly, the cross browser support situation is pretty flaky. In practice this means you’ll find a lot of variance in the user input you get depending on which browser it’s coming from. Makes it really difficult to keep styling consistent or parse the content of it.

Sadly this is one of those times we can’t have nice things.