Gilou06

Gilou06

CkEditor5 change event in LiveView

Hello,
I am trying to integrate ckeditor5 in liveview.
I have successfully created the mounted & updated hooks, I now see the ckeditor just fine in my LiveView. But I don"t know how to retrieve the editor content in order to save it.

Running code in app.js:

function ckeditor_fct(it) {
    editor = ClassicEditor
        .create(it.el)

        .catch(error => {
            console.error(error);
        })
}

let Hooks = {}
Hooks.CkEditor = {
    mounted() {
        console.log("mount");
        ckeditor_fct(this)
    },
    beforeUpdate() {
        console.log("beforeUpdate");
    },
    disconnected() {
        console.log("disconnected");
    },
    reconnected() {
        console.log("reconnected");
    },
    destroyed() {
        console.log("destroyed");
    },
    updated() {
        console.log("updated");
        ckeditor_fct(this)
    }
}
let liveSocket = new LiveSocket("/live", Socket, { hooks: Hooks, params: { _csrf_token: csrfToken } })

I have tried to add this code to ckeditor_fct function

editor.model.document.on( 'change:data', () => {
    console.log( 'The data has changed!' );
} );

but this code crashes at execution :

app.js:44 Uncaught TypeError: Cannot read properties of undefined (reading ‘document’)

I have tried

    it.el.addEventListener('change', () => {
        console.log('The data has changed!');
    });

No crash, but no event received.

I admit that I’m bad with JavaScript.
As It is, user modification does not even survive any change made in the other form fields : content of the CKeditor is lost upon any updated event received.
I have seen in https://forum.elixirforum.com/t/ckeditor5-in-liveview/44122 a recommendation to

restore state on updated (copied from beforeUpdate).

but I don’t know how to do that.
Also, in order to save the editor content, I believe I need to receive the change event.

I spent 8 hours trying to fix this, but I’m stuck.

Thank you for your help :slight_smile:

Most Liked

Gilou06

Gilou06

Found a way that works !

function ckeditor_fct(it) {

    editor = ClassicEditor
        .create(it.el)
        .then(editor => {
            editor.model.document.on('change:data', (evt, data) => {
                console.log(editor.getData());
            });
        })
        .catch(error => {
            console.error(error);
        })
}

Last Post!

tommica

tommica

Thanks for posting a solution!

Where Next?

Popular in Discussions Top

wmnnd
The Go vs Elixir thread got me thinking: Would it be too hard to implement a simple mechanism for creating Go-style static app binaries f...
New
nburkley
AWS re:Invent is on at the moment with some interesting announcements. One new feature in particular is the Lambda Runtime API for AWS La...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 40165 209
New
opsb
We’re considering our architecture from a viewpoint of scaling our traffic heavily over the next 6 months. Our current deployment is runn...
New
owaisqayum
I have a sample string sentence = "Hello, world ... 123 *** ^%&*())^% %%:>" From this string, I want to only keep the integers, ...
New
marciol
Please, let me know if this kind of discussion already took place in another topic . Hi all, how do you consider if is better to build ...
New
pillaiindu
I want to convert a Phoenix LiveView CRUD website to a CRUD mobile app. What do you think is the easiest way to do so?
New

Other popular topics Top

baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 40165 209
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 42716 114
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New

We're in Beta

About us Mission Statement