Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: WYSIWYG Editor #5

Open
tocosastalo opened this issue Aug 28, 2024 · 1 comment
Open

feat: WYSIWYG Editor #5

tocosastalo opened this issue Aug 28, 2024 · 1 comment
Assignees

Comments

@tocosastalo
Copy link
Contributor

Given that Page Builder is primarily a tool for creating presentation and customer-facing websites, it's important that our template includes a robust WYSIWYG editor. The standard Strapi editor currently outputs Markdown, which isn't ideal, and its limited features are a concern.

For instance, on one project, we need to create a title on the homepage with different colors. This can only be achieved by using multiple string fields, where the number of fields corresponds to the number of colors.

We should consider which direction to take moving forward, and based on recent projects, several options come to mind:

New Strapi Blocks Editor:

Strapi is developing a new editor that uses JSON instead of Markdown. It's currently available in Strapi as a Beta field and seems to be aiming for similar capabilities as EditorJS.
In my view, it doesn't have enough features yet, but if we choose to go with EditorJS, we should have the option to switch back to this native editor later on. The output was almost identical when I last tested it.

EditorJS:

We have experience with EditorJS from a few projects, and it’s fairly user-friendly. It can be implemented as a plugin, with installation possible via a library as a dependency or by downloading the source and building it manually. This makes it more extendable, allowing us to add custom features as needed. It also has decent documentation.
On the frontend, content can be displayed using a renderer from npm, although this only works with client-side components (the library isn't ready for SSR, at least not currently). For another project, I wrote renderers for all common types available in EditorJS. They aren’t perfect and don’t support all buttons, like image alignment, but they are fully server-side. If we decide to use them, we can refine the renderers.

CKEditor:

CKEditor is a commercial editor that can be integrated into Strapi. I don't have personal experience with it, but I know that @lenkaKmetova has used it on projects. From what I can see, it offers the most extensive feature set, and its output is directly in HTML.

We need to evaluate these options carefully to determine the best path forward for our Page Builder

@MichelleJant
Copy link
Collaborator

MichelleJant commented Sep 2, 2024

  1. Add CK editor
  2. Add a style in global.css and in styles on Strapi for e.g. header and paragraph as an example

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants