Integrate Phoenix 1.6 Liveview with CKEditor 5 with image upload support

Phoenix Forum Questions / Help
, , ,
1

I am trying to set up rich text editor with CkEditor5 with phoenix 1.6 liveview 0.16. The set up for text editing is easy, I can save or edit text. But I got errors from liveview when using image upload in CkEditor.

I have tried added different image upload plugins in CkEditor, Simple upload adapter and Base64 upload adapter. Liveview gives me the following error after I have chosen the image from file picker:

upload_entry.js:17 Uncaught TypeError: Cannot read properties of null (reading 'split')
    at Function.isActive (upload_entry.js:17)
    at live_uploader.js:83
    at Array.filter (<anonymous>)
    at Function.activeFiles (live_uploader.js:83)
    at Function.serializeUploads (live_uploader.js:42)
    at View.pushInput (view.js:783)
    at live_socket.js:676
    at View.withinTargets (view.js:204)
    at live_socket.js:354
    at LiveSocket.owner (live_socket.js:345)

It seems that liveview uploader can not find the file in CkEditor. Any pointers on how to fix?

On a side note, my plan is to upload the image in CkEditor to a minio server.

1 Like
2

Hi @ericaclw! The simple upload adapter I think should work but you are hitting a bug in LiveView that has been fixed will be in the next release.

3

Thanks @mcrumm!