4 ms·

Much of the heavy lifting is done by this simple but powerful attribute, something surprisingly few developers seem to know about. It's been around for quite a

by hliyan 2y ago

Much of the heavy lifting is done by this simple but powerful attribute, something surprisingly few developers seem to know about. It's been around for quite a while. <div id="editor" contenteditable="true">

shashanoid 2y ago
I love this. Once made a pdf editor by converting a doc to HTML then throwing in contenteditable="true" in the top-most div lol
- eps 2y ago
  I had the same bright idea, but it doesn't work Firefox. Turns out that it creates two representations of the PDF content - one is text, which has 0 opacity and another is prerendered image of the same layered on top of it. The latter is what's displayed. So while you can enable contenteditable and get the editing cursor, no changes you make will be shown. Oh, well.
- vhantz 2y ago
  What do/did you use to convert pdf to html?
hakaneskici 2y ago
I made a live demo of the concept a few weeks ago; it's such as simple but powerful hidden feature of HTML: https://news.ycombinator.com/item?id=43179649 https://news.ycombinator.com/item?id=43179649
noduerme 2y ago
Yeah, it's pretty amazing. Back in 2016 I was still doing a lot of custom sites for small/mid businesses, and realized that almost all of this could be done with WP or something except (1) WP styling is really annoying and I don't want to maintain that, (2) I didn't want to rely on plugin functionality and upgrading WP, and (3) I wanted people with different levels of access to be able to edit different parts of the same page, which is basically impossible in most CMSs. So I basically wrote a CMS from scratch that relied on nothing but contenteditable and TinyMCE, and handed those tags to the appropriate portions (with back-end checks on what people could or could not edit before it was committed, obviously). But the point is, once a client (or their employees) are logged in, they get the right to edit the portions of their own pages that they have credentials for. The CMS puts a nice little dashed border around the parts they can edit, and all of their fonts and colors are saved in TinyMCE preferences so they don't need to hunt around or muck with any HTML (although they can, if they want to). This ends up feeling rather magical to the clients, because they don't need to go to an editing page to make changes before seeing what it will look like. They just literally edit the content in place on the page, and hit save to deploy it live. Most of these sites are still in operation after 5-10 years and require almost zero maintenance on my end.
- swiftcoder 2y ago
  In about 2009, the university I worked at adopted one of those enterprise CMS thingamajigs, but this one was called RedDot, and the central UX conceit was a red dot next to every piece of content, which transformed it into an edit control when clicked... Under the hood it was about as shit as every other enterprise CMS of the era, but our users fucking loved it.
  - connorgurney 2y ago
    Ah, RedDot - that’s a throwback if I ever heard one!
  - noduerme 2y ago
    Hah. Never heard of that, but I can see how it would be a total love-fest for users. Most small site owners, such as remain these days - restuarants, small companies selling furniture, lawyers, whatever - they already have their third party sales platforms. They just want to be able to edit their own web content from time to time, without any learning curve. I never tried to commercialize my CMS, it wouldn't even make sense to do so, since it's geared toward people who want to pay $200/year for hosting once their site is up and running. (I did charge them well for building, though). But the whole thing is maybe literally 5000 lines of PHP code and a few hundred lines of Javascript and CSS. It's just structured very cleverly to read/write pages in mysql, and it has a few bells and whistles like drag/drop photo uploading in place. Barely competent PHP coders could (and have) adapted it to their own needs after I left clients. One really doesn't need the bloated structure of WP to do this stuff, just a very skeletal frame. A couple remaining examples of my CMS in action: https://thebarkerlounge.com https://thebarkerlounge.com https://vickmanassociates.com https://vickmanassociates.com
rad_gruchalski 2y ago
Reads like “oh, here’s this amazing thing, it’s called the wheel and the it’s been around for quite a while”. I’m pretty certain I’ve been working with this 20 years ago. ContentEditable first introduced in ie 5.5 in 2000, available in all major browsers in 2007.
snewman 2y ago
This one line was like 90% of the original implementation of Writely (the startup that became Google Docs; source: I was one of the founders). The other 90% was all the backend code we had to write to properly synchronize edits across different browsers, each with their own bizarre suite of bugs in their contenteditable implementations :-)
- Imustaskforhelp 2y ago
  This is a truly a great insight from how simple things can create industry giants like google docs. I believe that a lot of problems can be converted into synchronization problems in browsers. Are there any general synchronization libraries / applications that you suggest within browser / outside browser? Thanks in advance.
  - pkage 2y ago
    Not OP, but common solutions in this space represent the state as conflict-free replicated data types (CRDTs). Some popular browser-based libraries for that are Y.js[0] and Automerge[1]. [0]: https://yjs.dev/ https://yjs.dev/ [1]: https://automerge.org/ https://automerge.org/
    - nextaccountic 2y ago
      By the way, for those wanting to do this but in Rust, there is https://crates.io/crates/yrs https://crates.io/crates/yrs and https://crates.io/crates/automerge https://crates.io/crates/automerge
      - babymode 2y ago
        And Loro [1], relatively new player which recently hit 1.0, with solid performance and some features the others don’t have [1]: https://loro.dev/ https://loro.dev/
        nextaccountic 2y ago

by hliyan 2y ago

shashanoid 2y ago

I love this. Once made a pdf editor by converting a doc to HTML then throwing in contenteditable="true" in the top-most div lol

eps 2y ago
I had the same bright idea, but it doesn't work Firefox. Turns out that it creates two representations of the PDF content - one is text, which has 0 opacity and another is prerendered image of the same layered on top of it. The latter is what's displayed. So while you can enable contenteditable and get the editing cursor, no changes you make will be shown. Oh, well.
vhantz 2y ago
What do/did you use to convert pdf to html?

hakaneskici 2y ago

I made a live demo of the concept a few weeks ago; it's such as simple but powerful hidden feature of HTML: https://news.ycombinator.com/item?id=43179649 https://news.ycombinator.com/item?id=43179649

noduerme 2y ago

Yeah, it's pretty amazing. Back in 2016 I was still doing a lot of custom sites for small/mid businesses, and realized that almost all of this could be done with WP or something except (1) WP styling is really annoying and I don't want to maintain that, (2) I didn't want to rely on plugin functionality and upgrading WP, and (3) I wanted people with different levels of access to be able to edit different parts of the same page, which is basically impossible in most CMSs. So I basically wrote a CMS from scratch that relied on nothing but contenteditable and TinyMCE, and handed those tags to the appropriate portions (with back-end checks on what people could or could not edit before it was committed, obviously). But the point is, once a client (or their employees) are logged in, they get the right to edit the portions of their own pages that they have credentials for. The CMS puts a nice little dashed border around the parts they can edit, and all of their fonts and colors are saved in TinyMCE preferences so they don't need to hunt around or muck with any HTML (although they can, if they want to). This ends up feeling rather magical to the clients, because they don't need to go to an editing page to make changes before seeing what it will look like. They just literally edit the content in place on the page, and hit save to deploy it live. Most of these sites are still in operation after 5-10 years and require almost zero maintenance on my end.

swiftcoder 2y ago
In about 2009, the university I worked at adopted one of those enterprise CMS thingamajigs, but this one was called RedDot, and the central UX conceit was a red dot next to every piece of content, which transformed it into an edit control when clicked... Under the hood it was about as shit as every other enterprise CMS of the era, but our users fucking loved it.
- connorgurney 2y ago
  Ah, RedDot - that’s a throwback if I ever heard one!
- noduerme 2y ago
  Hah. Never heard of that, but I can see how it would be a total love-fest for users. Most small site owners, such as remain these days - restuarants, small companies selling furniture, lawyers, whatever - they already have their third party sales platforms. They just want to be able to edit their own web content from time to time, without any learning curve. I never tried to commercialize my CMS, it wouldn't even make sense to do so, since it's geared toward people who want to pay $200/year for hosting once their site is up and running. (I did charge them well for building, though). But the whole thing is maybe literally 5000 lines of PHP code and a few hundred lines of Javascript and CSS. It's just structured very cleverly to read/write pages in mysql, and it has a few bells and whistles like drag/drop photo uploading in place. Barely competent PHP coders could (and have) adapted it to their own needs after I left clients. One really doesn't need the bloated structure of WP to do this stuff, just a very skeletal frame. A couple remaining examples of my CMS in action: https://thebarkerlounge.com https://thebarkerlounge.com https://vickmanassociates.com https://vickmanassociates.com

rad_gruchalski 2y ago

Reads like “oh, here’s this amazing thing, it’s called the wheel and the it’s been around for quite a while”. I’m pretty certain I’ve been working with this 20 years ago. ContentEditable first introduced in ie 5.5 in 2000, available in all major browsers in 2007.

snewman 2y ago

This one line was like 90% of the original implementation of Writely (the startup that became Google Docs; source: I was one of the founders). The other 90% was all the backend code we had to write to properly synchronize edits across different browsers, each with their own bizarre suite of bugs in their contenteditable implementations :-)

Imustaskforhelp 2y ago
This is a truly a great insight from how simple things can create industry giants like google docs. I believe that a lot of problems can be converted into synchronization problems in browsers. Are there any general synchronization libraries / applications that you suggest within browser / outside browser? Thanks in advance.
- pkage 2y ago
  Not OP, but common solutions in this space represent the state as conflict-free replicated data types (CRDTs). Some popular browser-based libraries for that are Y.js[0] and Automerge[1]. [0]: https://yjs.dev/ https://yjs.dev/ [1]: https://automerge.org/ https://automerge.org/
  - nextaccountic 2y ago
    By the way, for those wanting to do this but in Rust, there is https://crates.io/crates/yrs https://crates.io/crates/yrs and https://crates.io/crates/automerge https://crates.io/crates/automerge
    - babymode 2y ago
      And Loro [1], relatively new player which recently hit 1.0, with solid performance and some features the others don’t have [1]: https://loro.dev/ https://loro.dev/
      - nextaccountic 2y ago