Edit this blog post!
By @edent
· HTML HTML5 · 10 comments · 400 words · read ~4,564 times.
This is a regular HTML page. But if you click or tap on the text, you will be able to edit it!
HTML is magic!This isn't a fancy styled <textarea>, it's a <div> element which uses the contenteditable global attribute.
There are some nifty features - depending on your browser.
- You can
- add more bullets
- by pressing enter
How 🆒 is that?!
- Same goes
- for numbered lists
- click here and type a new line
Splelcheck is enabled using spellcheck="true" so ya myte cee som wigggly rred linees underr sertin wordz.
Pre-formatted text is also editable Just tap in here and type away. Fun!
| Table | Headings |
|---|---|
| You can add text | into tables |
| But browsers don't | let you add new rows |
But, there are some limitations. You might not be able to visit this link; the browser doesn't know if your interaction event is to follow or edit.
You can't add new elements. If you type <h1> no new heading appears. You also can't indent bullet points.
The spell check will depend on which dictionaries you have installed.
You probably can't save the changes you've made. I mean, I guess you could copy and past them - but there's no native way to download what you've written.
Global attributes can be applied to any HTML5 element! Obviously, that's a bit nonsensical when applied to media elements like <img>, <video>, etc.
But you should be able to cut, copy, and paste this image to another part of the post:
Or, indeed, any other piece of content into the document.
Is there a risk that someone could edit your site to show something malicious? Yes, but they could do that anyway by editing the HTML directly in the browser.
You can also edit the page's CSS - using this little area:
<style></style>
(Thanks to Farai for the CSS tip!)
(The following bit isn't editable.)
Learn more about contenteditable on MDN.
If you've spotted any weirdness on your browser when interacting with this post - please drop me a note in the comments.
The most cursed thing you can do is make a style block visible, wrap it in a pre element and add contenteditable.
Precisely what we use our MoJ form product… for https://moj-forms.service.justice.gov.uk
Frederic Le Garrec says:
Displays well in Chrome, but does not display well in the outlook webmail view in Chrome. Interesting.
Works a treat in Firefox! 👍
Neat! You remind me that tiddlywiki.com had some trickery for saving edits back to disk via file: urls, though I forget the details. Wonder if it still works… #/cc @psd
@Edent ContentEditable all the things in the browser!https://krinkle.github.io/dom-ce/ Welcome
Most browsers have removed the ability to write back to a page loaded from a file URL, but there are quite a few other approaches the TiddlyWiki community has developed to save edits (it's essentially a quine): tiddlywiki.com/#Saving
Brett says:
"You can't add new elements. If you type
<
h1> no new heading appears."
I found that you can paste them in if you copy from another webpage. On FF anyway.
So you can’t click the <a> link, but you can do get some interactivity beyond editing – you can still click the <button> and the <label>.
Time to replace all our links with inline buttons.Z E says:
Haven't seen a "Glasshole" in a while.
I hope you're well.