Ask HN: What is your favorite FOSS WYSIWYG editor? | Hacker News Reader

Ask HN: What is your favorite FOSS WYSIWYG editor?

53 pointsfiremelt51 comments

Used to use trix but my current project is CMS-like, so I think I need better WYSIWYG HTML based editor

atleast I need to be as useful as wordpress article editor

for extra note I think I will built the project using ruby on rails, if anyone have stack suggestions, please tell me I will happy to have that

View on HN

Please consider editing the original question's headline to specify "HTML" too :-).

Otherwise a reader might think (as I did) that you're asking a question the answer to which could be LibreOffice Writer or other things like that.

This is exactly what I thought when I saw the headline

I have no button to edit my title sorry for the convenience

There isn't one.

This space has a lot of churn; a hot new project is started by a dev who claims they'll finally have "the solution" for the WYSIWYG space. Then it gets dropped after a few years. In fact many of the comments are listing archived projects no longer under development.

This is an unfortunate drawback to truly free software. The only two WYSIWYG editors I can recommend are OSS but have premium plans and premium plugins. However even their free plans are more capable than most other options. Corporate backing has upsides.

I would try TinyMCE. The docs are okay and it is a true WYSIWYG. If you're ready for the learning curve, and want to make something with virtually unlimited capabilities, CKeditor cannot be beat. The CKeditor model is a subtle abstraction you don't notice is there, unless you need it in which case it's very powerful. The documentation is incredible. The pre-built editors and plugins cover many use cases.

Recently built a content driven rails site and chose CKeditor and would recommend it as well.

In my experience using CKeditor in Moodle, CKeditor generates invalid HTML (especially around lists) and sometimes bad HTML that does weird things like insert random spans and hardcode font sizes. I still prefer it over TinyMCE, another Moodle option, but I can't trust it to do the right thing.

Can you give examples of invalid HTML generated? I haven't had that experience with CKeditor 4 on Drupal.

The most common problem I hit is a bunch of extra close tags when working with nested lists, like this:

  <ul>
    <li>A</li>
    <li>
      <ul>
        <li>B1</li>
        <li>B2</li>
      </ul>
    </li>
  </ul>
  </li>
  </ul>

> I will buil[d] the project using ruby on rails

Not an editor, but you might want to look at:

"Modern Front-End Magic With Rails 7: A Visual Editor For Markdown (Part 1)" and part 2 (no part 3?):

https://kuy.io/blog/posts/modern-front-end-magic-with-rails-...

Or just use their rail engine for blogging:

https://kuy.io/blog/posts/today-we-released-bloak-the-rails-...

https://github.com/kuyio/bloak

that is really interesting but I think I prefer html yet I forget why I prefer HTML

If you only interact vi a wysiwyg editor - html is probably easier to deal with generate/parse/lint/clean up. As always beware of copy paste from Ms word.

Either way the article should give some ideas (ignore the markdown stuff).

ProseMirror.

It's by far the best codebase I've seen so far with regard to web editors.

https://prosemirror.net

Another comment mentioned TipTap2. If you're using React and like abstractions, TipTap2 is a good choice in my opinion.

But I also enjoyed working with ProseMirror without another library on top.

PS: AtlasKit has a lot of boilerplate code for working with PM that makes things easier: https://atlaskit.atlassian.com/packages/editor/editor-core

ProseMirror and CodeMirror, been using them in a project for a while, the documentation is a little bit hard to approach though, but once you got used to with all the concepts, it's just great.

> atleast I need to be as useful as wordpress article editor

The WordPress article editor (Gutenberg) is FOSS, so you could just use that in your project. That's definitely at least as useful as the WordPress article editor! ;)

https://lexical.dev/ is nice.

Literally the first piece of explanatory text on their homepage and already I'm confused:

> Lexical is comprised of editor instances that each attach to a single content editable element. A set of editor states represent the current and pending states of the editor at any given time.

What does that even mean? Seriously, if this is how they introduce their product I don't even want to think about how bloated the rest of it is.

What does the fluffiness of the marketing copy have to do with bloat?

HN likes to make fun of MBAs but that description is what happens when programmers do marketing.

> that description is what happens when programmers do marketing

To me, this statement implies that developers of Lexical would be interested in maximizing their user base, as opposed to, say, attracting the right kind of users.

What happens it that the product actually says what it does and how it works? Great, let's have more of that.

It means it is a WYSIWYG editor that attaches to a "single content editable element" such as a div. There is then a set of editor states (user typed hello, user backspaced 2 so now it says hel, user typed p it now says help.

I mean it's pretty easy to understand wording if you are a developer.

There are efforts to document how you can use WordPress editor as a stand alone library for your web projects. https://github.com/WordPress/Gutenberg/platform-docs/docs/in...

I like https://www.slatejs.org/examples/richtext and found the source code very readable and adaptable to my needs.

Use Gutenberg or a block editor like this (https://github.com/codex-team/editor.js) for a CMS. The HTML based WYSIWYG days are over.

Editor.js is WYSIWYG.

It is not HTML based. It generates JSON

Hm, really? It uses contenteditable. Paragraphs in the live editor are like this:

  <div class="ce-paragraph cdx-block" contenteditable="true" data-placeholder="Type text or paste a link">...</div>

Edit: it's a bit rude to edit the parts of your comments I've replied to.

It generates JSON not HTML

I had no reply button only later. Sometimes HN is Strange so I edited it.

There's no reply button for the first 2 minutes or something in a busy thread, but you can get one by clicking the comment's time stamp.

Where is the comments timestamp?

The link in a comment's header that says "0 minutes ago", "8 hours ago", or whatever. That's how you get a direct link to a comment.

I really enjoyed working with Prosemirror/TipTap2. It‘s extremely flexible!

Have you hooked it up to Yjs for realtime collaboration? I'm about to try that. The docs (https://tiptap.dev/guide/collaborative-editing) make it seem fairly straightforward.

I did it last year. Implementing the server was challenging, only because I was working with a large database of existing documents. The thing about YJS is that it's a data structure itself, which means that your document is going to be a YJS document. I remember thinking "okay so there must be a way to convert the YJS doc into html and write that to the database once the session is over." I never figured that part out, and had to do a bunch of hacky shit to get it to work.

If you're working on a greenfield project it'll probably be easier. And the integration with TipTap itself was simple. I love TipTap.

For the server, did you use hocuspocus, or something else? Mine is a greenfield project, so using Yjs's data structure as the canonical source of truth seems okay (though I expect to need some sort of indexing or something for search etc.).

At the time, hocuspocus was still somewhat new and I didn't want to rely on it, but I'd be willing to revisit it again if I were you. I know that TipTap is a YC graduate so I'd assume they're going to invest heavily into hocuspocus because IIRC it's their only source of revenue.

Works really well. Build this transcription software with it https://github.com/Voxtir/voxtir

I've been using Prosemirror on LegendKeeper for 5 years now. It's a challenging library to use, but there's very little you can't do with it. Chasing down cross-platform bugs is a nasty business though.

This doesn't exactly answer the question, but as someone who's done web stuff for years and who is an extreme fan of the GPL, nevertheless I end up using stuff like Divi and Elementor under Wordpress.

This, to me, is where the "paying for software that isn't free in either sense" has finally reached a fair equilibrium? Which is to say, thanks to the free-ness of the underlying platform -- it seems absolutely equitable to be like, "dig in and use the free but more difficult stuff that's out there, or just drop some money on this pay stuff (which you're also still generally free to hack with.)

I don't think very much software under "you can't have it unless you pay for it" is very good, but this is an exception.

almost everything i used has bugs and edge cases.

these days i just try to stick with markdown, which is more controlled and scope-limited, albeit more targetted for technical people.

I've had a lot of fun working with both:

1. Lexical

2. ProseMirror/Tiptap

Both of these are very extensible, actively developed, and well-built. Tiptap is indy and pushes its pro product now (fair). Lexical is supported by meta. Pros and cons to both of these FOSS types.

Spent some time researching on this a while back

I think best bet is Lexical. It is actively maintained and simple yet extensible with a lot of things

Installing Summernote (https://summernote.org) was easy. ProseMirror and Lexical seem much more complicated.

I love TipTap, easy to use and setup even with Rails. I wrote an internal gem (that I should publish) where I can generate TipTap document JSON/HTML from the Rails side of things as well.

I've been using TipTap2/Prosemirror extensively in a side project, and I'm really happy with it so far.

https://webstudio.is/

Another utterly useless homepage which doesn't actually explain what the product is.

> "Open visual development".

OK. What is that? I assume this a tool for designers to produce mockups of websites?

> "Webstudio visually translates CSS without obscuring it".

Uh... OK? It translates CSS? Into what? Do I first write the CSS then it translates it? I thought this was a visual design tool? If I need to write CSS then what's the point of this tool?

> "We deploy your site to Cloudflare Workers".

Oh, so it's not a design tool. It's a website builder and a hosting platform? I didn't think this could get any more confusing.

> "With style sources built on top of Design Tokens, keeping your work in sync with your design system won’t feel like a burden."

What the fuck are style sources and design tokens?

...

Seriously people. If your home page can't actually explain what your product does then you have failed spectacularly.

Gutenberg.

ckeditor works for me most of the time

I'm bot sure if it is FOSS. Seems like Not free for commercial products

Reply on news.ycombinator.com