Is it possible to use multiple rich text editor instances

[sylvia-vdv]

I was wondering if it's possible to use multiple rich text editor instances, for example the default editor for certain components and the ckeditor for other components. Or different configurations for ckeditor depending on the component.
I've tried fiddling with the editor.setCustomRte function (eg. returning the original Editor depending on the component) but so far without success.

[artf]

Hi @sylvia-vdv not really, right now, the only way I could think is to create a new text component by extending the default one and putting there the logic for a new custom rich text editor.

[kla-ko]

Hi @sylvia-vdv . This is exactly what I want to achieve as well. I want to use ckeditor for the text component, but I want to keep the simple standard editor for label-tags. Would you mind to sketch briefly how you've created your solution?

Many thanks!

[mosh-tudor]

@kla-ko
I can't provide the source code, but you can try initializing the ckeditor editor in a modal window.

From my own experience I can say that it works well.

• Create a component
• On dblclick event open a modal with the content from current component
• On ckeditor update event, insert the content from ckeditor into the selected/current component

Screen.Recording.2023-12-15.at.13.21.15.mov

[kla-ko]

Thanks @mosh-tudor ,
This is a cool idea! I will certainly give it a trial.
Regards,

[sylviavdv]

Hi @kla-ko
I ended up with a custom text component which opened my editor in a fancybox popup window (https://fancyapps.com/fancybox/).
It's basically the same same idea that mosh-tudor uses.

This is my component

const textwriter = editor => {
    editor.DomComponents.addType('textwriter', {
        model: {
            defaults: {
                droppable: false, 
                editable: false,
                content: '',
            }
        },
        view: {
            events: {
                dblclick: 'onActive',

            },
            onActive(ev) {
                ev && ev.stopPropagation();
                currentEl = this.model;
                wysiwyg_window(currentEl.toHTML());
            },
            onRender({ el }) {
                el.innerHTML = this.model.attributes.content;
            }
        }
    });

    editor.BlockManager.add('textwriter', {
        label: 'Textwriter',
        attributes: {
            class: 'fa fa-file-alt'
        },
        category: 'Basic',
        content: { type: 'textwriter' }
    });
};

function wysiwyg_window(html) {
    $.post( "apps/grapesjs/wysiwyg.php",{'html' : html}, function() {
      $.fancybox(
            {
                'href': 'apps/grapesjs/wysiwyg.php',
                'type': 'iframe',
                'autoDimensions': false,
                'width': 950,
                'height': 800,
                'transitionIn': 'none',
                'transitionOut': 'none'
            }
        );
    });
}

function wysiwyg_callback(data) {
    currentEl.attributes.content = data;
    currentEl.getView().render();
    $.fancybox.close();
}

The apps/grapesjs/wysiwyg.php is just a page with my texteditor (tinymce in this case), which reads the html from the post data and inserts it into the textarea element.
Then I have a button on that page called "Transfer content" <button class="button" onclick="parent.wysiwyg_callback(tinyMCE.get('text').getContent());">Transfer content</button> which calls the callback to update the editor.

It's certainly not the cleanest solution and yes I know I'm still using jQuery, but I'm in no way a JavaScript professional ;)

[kla-ko]

Will try. Thanks