CKEditor using grapesjs-mjml

[NorthstarTech]

When I edit any text from side bar typgraphy or anythingelse, then I use the ckeditor operation like bold or making link, its not working and gives the error. Also, grapesjs-demo gives the same error. Attachment for error is available. Let me know asap, if anyone knows how to fix this issue.

[IceCrystal0k]

Mjml works almost fine for me with ckeditor (i have some problems with some unicode characters inserted by ckeditor).
Your mjml editor probably requires some plugins from ckeditor that are not included in your ckeditor, that's why the error.
Check below my build-config.js to see what plugins i included when i built the ckeditor.

build-config.txt

[NorthstarTech]

@artf @IceCrystal0k CKEditor is still not working with grapesjs-mjml. When we perform any action from right panel (means change font color etc), then make changes from ckeditor, its not working. Issue is also reproducing on grapesjs-mjml demo. I need the solution for it. Please help. Thanks.

[IceCrystal0k]

yea, i can see that after you change something from the right side the CKeditor won't apply the changes anymore, probably it needs the content to be updated, i don't know. But i see no error in the console.

What you can do for now is to disable the editing from the right side for the mj-text component and let only the ckeditor.

[kickbk]

I am facing the same issue. Any progress on this?

[kickbk]

We have resolved most of the crucial issues with the project so far (#92 and GrapesJS/grapesjs#1649). This one is left. When you apply styles to an editable component (text, button, etc.) with Style Manager, and then try to edit with CKEditor, it does not work. It also doesn't show any error in console (also not on the demo), which is not very helpful.

I wanted to focus on this issue so we can collaborate and resolve it. Currently debugging as well and I will share a solution if I find it.

[kickbk]

I made it work. MJML works differently than the other plugins in that it regenerates the element html every time there is a style change. So as long as no styles are applied to a text element (for example), CKE is fine going back to edit mode and apply more changes.

I noticed that the class cke_editable is stripped off the regenerated element.

When you double click a text component, it fires onActive which tries to see whether the rte was already created for the component. Let's assume it is.

onActive(e) {
	...
	const rte = this.rte;
	if (rte) {
		try {
			this.activeRte = rte.enable(this, this.activeRte); // << Enabling RTE
		} catch (err) {
			console.error(err);
		}
	}
	...
},

enable is a function ran by the CKeditor grapesjs plugin which first initiates the ckeditor instance on the element, and with consequent edits it reuses the same instance, however, here is the problem. We cannot rely on the same instance of the ckeditor, if the component was regenerated.
We are ok keeping it as long as we haven't applied any style changes. So what we can look for is what's different - the class name. Here's my edit using jQuery. You could do vanilla:

editor.setCustomRte({
		enable(el, rte) {
			...
			if(rte && rte.status != 'destroyed' && $(el).hasClass('cke_editable') ) { // << I added a check for the class cke_editable
			...

Now the ckeditor will reinitialize whenever grapesjs regenerates the element.

So this will solve the issue. However, this requires changing the ckeditor plugin and it should be possible to improved. We should understand really what causes ckeditor to not want to edit the newly generated element.
Also, we should be able to destroy the ckeditor on style change with a listener in the view. I tried it but I am not sure how you destroy it. Should be something like:

// MJML Core view
	let coreMjmlView = {
		init() {
			this.listenTo(this.model, 'change:style', this.destroyRte); // << We listen to style change, which ends up regenerating the component.
			this.listenTo(this.model, 'change:attributes change:src', this.rerender);
		},
		destroyRte() {
			// Here we should destroy the rte
			const rte = this.rte;
			rte.destroy(); // Does not work. How do we destroy it?
		},
		...

[artf]

Released the new version https://github.com/artf/grapesjs-mjml/releases/tag/v0.0.31
thanks for the input @kickbk

[kickbk]

@artf I am confused, v0.0.31 only addresses focus on text components, not the issue above when you change styles with style manager and then cke stops responding. Am I missing something?

[artf]

I tried to style the component and the RTE works as expected, maybe I miss something...

[kickbk]

Step1: select text and apply cke changes (bold, italic, whatever)
Step2: style element by changing color (or any other via StyelManager)
Step3: Select text and try t change something with cke

[kickbk]

@artf any word on this?

[adamwpe]

@kickbk Have you worked out a work around?

[yanfanvip]

@kickbk你解决了吗？

using this plugin https://github.com/yanfanvip/grapesjs-plugin-ckeditor/blob/master/src/index.js