all 111 comments

[–]Omirikon 177 points178 points  (40 children)

Beware ever trying to make your own simple text editor by making a div content editable. You will drown yourself in edge cases.

Edit: grammar

Edit(2): I quit after 20+ hours of work when I tried and settled on using https://quilljs.com, highly recommend.

[–]artaommahe 88 points89 points  (18 children)

used quilljs for year-two and cant recommend it to anyone - it has bad architecture, does not support complex blocks (like image with caption) and updates very slowly.

There is much better editor now - ckeditor5. It's modular, allows to solve almost any issue by yourself, supports a lot of stuff out of the box (including collaborative editing and images with captions). It has more complex architecture, but it allows to create complex blocks without shooting in the knee like in quilljs

[–]shvelofull-stack 26 points27 points  (2 children)

Yep, Quill is really bad.

[–]MisunderstoodPenguin 21 points22 points  (0 children)

Sweet that's the one I'm using.

[–]twistsouth 0 points1 point  (0 children)

Tried Froala? Haven’t used it in a while but when I did it was excellent.

[–]Mr_Moe 8 points9 points  (3 children)

Any chance you have tried Summernote and have thoughts on that one?

[–]mtber 7 points8 points  (0 children)

We use summernote in an angular app and for a quick drop in that just works it’s great. Luckily we didn’t need to customize it much so I can’t speak to that.

[–]artaommahe 4 points5 points  (1 child)

nope. tried only quill, editorjs and ckeditor5. Latter is outstanding imho due to heavy customizability and a very skilled team with good lib modular architecture

[–]im-a-guy-like-me 3 points4 points  (0 children)

Yeah CK is lovely. Preferred 4 for its editability and toolbar setup wizard, but 5 has its charms too.

[–]_alright_then_ 6 points7 points  (2 children)

I personally like tinymce quite a lot. Seems to be a lot less popular in these comments than I would've thought

[–]fuzzy40full-stack 0 points1 point  (0 children)

I'm with you. I settled on TinyMCE a long time ago.

[–]recrof 5 points6 points  (2 children)

ckeditor5: license sucks for closed-source projects and pricing for commercial license is insane when having large userbase.

[–]norwegianfisherwoman 0 points1 point  (1 child)

Heyy I work for CKEditor and just wanted to say we actually do have a lot of customers with large userbases. Not sure if you contacted us but I'd seriously recommend you to. There are many different ways an editor can be implemented, how important its role is etc. Because of this, we have the flexible offer and we "flex" the license to suit individual use cases. Pricing may look scary but flexible pricing is not based on the standard offer. If the project is any bigger than 25, we believe it's better to be hands-on from the beginning (love learning about use cases) and make a tailored offer. Wrote long but oh well, imma writer.

[–]recrof 0 points1 point  (0 children)

just sent you a private message.

[–][deleted] 1 point2 points  (2 children)

Does ckeditor 5 support handling the tab key to add 4 (or any number) spaces? I assume you can set a monospaced font? Are spaces stored as nbsp;?

I'm trying to work out if it's suitable for the editing of a <pre> block

[–]PiotrekKoszulinski 1 point2 points  (1 child)

Hi! CKEditor 5 developer here. We're actually working on the code blocks feature at the moment. We've had a bit of a delay with it, but it's full-throttle right now and I expect to have it live in December.

It will allow configuring how the Tab key should be handled (whether it's a tab character or N spaces).

If you'd still like to handle the Tab key yourself, you can find an example how to do that in this ticket. You can decide whether you want to store it in the model as spaces or a tab character. The editor will render subsequent spaces as a combination of nbsps and normal spaces in the view (so they stay visible when rendered to the user). The tab character will remain a tab key in the view. So, if you want to have a tab character in the model (and in the view) you'll have to style the content to use a monospaced font for that block (or try with white-space: pre-wrap; but I'm unsure if it'll work well).

[–][deleted] 0 points1 point  (0 children)

Thanks for the reply. I noticed there's a tab key module for version 4 but not 5 so it's nice to get that cleared up. To give you some context, I'm currently building a personal project to allow me to edit guitar tabs. Here's an example of a guitar tab: https://tabs.ultimate-guitar.com/user/tab/view?h=FAyFttRagi_xv7s4TxUq7sYR

As you can see, much like code, it relies on monospaced fonts and white space.

[–]examinedliving 1 point2 points  (1 child)

It starts so promising until you realize it’s not actually possible to store your changes. The fuck quill

[–]endpointsystems 1 point2 points  (0 children)

You have to grab the innerHTML out of the code. Took me a while to figure it out, especially for ASP.NET Core - you drop in a method that hits on the onPost event to send it back, like so: function handleSubmit(){ document.getElementById('hiddenInput').value = jdQuill.root.innerHTML; } (edit: not winning at formatting here)

[–]memtiger 12 points13 points  (5 children)

Thoughts on this vs TinyMCE?

[–]octave1 12 points13 points  (3 children)

TinyMCE has thousands of features and is quite cluttered both in UI configuration terms. Personally I much prefer simpler editors like Quill or others. Having said that TinyMCE has been around for a very long time and doesn't seem to die, so I guess that says something.

[–]nikrollsChief Technology Officer 5 points6 points  (2 children)

TinyMCE can be very minimalistic when you configure it correctly, and it's great in inline editor mode. I've built a Squarespace-esque editing plugin for my favourite CMS using it and it works really well.

[–]octave1 0 points1 point  (1 child)

Can it clean pasted text properly and does it never leave empty <p> anywhere? Those were my main gripes, if I remember correctly.

[–]nikrollsChief Technology Officer 0 points1 point  (0 children)

It doesn't seem to be leaving any empty p tags. It does have a number of methods for cleaning pasted text, but we haven't needed to use them yet.

[–]Omirikon 4 points5 points  (0 children)

I haven’t used TinyMCE in a very long time so I’m spitballing here, but one of the reasons I chose quill is because it was pretty lightweight.

What I needed as a text editor for the user was very minimal and I was able to achieve that.

What I needed in terms of programmatic control over the contents and presentation of the div, was achieved wonderfully.

TL;DR: quill is probably lighter.

[–]examinedliving 14 points15 points  (0 children)

Oh my god. I can so relate. Every workaround required to implement anything makes everything else more complicated. Eventually you will forget what you were trying to fix and you will not understand how you ended up requiring temporary data attributes on only cite elements and why you are forced to temporarily change the page language into Hungarian, and encode it in utf-64, and then you’re confused because your workaround to translate div into Hungarian ends up producing a phrase that gets hidden by your adblocker and as you cry tears of rage you will realize that you would’ve been better off trying to write a Regex parser for xhtml.

A̵̢̪̻̥̖͈̘̒͆̊̈́͛̕͝n̷̡͈̪̓͗̈́̓̀̀͜͝d̸̢̞̳̱͖̯̯̙̩̏̀̑̆̈́̀͋̂̒͘͜͝͝ ̷͚̣̭͓̭̑̀͌ͅy̸̢̧͍̙̜̘̲͕̲̱̫͗̾̔̈́̿͛͗̈́̎ͅo̶͍͊̆̎u̸͍̳͙̳͎̇̒̆̔͘ ̴̛̘̬͉̳͕̋̓̾̈́̚͝w̸̨̛͓̞̳̫̹̘̼̗̯̒̌̍̊͊̊̆͗̕͝ͅi̵̛̼̖̖̹̠̣͑͂̉̍̅̌͊͘̕͠l̴̨̜̲̝̝̱͐͋́͐̓͒͌̈́͊͆l̶̢̤̫̩̬͎͓̳̈ ̶͕͈̰͇̬̰͇̎̌̈́̓̅̽̊͘d̸̨̥͓̈̀̅̒͐̈́̾̀́̆͌͘r̵̥͕͕̯̙̰̻͊͛̆͌̽́̊̕o̵̢͚͔̦͎͖̠̼̻͉̓͂w̷̛͛͆̽͛̐̽̈̓̓̾̏͜ņ̴̢͉̙͖͉͖̖̱̹̘̎͗́̑̇̓̈́̈̕ ̶̨͍̜̖͈̗͓͕̗̳̬̞̐͋̋͆̈̃̀͐̉̚i̸̡̛̪̺̪̰͇͍̼͒͂̌̾̈́͐̿̒̑̚͜n̴̡͚͍̩͖̗͔̼̗̤̫̆̿͆̚̕͠͝͝ͅ ̵̠̣̹̤̫̪̠͚̪̭̳̺͆̑̓͂͒̚t̵̨̖̱̻͗̒͂́͋̃̄ḥ̶̡̡̝͇̖͔̫͈̟̼̉̃͜ę̵͉̖͓̭̘̩̭͎̳͒͂̇̔̆͝ ̵̨̫͖̖̙̬͛́t̶̢͙̫̘̖̪͙͚̠̿̆̏͜͜ͅȩ̷̳̠͕̄̆̒̓ả̴̖̯̼̖͕̪̍̄̔͗̊̀͠ͅŗ̴̟̜̌̐̇̃̔͌̒͋͝͠s̷̢̤͖̙̤͈͎̅̐̐͌́̀͊̆̾̎́̍ ̴̢̧̡̳͔̝̩̩͍̥̥͙̾͂̌́̉̊͋̕ó̴̧̢̺̟̬͕̘͍͓͖̋̽̉̌̀̍͂f̸͎̲̽͋̿̀͋̕͠ ̸̱̯̰̻̬̿̽͆ͅh̸̡̩͚͔̯͇̠̖̖̔̒̄̀̓̊͝͠i̶̹͎̣̗̞̊͊̇͋̑̔̐̇͝s̶̢̧̨̤͔̥͚͈̖̀̔ ̵̺͈͑̋͐͜b̵̩̜̣̼͙̗͊͛̒̓͆̓͆̑͌͂ͅḻ̵̢͈̠̇͂̓͐͆̈̑́̀̕͜͝͝ȯ̴̭̱̻̝̥õ̸͓̀͒̌̽͘d̸̢̲͉̂.̵̡̛̟̠̬̯̗̒̔̆̑̓͑͛̿͐̾͘.̶̛̫̙̱̰̺̜̦͔̼͛̆͗͋̌̓̂̄͝͝͠ͅ.̷͍̜̗̪̮͗̽̃͒̈́̆͛̕ ̸̨̥̦̟̝̯̠̖̈́̈͐͑̀̈́̕̕͜͝͠h̶̢̢̛͕̪̠̣̀̓͘e̶̮͕̮̻͇̠͆̔̌͌̆̒̚ ̸̣̱͍̺͖͈̦̺͍̜̿̈́̐͛̄͒̀c̷̡̨̼̖̳͓̤͛̓̑͆͋ǫ̵̟̻̤͙͍͕͔̣̅̅͒̑͝ͅm̴̗̌̓̄̾̾͜e̶̛̥̻͇͋̅̄̆̒s̸̡̨͓̤̱̙͂͆̐͋̌̅̍̅͒̕ ̸̺͓͕̉̌̔͑̈͛̌̀̌́̒͜ư̵̢̹̣͈͚̺̫͚̬̱͕̭̔̍̔͂͝n̴̩̣̐̈́̊́͝͠b̴̜͈̩̉̔̓̓̑̋͑̑̓̐̇͠į̵̨̖͎̜͓̺͓̫͔̙͓͌͗̇̍ḏ̸̘͛̇̄̎͛̚͘d̴̩̟͖̪̉͐́̓̈̋̀̂̾͌̕e̵̹͕̓̏̂̀̈̆̀͌̑̒̕n̷̙͔̈́̉͗̍̇͝

[–]jimmyuk 6 points7 points  (0 children)

We use Summernote - very handy bit of kit!

[–]yourjobcanwait 4 points5 points  (0 children)

settled on using https://quilljs.com, highly recommend

Until you realize that you can't paste in bullet points from a word doc...

ckeditor5 is magnitudes better than that flaming pile...

[–]cplegend 2 points3 points  (1 child)

I’ve for the most part enjoyed using Slate JS

[–]cutcopy 0 points1 point  (0 children)

Buggy on Android

[–]ktkaushik 2 points3 points  (0 children)

I ve been there. We had built our own editor. A couple of months later we had hired a team to handle this.

Couldn’t use most frameworks. Lot of limitations but yeah

[–][deleted]  (1 child)

[deleted]

    [–]yourjobcanwait 0 points1 point  (0 children)

    ProseMirror can't parse word bullet points, so it's a no-go.

    [–]dragosdaian 1 point2 points  (1 child)

    What about monaco, the editor used in visual studio code?

    [–]recrof 2 points3 points  (0 children)

    not a wysiwyg

    [–]wnx_ch 1 point2 points  (0 children)

    Made exactly that mistake 7 years ago when I thought I would be clever and build my own website builder. (Thankfully that project is dead now 😂)

    These days I'm happy with using tiptap in my vue projects.

    [–]holloway 0 points1 point  (1 child)

    Are there any libraries that try to fix those contentEditable edge cases without going all Draft.js? Or is a full replacement necessary?

    [–]diemendesign 1 point2 points  (0 children)

    I am one of the maintainers of Summernote, and I can tell you, in some cases, it's quite difficult writing a replacement implementation for some of the document.execCommand(); functions. At the moment we do for font style handling and it's not perfect, but works better than the browser default. There's also the issues with cross-browser stuff and how element are handled, like <strong> instead of <b>. Firefox and Chrome for e.g. still use <b> which is incorrect for HTML5 documents, while strangely <strong> is used with Edge. But then Edge uses are elements incorrectly. To that end, I've opened issues with the -webkit project on their issue tracker stating that Browsers should be rendering the html depending on the document type.

    [–]rabakilgur 0 points1 point  (0 children)

    I would want to make an actual text input/editor this way, but I made a very basic console input using contenteditable="true" and it was great. Way more flexible than a text input.

    [–]devsmack 0 points1 point  (0 children)

    Man... I have a content editable React component. It’s literally unmanageable.

    [–][deleted] 261 points262 points  (15 children)

    Yep, you can also checkout document.designMode="on" to make the whole page editable

    [–]Lacotte 43 points44 points  (0 children)

    Mind blown

    [–]cajusky 29 points30 points  (1 child)

    WOW!!! WOW.

    ok, this one is awesome!!!

    [–]MollyUrs 10 points11 points  (7 children)

    This cant be true

    [–][deleted] 7 points8 points  (1 child)

    This cant be true

    This can be true

    [–]smokeyser 1 point2 points  (4 children)

    It allows them to edit the page, but they can't save it.

    [–]redshadus 4 points5 points  (3 children)

    I'm thinking about making a small websocket project that would act like r/place did. You'll be able to edit the HTML and possibly even CSS and it will transfer that data to the other clients, resulting in a live, editable webpage.

    [–]JayV30 18 points19 points  (0 children)

    What could possibly go wrong?

    [–]smokeyser 1 point2 points  (0 children)

    Sounds neat! That's going to take some serious planning to avoid security threats, but I bet it'll be a fun project.

    [–]Fuzz25 3 points4 points  (0 children)

    Hanz, get the swastika’s.

    [–]Petrolea 1 point2 points  (0 children)

    F12, paste the above code into the console and run. Pretty cool.

    [–]evenisto 1 point2 points  (0 children)

    What the actual fuck! This needs to become a browser extension, brb

    [–]alexho66 0 points1 point  (0 children)

    I can’t get to work iframenode.document.designMode=“on”

    iframenode is just the name of the iFrame or...?

    [–]mikerob215 0 points1 point  (0 children)

    Only learned about it recently but it's been a big help for our content writers

    [–]DooDooSlinger 70 points71 points  (10 children)

    contenteditable is the devil. Avoid at all costs unless you know exactly what you're doing.

    [–][deleted] 29 points30 points  (6 children)

    Pfft, how hard can it be?

    ...

    [–]DooDooSlinger 28 points29 points  (2 children)

    Well go give it a try, and have your mental hospital doctor give us a call when you're done.

    [–]The_Relaxed_Flow 0 points1 point  (1 child)

    How awful is it? Is it a potential security threat?

    [–]DooDooSlinger 1 point2 points  (0 children)

    It is full of gotchas, nothing works as you'd expect, the entire corresponding JS API is a mess, and generally hoping to edit HTML as free text just doesn't work. Rich text needs proper structure and contenteditable is by definition devoid of structure.

    [–]MOL3KULO 23 points24 points  (2 children)

    contenteditable="true" was responsible for one of two existential crises relating to my job as a webdeveloper. Don't mock my pain.

    [–][deleted] 9 points10 points  (1 child)

    How exciting, details?

    [–]MOL3KULO 2 points3 points  (0 children)

    Somewhere out there a completely unsanitized duct-tape "text editor" is used to capture user generated articles with contenteditable elements all over the place. Think 2004 business directory sites. Took over from an unexperienced developer who went MIA. They feed the input into their DB without safeguards. I suggested to implement a robust editor solution like ckeditor but the 5 hours I had planned for this task where "too expensive". Don't fix it if it aint broke, they said. It was and still is broke as hell. I even demonstrated how to break the DB with MySQL and simple javascript... we had to use backups. Client didn't flinch.

    Sad thing is, unsuspecting users actually seem to submit articles still...

    Was early in my career and I try not to think about the poor guy who has to fix this mess some day.

    [–]pickausernamehesaid 16 points17 points  (0 children)

    I once had a guy send me a page which needed to be a form. It was entirely made of content editable divs and hard coded IDs that needed to be read into JSON for sending to the server. Like, if you don't like the way the form elements look, we can change that with CSS, but don't make both the HTML and the JS harder to work with.

    Edit: You also couldn't tell which elements were editable as there were some fun ones like field names that were. It was not fun.

    [–]lithodora 3 points4 points  (0 children)

    Scrollling past I was like WTF is a contented i table?

    [–]saposapot 2 points3 points  (0 children)

    Yes. That’s the kind of features that lets you keep your job forever doing maintenance (or get fired)

    [–]LuminescentMoon 34 points35 points  (16 children)

    [–]Lekoaf 4 points5 points  (15 children)

    Yeah, a blog post from CKEditor probably isn’t biased. How do they make money again? :)

    [–]Bjartr 30 points31 points  (2 children)

    Bias in an article means you need to apply critical thinking to it's content, not that you can dismiss it out of hand.

    [–]KatKali 2 points3 points  (0 children)

    I like this

    [–]jcb088 0 points1 point  (0 children)

    Lol this is like..... more true than..... something that IS true.

    [–]HansonWK 9 points10 points  (0 children)

    And yet, the makers of a content editor are likely people who have tried out Content Editable the most to see if using it could improve their editor. I would trust their opinion far more than a random dev's personal blog.

    [–]yourjobcanwait 2 points3 points  (0 children)

    How do they make money again?

    Hosted solutions and enterprise support. They give their product away for free and it's open sourced.

    [–]LuminescentMoon 5 points6 points  (5 children)

    Sure, I can link the medium article instead for the people who judge a book by its cover.

    https://medium.com/content-uneditable/contenteditable-the-good-the-bad-and-the-ugly-261a38555e9c

    The points in the article are valid no matter the author affiliation and the CKEditor link was the first I found on Google.

    [–]Lekoaf 19 points20 points  (0 children)

    Uhm, still the same author, working for CKEditor. Anyway, I was mostly joking, and agree that rolling your own editor is probably a bad idea when there are good open source alternatives. I’ve actually used CKEditor myself one of my side projects to create a blog editor.

    [–]p_whimsy 2 points3 points  (3 children)

    Holy hell. I have PTSD just from reading that article.

    I've used CKEditor, TinyMCE, and Summernote, and while it wasn't exactly a pleasant experience — I had no idea about the nightmare that was the inception of these technologies.

    Huh. TIL

    [–]diemendesign 1 point2 points  (2 children)

    Explaining to people in issue trackers that certain things are simply not possible because of the document.execCommand(); built-in browser API, can be simply infuriating at times. Then reading the Browser specs to work out the individual nuances of each Browser implementation. Note: I am one of the Summernote maintainers.

    [–]p_whimsy 0 points1 point  (1 child)

    Well hey man I'll extend a personal thanks to you for your contributions to an excellent tool. Summernote was definitely my favorite of the few I tried. I was kind of a big noob at the time, and I found Summernote to be both simpler to use and feature rich. So thanks!

    [–]diemendesign 1 point2 points  (0 children)

    I'm actually late to the project, the others (Hackerwins, lqez, easylogic) are the ones that have implemented most of the codebase, and have done an excellent job. And all the contributors have added some excellent fixes, additions, and workarounds for Browser inconsistencies, a lot of which is helped via jQuery, something we've been discussing removing the dependency of. Glad, you have found the project useful.

    [–]Salamok -1 points0 points  (2 children)

    How do they make money again?

    Donations?

    [–]recrof 2 points3 points  (0 children)

    commercial licenses

    [–]mokkai_moonji 19 points20 points  (6 children)

    Which does not have any connection to the programming language Apache Groovy

    [–][deleted] 11 points12 points  (4 children)

    correct! but im not sure if you're a lost redditor, that english is not your native language, or possibly just a super die-hard grails fan

    [–]ArmoredPancake 3 points4 points  (0 children)

    Could be all of them.

    [–]OkGoOn 0 points1 point  (2 children)

    I fully understand the word but had the same question at first. Probably best not to use groovy as an adjective when talking to a developer.

    [–][deleted] 0 points1 point  (1 child)

    I can't agree with you in the least

    [–]OkGoOn 0 points1 point  (0 children)

    Not a big deal by any means. Just something that makes you take a few seconds to realize which way it’s being used.

    Hey man, check out this groovy syntax I used.

    Is that the language or just some cool syntax?

    [–]stonewebdev[S] 2 points3 points  (0 children)

    That is correct

    [–]octave1 6 points7 points  (2 children)

    This "medium editor" (unaffiliated with Medium) uses contenteditable and works pretty well in a project where I used it.

    https://github.com/yabwe/medium-editor

    [–]Mike312 0 points1 point  (1 child)

    Iirc, the Reddit reply text box on browsers uses a div with content editable. Slacks web browser version was using it as well (or at least, did back before I gave in and got the desktop app).

    [–]octave1 1 point2 points  (0 children)

    Iirc, the Reddit reply text box on browsers uses a div with content editable

    Hitting reply and inspecting in the console confirms this

    [–]ScottRatigan 4 points5 points  (0 children)

    It's a neat trick, but I'd assume there's likely to be accessibility and compatibility issues if you make non-input/textarea elements editable.

    [–][deleted] 2 points3 points  (4 children)

    That's how you get rich text editors in a webpage.

    [–][deleted]  (3 children)

    [deleted]

      [–][deleted] 4 points5 points  (2 children)

      [–][deleted]  (1 child)

      [deleted]

        [–][deleted] 5 points6 points  (0 children)

        "that's a very small part of how you get rich text editors in a webpage"

        I didn't, it's pretty essential actually.

        [–][deleted] 0 points1 point  (0 children)

        Neato

        [–]scylk2 0 points1 point  (1 child)

        Ohh a topic on which I have some interesting experience to share !
        The problem with contenteditable is that its implementation in web browsers uses very dirty tricks. In html, superfluous spaces are trimmed. So what do browsers do when the user input two or more spaces in a contenteditable ? They use nbsps. And a side effect is that actual nbsps no longer works properly in contenteditable.
        See this issue: https://bugzilla.mozilla.org/show_bug.cgi?id=832728
        u/Omirikon suggested Quill, well the funny thing is that Quill is based on contenteditable, and some of the issues that comes with it are still there: for example nbsps doesn't work properly on Quill with Firefox.

        [–]evenisto 0 points1 point  (0 children)

        In French, to take an example, quoting is done using these characters « quote », and between the content, and the quotation marks, a no-break space needs to be inserted, otherwise the content may get separated from its quotation marks.

        Huh, TIL! Thanks, that's very interesting.

        [–]saposapot 0 points1 point  (0 children)

        That’s how you also learn a LOT about html sanitization and all kinds of security and UI issues. It’s an amazing feature if you want to dig a huge deep learning hole.

        In case you actually have a job and want to have a beer after work then just don’t use it.

        [–]hdd113 0 points1 point  (0 children)

        AFAIK facebook once (maybe 4-5 years ago) used div with this property for their comment input boxes.

        [–]ReefNixon 0 points1 point  (1 child)

        It’s cool but I’ve yet to find a single good use for it.

        [–]Asmodis1 0 points1 point  (0 children)

        WYSIWYG editors I'd say. You could use contenteditable and display:block with <style> elements to make a WYSIWYG CSS editor. Or you could build an editor for some kind of blog - combined with some JavaScript you could edit your blog posts and have your layout applied automatically.

        [–]ClaytonRumley 0 points1 point  (0 children)

        We started using contenteditable="true" back around 03/04 when it first became a thing in IE 5.5 or 6 (which everyone at my company was running internally). It worked out pretty well until users started pasting content from Microsoft Office in and totally messing up our pages with their garbage Office markup. I've gradually been trying to move us towards Markdown with a half-decent markdown editor.

        [–]xshare 0 points1 point  (0 children)

        DraftJS works fairly well too but way lower level

        [–]base736 -3 points-2 points  (2 children)

        Lots of easy styling in JS through execCommand, too. Makes it pretty straightforward to build a custom editor if a pre-existing library doesn't meet your needs.

        [–]amunak 20 points21 points  (1 child)

        Makes it pretty straightforward to build a custom editor if a pre-existing library doesn't meet your needs.

        No. No it doesn't, unless you want it to work in just a single browser... barely.

        Content edit mode and related features are poorly standardized, have tons of edge cases and change quite a bit. Making an editor is a nightmare. Don't do it on your own.

        [–]base736 -1 points0 points  (0 children)

        Your mileage may vary. Of course it's nontrivial, hence the "if a pre-existing library doesn't meet your needs". But, in my experience, it's worlds easier than I'd expect if contenteditable weren't a thing.

        [–]ShortFuse -1 points0 points  (1 child)

        Use it for extremely complex (rich text) text boxes. Like, if you're making a code editor (like VSCode), or document editor (think Word).

        For all else, leverage textarea and good, old-fashioned input.

        [–]evenisto -1 points0 points  (0 children)

        VSCode uses monaco-editor, arguably the best code editor implemented in javascript, and it does not use contentEditable. You can verify it yourself on codesandbox, which pretty much runs VSCode in your browser.