News>Announcing

Ckeditor5-phoenix - CKEditor 5 wysiwyg integration for Phoenix

/phoenix#liveview#liveview-form
Mati365

Mati365

Ckeditor5-phoenix - CKEditor 5 wysiwyg integration for Phoenix

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:

https://github.com/Mati365/ckeditor5-phoenix

This library wraps CKEditor 5 in a LiveComponent.

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

11 comments
/phoenix#liveview#liveview-form
20 403 11

Most Liked

Mati365

Mati365

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
Post #4
Mati365

Mati365

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
Post #3
ppetrov

ppetrov

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

1
Post #5
ppetrov

ppetrov

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

1
Post #6

Where Next?

View thread on forum (has 11 responses!)
phoenix
liveview
liveview-form
Home News>Announcing
/phoenix#liveview#liveview-form
20 405 11
Last post

Popular in Announcing Top

zachdaniel
News>Announcing

Ash Framework 3.0
Ash Framework 3.0: Official Release! I’m here with the fine folks at Gig City Elixir, pushing the button live on stage :sunglasses: T...
/ash#release
134 3216 18
New
MRdotB
News>Announcing

Resvg - SVG Rendering in Elixir with Rust
Greetings Elixir community! Today, I’m thrilled to present you with resvg_nif, an open-source project that provides Elixir bindings for ...
#nif#image#svg
47 2800 23
New
sonic182
News>Announcing

Llm_composer - Elixir library for building LLM-based applications
Hi everyone, at Doofinder we have been building llm_composer for some new apps, and we thought it could be useful to share it with the co...
#http_client#llm
16 367 6
New
kzemek
News>Announcing

Snex - Easy and efficient Python interop for Elixir
I’ve recently released v0.2.0 of my Python interop library, Snex. This version rolls up all work-in-progress improvements that have been...
#snex
18 263 2
New
munksgaard
News>Announcing

Flakify - easily set up Nix flake related tooling in your Elixir/Phoenix application
flakify is an igniter installer that allows you to quickly get a Nix flake-based development shell up and running for your Elixir/Phoenix...
/phoenix#nix
14 232 4
New
rms.mrcs
News>Announcing

PhonixLiveState - shared state across LiveViews and Controllers
Hi there :waving_hand: Just dropping by to share PhonixLiveState, a lib I’ve just published. It’s still VERY RAW, but already in a reas...
/phoenix#liveview
12 297 4
New
LostKobrakai
News>Announcing

PhoenixVite - Integrating the vite built tooling with phoenix
I’ve recently created a small library phoenix_vite integrating the vite build tooling with phoenix. It provides an igniter.installer t...
/phoenix#javascript#bun#igniter
51 773 5
New
anuaralfetahe
News>Announcing

ProcessHub - process distribution library
Hello Published a new library - ProcessHub! ProcessHub is a library designed to manage process distribution within the Elixir cluster. ...
#library#processes#distribution
83 2713 43
New
Mati365
News>Announcing

Ckeditor5-phoenix - CKEditor 5 wysiwyg integration for Phoenix
Phoenix has great tooling overall, but one thing that’s still lacking is a solid, plug-and-play integration with a modern WYSIWYG editor....
/phoenix#liveview#liveview-form
20 402 11
New
waseigo
News>Announcing

DoTrace - Provides a trace/1 macro to trace function calls at runtime, mimicking Clojure's dotrace output
I saw this LinkedIn post: *Can your programming language do this? This is a macro in Clojure called `dotrace`. When you surround a pie...
#metaprogramming
34 326 16
New

Other popular topics Top

Tee
Questions & Help>Questions

Enumerables - how does Enum.reduce work with maps
can someone please explain to me how Enum.reduce works with maps
#erlang
18 14675 13
New
vonH
Questions & Help>Questions

Why would I choose Elixir as a general purpose programming language?
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
#functional-programming#use-cases
65 34758 13
New
gshaw
Questions & Help>Questions

Idiomatic guard clause for checking not nil
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
#guard-clauses
13 43178 3
New
itssasanka
Questions & Help>Questions

Why use `utc_datetime` over `naive_datetime` for Ecto?
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
#ecto#timestamps#datetime#timezones
115 14814 19
New
malloryerik
Learning Resources>Guides/Tuts/Tips/Info

How to use 'phoenix-heex' templates in VSCode
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
/phoenix#vscode#heex
118 16932 34
New
jononomo
Questions & Help>Questions

Where / How does the Mix environment variable get set?
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
#mix
31 22791 9
New
lastday4you
Questions & Help>Questions

How to check Elixir version
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
#how-to-question
11 18647 3
New
shahryarjb
Questions & Help>Questions

How to convert map to string (separated with ,)
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
#maps#strings
15 15491 2
New
stefanluptak
Questions & Help>Questions

Using VSCode on multiple monitors
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
#vscode#vscode-elixir
7 17615 6
New
lanycrost
Questions & Help>Questions

How To Implement if...else if...else condition
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
#how-to-question
40 51494 6
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

News>Announcing

News Announcing ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers. By developers, for developers.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyewWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyewWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement