¿Cómo conseguir el plugin externo CSS, JS y HTML a través de la función de exportación de GrapesJS?

. Pero no podemos mostrar a los usuarios el calendario en el lienzo después de arrastrar y soltar con la función de renderizado en MODEL, por eso usamos OnRender en la VISTA.

¿Has probado la definición de tipo de componente que te he puesto? Ha sido probado y está funcionando:

! imagen

Entonces, ¿es suficiente el MODELO por sí solo para renderizar y añadir HTML a la función de exportación? Si es así, ¿podrías explicar cómo?

Sí. Renderizará el componente en el lienzo e incluirá el código final en HTML final.

Si necesitas más ayuda para tu caso específico, agradecería que te ayudaras. ¡Salud!

Muchas gracias, @pouyamiralayi. El código que diste funcionaba. Nuestro código no pudo elegir el elemento dominante para renderizar el calendario. Ahora funciona como se esperaba.

¡Muchas gracias por ayudarnos !!! :-p

¡Hola! Lo que buscas es usar JS dentro de componentes.

Solo incluye los JS y CSS requeridos en la sección de scripts y estilos de canvas:

lienzo: {
            Estilos: [
                'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.css',
                'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.css',
            ],
            guiones: [
                'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.js',
                'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.js',
            ],
        },

Después construye tu propio componente de tipo personalizado:

             modelo: {
                Predeterminados: {
                    CCID:'',
                    etiquetaNombre: 'div',
                    resizeable:Cierto,
                    script: function(){
                            Id de const = '{[ ccid ]}'
                            var calendarEl = document.getElementById(id);

var calendar = nuevo FullCalendar.Calendar(calendarEl, {
                                plugins: [ 'DayGrid' ]
                            });
                            calendar.render();
                    }
                },
            },
            Vista:{
                init(){
                    this.model.set('ccid', this.model.ccid)
                }
            }
        

Luego, en la vista previa del código verás el script de resultado:

! imagen

¡Salud!