How to add ckeditor5 in a form?

ppetrov

Hello,

This is my actual first attempt to write a form with external html editor in textarea field.

That i have done:

I generated the form using:
mix phx.gen.html Content Article articles heading:string tag:string slug:string article:text
Updated ecto
Added the CKeditor in in root.html.heex using:
I have added the additional script from here within the article_form.html.heex and i can see the field updated and i can use the editor.

The problem:
When i press submit it gives me error that the field is empty.

What i tried:
I am very bad in JS so please be understanding. I got the idea that i have to collect the data from the editor and ‘send/push’ it to the form somehow (my guess is to the id of the original field) but i can’t get it to work. I have read few other topics from here but i don’t really get how to make it work.

I will appreciate if someone can guide me to the solution.

Regards,
Peter

9 comments

/phoenix #liveview

0 1733 9

2025-10-31 14:09:03 UTC

Showing Posts 1 to 9

Show Best Posts
Show All (oldest first)
Show All (newest first)

TwistingTwists

Can you show some code?
Have you done phx-update=ignore ?

Post #1

ppetrov

Hey TwistingTwists,

I have not done any phx-update changes. That is all my code in the form. I am not sure even where to put that.

<.simple_form :let={f} for={@changeset} action={@action}>
  <.error :if={@changeset.action}>
    Oops, something went wrong! Please check the errors below.
  </.error>
  <.input field={f[:heading]} type="text" label="Heading" />
  <.input field={f[:tag]} type="text" label="Tag" />
  <.input field={f[:slug]} type="text" label="Slug" />
  <.input field={f[:article]} type="text" label="Article" />
  <:actions>
    <.button id="submit">Save Article</.button>
  </:actions>
</.simple_form>

<script>
let editor;

ClassicEditor
    .create( document.querySelector( '#article_article' ) )
    .then( newEditor => {
        editor = newEditor;
    } )
    .catch( error => {
        console.error( error );
    } );

// Assuming there is a <button id="submit">Submit</button> in your application.
editor.model.document.on( 'change:data', () => {
    console.log( editor.getData() );
} );

</script>

Post #2

ppetrov

Sorry, the console.log was me trying to see if something comes out. The actual line is:

    const editorData = editor.getData();

Post #3

TwistingTwists

Are you aware about JS hooks ?

Post #4

ppetrov

The problem with that is i am not sure how they are suppose to work exactly. I guess i have to dig into it and see what i can do.

Post #5

ppetrov

OK, so i figured it out. The editor is expecting to have the textarea instead of text field type. If i change it in the form then all works just fine.

Post #6

Wigny

This blog post may be useful to guide you how to setup the editor.

Post #7

ppetrov

Thanks. That will be an upgrade that i might want to do. Funny enough that is a paid feature on the ck editor and with some additional coding it could make it even better than the paid service.

Post #8