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);
        })
}

Where Next?

Popular in Discussions Top

Donovan
Hello everyone, I’m so glad to have discovered this awesome community. Thanks for creating it! This is my second post, and apologies for...
New
sashaafm
I’m trying to evaluate the best combo/stack for a BEAM Web app. Right now I’m exploring Yaws a bit, after having dealt with Phoenix for a...
New
cvkmohan
The upcoming Phoenix 1.6 release looks very interesting. Became a habit to watch the commits - and - what they are bringing in. phx.gen...
New
pillaiindu
In django there is a cache framework backed by memcached. Rails also puts a lot of emphasis on caching, and even the idea of russian-doll...
New
arpan
Hello everyone :wave: Today I am very excited to announce a project that I have been working on for almost 3 months now. The project is...
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 39297 209
New
AlexMcConnell
The reason that Rails is as popular as it is is because it’s very easy for relatively inexperienced developers to get a lot of work done....
588 19568 166
New
tmbb
This is a post to discuss the new Phoenix LiveView functionality. From Chris’s talk, it appears that they generate all HTML on the serve...
342 18146 126
New
jesse
Hi everyone, I hesitated to post this here because I don’t want you to think I’m spamming, but I’ve been working on a Platform-as-a-Serv...
New
tomekowal
Hey guys! I want to create a toy project that shows a chart of temperature over time and updates every 5 seconds. I feel LiveView is per...
New

Other popular topics Top

marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
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
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
Lily
In templates/appointment/index.html.eex: <%= for appointment <- @appointments do %> <tr> <td><%= appoi...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
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
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New

We're in Beta

About us Mission Statement