CkEditor5 in LiveView

I am trying to integrate ckeditor5 in liveview.

I see the CkEditor5 when I reload the page. But on navigation via liveview, I cannot see the ckeditor.

How to show ckeditor in liveview?

<script>
  ClassicEditor
          .create( document.querySelector( '#post-form_body' ) )
          .then( editor => {
                  console.log( editor );
          } )
          .catch( error => {
                  console.error( error );
          } );
</script>

this is the textarea input

<%= label f, :body %>
    <div  phx-update="ignore"><%= textarea f, :body , class: "invisible", rows: "10"%> </div>
    <%= error_tag f, :body %>
  
1 Like

You’d need to use js hooks (see JavaScript interoperability — Phoenix LiveView v0.17.5) to initialize the editor on each mounted and possibly restore state on updated (copied from beforeUpdate).

That was a helpful lead. Thank you.