I wanted to build an article publishing platform on Lens before, but as I continued working on it, it felt more and more off. It felt like a cross-chain version of Mirror with no value, and now it's in a semi-abandoned state. Here, I will record some rich text editors and their comparisons that I explored during the project process.
Editor.js https://editorjs.io/
A modular, extensible, and customizable editor. It uses a block-based editing approach to simplify content organization and formatting.
This was the editor I initially tried using, and it was convenient for creating applications similar to Notion. It can output in JSON format, making it easy to store directly on IPFS. There are many plugins available that cover most of the editor's required functionalities, making it plug-and-play. However, the lack of TypeScript support made it difficult for me to use, and the editor's style was hard to change. I wanted the WYSIWYG effect of Mirror, but it was challenging to achieve. Despite these drawbacks, it is still sufficient for creating an editor.
Lexical https://lexical.dev/
A scalable text editor framework developed by Facebook.
After abandoning Editor.js, I found Lexical, which seemed to meet my requirements. After researching it, I found that it provided enough freedom and support for TypeScript to be extended into the desired editor. However, upon further investigation, I realized that Lexical is still just a framework. It offers enough freedom but is also cumbersome, requiring the definition of custom nodes and the need to write plugins to create a personalized editor. Additionally, Lexical is currently in early development, and the official documentation is not detailed enough, posing maintenance risks for personal projects. Considering the high cost, I decided not to use it. PS: https://github.com/ozanyurtsever/verbum is a Lexical-based editor on GitHub that is relatively easy to use.
TinyMCE https://www.tiny.cloud/
A feature-rich and mature rich text editor.
TinyMCE is already a mature commercial application that can meet most rich text editing needs, including text formatting, image and media insertion, and creating lists and tables. It provides many official and community plugins, as well as an easy-to-use API for easy customization to meet specific requirements. The documentation is detailed enough, covering almost all visible issues. It allows users to customize the appearance of the editor to fit the project's design requirements. This is currently the editor that I feel has the best overall cost-effectiveness, being simple enough yet complex enough to suit various needs. The downside is its performance, especially when loading many plugins or handling large amounts of content. Some plugin functionalities require payment, but they can be customized to solve this issue.
CKEditor https://ckeditor.com/
A feature-rich and mature rich text editor.
Similar to TinyMCE, I didn't delve into CKEditor. However, CKEditor has a new feature that I like, which is the ability to directly upload and preserve the styles of doc files. This is very useful for companies that need to process many doc files. However, it is limited to HTML, and CKEditor still cannot automatically paginate or import headers and footers, requiring manual handling.
CodeMirror https://codemirror.net/
A lightweight code editor primarily focused on code editing.
I don't know much about CodeMirror, so I can only provide limited information. Strictly speaking, CodeMirror is not considered a rich text editor, but its support for Markdown can be extended to become one, as xlog is currently doing. Its biggest advantage is being lightweight without the performance issues mentioned above. However, as an editor, it still lacks a good user experience and requires more customization. For example, in xlog, I currently cannot define the size and position of uploaded images or add captions.
In conclusion, it is not easy to provide users with a user-friendly long article editor in a project.