10 ms·
Ask HN: What is your favorite FOSS WYSIWYG editor?
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
- joshxyz 3y agoalmost 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.
- ZiiS 3y agohttps://lexical.dev/ https://lexical.dev/ is nice.
- wackget 3y agoLiterally 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.
- vore 3y agoWhat does the fluffiness of the marketing copy have to do with bloat?
- DwnVoteHoneyPot 3y agoHN likes to make fun of MBAs but that description is what happens when programmers do marketing.
- azangru 3y ago> 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.
- xigoi 3y agoWhat happens it that the product actually says what it does and how it works? Great, let's have more of that.
- dubcanada 3y agoIt 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.
- ch_sm 3y agoI really enjoyed working with Prosemirror/TipTap2. It‘s extremely flexible!
- mkl 3y agoHave you hooked it up to Yjs for realtime collaboration? I'm about to try that. The docs (https://tiptap.dev/guide/collaborative-editing https://tiptap.dev/guide/collaborative-editing) make it seem fairly straightforward.
- danielvaughn 3y agoI 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.
- mkl 3y agoFor 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.).
- danielvaughn 3y agoAt 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.
- GustavSHartz 3y ago
- williamstein 3y agoI like https://www.slatejs.org/examples/richtext https://www.slatejs.org/examples/richtext and found the source code very readable and adaptable to my needs.
- bph 3y agoThere 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/intro.md https://github.com/WordPress/Gutenberg/platform-docs/docs/in...
- deleted 3y ago[deleted]
- ulrischa 3y agoUse Gutenberg or a block editor like this (https://github.com/codex-team/editor.js https://github.com/codex-team/editor.js) for a CMS. The HTML based WYSIWYG days are over.
- mkl 3y agoEditor.js is WYSIWYG.
- ulrischa 3y agoIt is not HTML based. It generates JSON
- mkl 3y agoHm, 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.
- e12e 3y ago> 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-7-a-visual-editor-for-markdown-part-1 https://kuy.io/blog/posts/modern-front-end-magic-with-rails-... https://kuy.io/blog/posts/modern-front-end-magic-with-rails-7-a-visual-editor-for-markdown-part-2 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-engine-that-powers-our-blog-as-an-open-source-project-on-github https://kuy.io/blog/posts/today-we-released-bloak-the-rails-... https://github.com/kuyio/bloak https://github.com/kuyio/bloak
- firemelt 3y agothat is really interesting but I think I prefer html yet I forget why I prefer HTML
- e12e 3y agoIf 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).
- warthog 3y agoSpent 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
- deleted 3y ago[deleted]
- Danjoe4 3y agoThere 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.
- CPLX 3y agoRecently built a content driven rails site and chose CKeditor and would recommend it as well.
- mkl 3y agoIn 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.
- extra88 3y agoCan you give examples of invalid HTML generated? I haven't had that experience with CKeditor 4 on Drupal.
- mkl 3y agoThe 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>
- mvuijlst 3y agoGutenberg.
- kfogel 3y agoPlease 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.
- justchad 3y agoI 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.
- claudiulodro 3y ago> 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! ;)
- KRAKRISMOTT 3y agohttps://webstudio.is/ https://webstudio.is/
- wackget 3y agoAnother 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.
- jrm4 3y agoThis 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.
- starbugs 3y agoProseMirror. It's by far the best codebase I've seen so far with regard to web editors. https://prosemirror.net 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 https://atlaskit.atlassian.com/packages/editor/editor-core
- lemt93 3y agoProseMirror 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.
- curo 3y agoI'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.
- 65 3y agockeditor works for me most of the time
- ulrischa 3y agoI'm bot sure if it is FOSS. Seems like Not free for commercial products
- amedviediev 3y agoI've been using TipTap2/Prosemirror extensively in a side project, and I'm really happy with it so far.
- DwnVoteHoneyPot 3y agoInstalling Summernote (https://summernote.org https://summernote.org) was easy. ProseMirror and Lexical seem much more complicated.