I wanted to build an article publishing platform on Lens before, but as I continued, it felt more and more wrong. It seemed 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 that I explored during the project process, as well as their comparisons.
Editor.js https://editorjs.io/
A modular, extensible, and customizable editor. It uses a block-based editing approach to make content organization and formatting simple.
This was the editor I first tried to use, and it was convenient to use it for applications similar to Notion. It can output in JSON format, making it easy to store directly on IPFS. There are many plugins that cover most of the features needed for an editor, plug and play, just make some minor adjustments to the plugins for the project. The only problem is the lack of support for TS, which makes it difficult for me to use, and the style of the editor is difficult to change. What I want is the WYSIWYG effect of Mirror, at least I can't change it. Apart from these shortcomings, it is enough to use it as an editor.
Lexical https://lexical.dev/
An extensible text editor framework developed by Facebook.
After abandoning Editor.js, I found Lexical, which seemed to meet my needs. After researching it, it is indeed flexible enough and has enough support for TS to be extended into the desired editor. However, a deeper study revealed that this thing is still just a framework, it is flexible enough but also cumbersome. You have to define your own nodes, and plugins need to be written by yourself, which means you have to wrap it into your own editor. And Lexcial is still in early development, the official documentation is not detailed enough, there is a risk of maintenance when used in personal projects. It feels too costly, so I gave up using it.
PS: https://github.com/ozanyurtsever/verbum is an editor based on Lexical on GitHub, which 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, inserting images and media, creating lists and tables, etc. It provides many official and community plugins, as well as an easy-to-use API for easy customization of the editor to meet specific needs. The documentation is detailed enough and covers almost all visible issues. It allows users to customize the appearance of the editor to fit the design needs of the project.
This is currently the editor that I feel has the best cost-effectiveness, it is simple enough and complex enough, suitable for various needs. The downside is the performance issue, especially when loading many plugins or handling a large amount of content. Some plugin features require payment, but you can customize the plugins to solve this.
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 doc files and preserve the styles of the doc files. This is very useful for companies that have many doc files to process. However, it is limited to HTML, and CKEditor still cannot automatically paginate or import headers and footers, which need to be manually handled.
CodeMirror https://codemirror.net/
A lightweight code editor mainly for code editing.
I don't know much about CodeMirror, just my personal opinion. Strictly speaking, CodeMirror is not considered a rich text editor, but its support for Markdown can be extended to a rich text editor, just like what xlog is currently doing. Its biggest advantage is that it is lightweight and does not have the performance issues mentioned above. However, as an editor, it is not good enough in terms of 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.