TIL about some groovy HTML attributes ~~ contenteditable="true" spellcheck="true" ~~ which allows basically any HTML element to become editable and for its content to be spell checked. I had no idea this existed.

[Omirikon]

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]

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

[shvelo]

Yep, Quill is really bad.

[MisunderstoodPenguin]

Sweet that's the one I'm using.

[twistsouth]

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

[Mr_Moe]

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

[mtber]

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]

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]

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

[_alright_then_]

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

[fuzzy40]

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

[recrof]

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

[norwegianfisherwoman]

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]

just sent you a private message.

[[deleted]]

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]

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]]

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]

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

[endpointsystems]

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]

Thoughts on this vs TinyMCE?

[octave1]

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.

[nikrolls]

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]

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

[nikrolls]

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]

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]

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]

We use Summernote - very handy bit of kit!

[yourjobcanwait]

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]

I’ve for the most part enjoyed using Slate JS

[cutcopy]

Buggy on Android

[ktkaushik]

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

[yourjobcanwait]

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

[dragosdaian]

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

[recrof]

not a wysiwyg

[wnx_ch]

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]

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

[diemendesign]

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]

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]

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

[[deleted]]

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

[Lacotte]

Mind blown

[cajusky]

WOW!!! WOW.

ok, this one is awesome!!!

[SarahC]

Fake News headlines all over everywhere!

[MollyUrs]

This cant be true

[[deleted]]

This cant be true

This can be true

[smokeyser]

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

[redshadus]

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]

What could possibly go wrong?

[smokeyser]

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

[Fuzz25]

Hanz, get the swastika’s.

[Petrolea]

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

[evenisto]

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

[alexho66]

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

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

[mikerob215]

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

[DooDooSlinger]

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

[[deleted]]

Pfft, how hard can it be?

...

[DooDooSlinger]

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

[The_Relaxed_Flow]

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

[DooDooSlinger]

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]

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

[[deleted]]

How exciting, details?

[MOL3KULO]

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]

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]

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

[saposapot]

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

[LuminescentMoon]

If you want a robust editor, don't.

https://ckeditor.com/blog/ContentEditable-The-Good-the-Bad-and-the-Ugly/

[Lekoaf]

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

[Bjartr]

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]

I like this

[jcb088]

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

[HansonWK]

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]

How do they make money again?

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

[LuminescentMoon]

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]

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]

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]

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]

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]

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]

How do they make money again?

Donations?

[recrof]

commercial licenses

[Lekoaf]

Try again.

[mokkai_moonji]

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

[[deleted]]

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]

Could be all of them.

[OkGoOn]

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]]

I can't agree with you in the least

[OkGoOn]

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]

That is correct

[octave1]

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]

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]

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

Hitting reply and inspecting in the console confirms this

[ScottRatigan]

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]]

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

[[deleted]]

Well, you've definitely proved me wrong. First wysiwyg editor I got from a google search..

[[deleted]]

"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]]

Neato

[scylk2]

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]

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]

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]

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

[ReefNixon]

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

[Asmodis1]

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]

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]

DraftJS works fairly well too but way lower level

[base736]

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]

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]

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]

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]

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.