Ckeditor5-phoenix - CKEditor 5 wysiwyg integration for Phoenix

Your Libraries & OS Mentoring Libraries
, ,
1

Phoenix has great tooling overall, but one thing that’s still lacking is a solid, plug-and-play integration with a modern WYSIWYG editor. Most solutions floating around are partial, outdated or rely on plain JS embeds with no real LiveView support.

So I built one:

This library wraps CKEditor 5 in a LiveComponent.

I’m open to feedback and happy to review PRs - feel free to contribute!

14 Likes
2

Where do the files go for uploads?

3

It depends on your uploader plugin. The default preset embeds images as base64. It’s possible to override it and use SimpleUploader that sends file to specific endpoint.

1 Like
4

I’ve just released version 1.10.1 with the following improvements:

  1. Stability fixes – the integration no longer crashes when a component is rapidly unmounted before it’s fully initialized.
  2. Editor watchdog support – the editor can now automatically recover and restore data after a crash.
  3. Context & clustering support – added the context watchdog and the ability to cluster multiple editors.

More details on GitHub: GitHub - Mati365/ckeditor5-phoenix: 🚀 CKEditor 5 for Phoenix - smooth WYSIWYG integration for Elixir apps! ⚡ Works seamlessly with LiveView or traditional forms. 💡 Easy setup, supports custom builds, dynamic loading, and localization. 🔧 Plug-and-play modules, JS hooks, and full customization support. 🎯 Ready for both open-source and commercial use!

4 Likes
5

Great stuff! I have question - is there some kind of tutorial about implementing it in a form?

1 Like
6

My apologies, did not read the readme to the end… Thanks for that!

1 Like
7

Looks great! Will Phoenix 1.8 be supported anytime soon?

8

It should work ootb.

pon., 15 wrz 2025, 17:36 użytkownik Dominique Lebrun via Elixir Programming Language Forum <noreply@elixirforum.com> napisał:

9

It doesn’t because the phoenix dependency is restricted to ~> 1.7.21.

10

You are right. I’ll bump it today. Thx!

wt., 16 wrz 2025, 15:41 użytkownik Dominique Lebrun via Elixir Programming Language Forum <noreply@elixirforum.com> napisał:

11

I released fix in 1.13.0

12

Thanks! I’ll try it as soon as possible.

13

I released 1.15.5 a version that:

  1. Fixes lack of HTML5 required validation of hidden inputs when used with traditional forms.
  2. Adds NPM-free mix ckeditor5.install task that allows to install ckeditor5 assets without Node environment.
  3. Added crossorigin attributes to cloud assets tags.
  4. Added extra_imports attribute that allows to extend importmap tag generated by ckeditor5_cloud with custom entries.
  5. Bumped default version editor to 47.3 which is the LTS version of the editor.

More details on GitHub: GitHub - Mati365/ckeditor5-phoenix: 🚀 CKEditor 5 for Phoenix - smooth WYSIWYG integration for Elixir apps! ⚡ Works seamlessly with LiveView or traditional forms. 💡 Easy setup, supports custom builds, dynamic loading, and localization. 🔧 Plug-and-play modules, JS hooks, and full customization support. 🎯 Ready for both open-source and commercial use!

14

I released 1.16.0 version that:

  1. Adds custom upload adapter and elixir controller that handles uploading of images.
  2. Allows specifying upload_url in <.ckeditor5 component. If your app has global config, but certain editor needs base64 image inlineing then upload_url=”base64” disables global config and inlines image.

fyi @dogweather

15

Hi, just wanted to say: thanks. I use that lib for our club homepage cms and totally love its ease to use!

1 Like