Grapesjs: Implement TinyMCE and disable RTE

[chiqui3d]

I'm trying to apply tinyMCEas a replacement for RTE, but I'm doing an impossible task, I'm following the same steps of the plugin CKEDITOR(https://github.com/artf/grapesjs-plugin-ckeditor) but without any result.

I have also thought about rewriting the text component, but it would be too much, since the text component is the default RTE.
I've created an example here https://jsfiddle.net/qept2v7r/3/ if you can help me, because the truth is I don't understand what's going on, and I have to click 3 times to get the editor toolbar out.

Thanks!

[chiqui3d]

@artf
I tried to do it in a different way, but it was impossible for me, I think it no longer loses focus, but I think the view is not updated, and I honestly don't understand :( Looks like Backbone doesn't want to update the view.
https://jsfiddle.net/5s80kxzm/4/

[artf]

Hi @chiqui3d I'll try to check this out and will let you know

[artf]

Unfortunately, due to this issue https://github.com/tinymce/tinymce/issues/4629, it's not possible to implement TinyMCE, indeed the wrapper of the grapesjs is inside another iframe and the formatting doesn't work (only undo/redo buttons work).

Here is my, almost complete, plugin example with tinyMCE:
https://jsfiddle.net/uq9hfL8p

I have to close this issue as the problem is related to tinyMCE

[adamyarger]

@chiqui3d im a little late to the party, but I did get the cutomRte working with tinymce. In order for tinymce to work with iframe you have to pass in the context of the iframe window and document.

I added to the tinymce config in @artf example

content_window: document.querySelector('.gjs-frame').contentWindow,
content_document: document.querySelector('.gjs-frame').contentWindow.document,

https://jsfiddle.net/adamyarger/t3b5qky1/1/

Also note that some of the other formats are not working, this is due to the root tinymce element being a p tag. In order to use block elements in tinymce you'll have to enable div as a text component.

[artf]

@adamyarger 👏 great, definitely a step forward

BTW even with a div component, I'm still not able to use formats like alignment 🤔

[adamyarger]

@artf im thinking it has to do with the menus being outside .gjs-rte-toolbar. Im currently playing around with stopPropogation to see if that fixes it.

[chiqui3d]

@adamyarger 💯 Wow what big work, I hope you can work it out completely.

Thanks so much

[krishnaeverestengineering]

@chiqui3d im a little late to the party, but I did get the cutomRte working with tinymce. In order for tinymce to work with iframe you have to pass in the context of the iframe window and document.

I added to the tinymce config in @artf example

content_window: document.querySelector('.gjs-frame').contentWindow,
content_document: document.querySelector('.gjs-frame').contentWindow.document,

https://jsfiddle.net/adamyarger/t3b5qky1/1/

Also note that some of the other formats are not working, this is due to the root tinymce element being a p tag. In order to use block elements in tinymce you'll have to enable div as a text component.

how to fix this?