Problema al adjuntar el evento a un nuevo plugin en Anglar

@sukheja-varun

añadir cualquier evento al nuevo plugin

Dentro de tu plugin, primero debes definir un componente de tipo personalizado:

   editor. DomComponents.addType('my-first-type', {
            modelo: {
                Predeterminados: {
                    components: '<div class="my-block">Este es un bloque simple</div>',
                }
            }
    })

Luego define un nuevo bloque que utilice nuestro tipo de componente personalizado previamente definido:

    editor. BlockManager.add('my-first-block', {
            etiqueta: 'Bloque simple',
            Contenido: {
                Tipo: 'Mi-Primero-Tipo'
            }
    });

Para el modal, definimos las siguientes funciones:

    const createContent = () => {
            const content = document.createElement('div');
            content.style = 'posición: relativa';
            content.innerHTML =
                `
                    <form onsubmit="">
                        < >
                           <tipo de entrada="texto" id="consulta" marcador de posición="búsqueda..." nombre="consulta" estilo=" margen-inferior:10px; tamaño-fuente: 1rem; relleno: 10px 20px; borde-radio: 3px; borde: ninguno; ">
                        </div>
                    </form>
                    <estilo del botón=" color de fondo: azul; color: blanco; tamaño-fuente: 1rem; radio de borde: 5px; borde: ninguno; relleno: 10px 20px; cursor: puntero ">
                        Enviar
                    </botton>
                    `
            devolver contenido
    }

el ''createContent'' generará el HTML interno para tu modal.

        const applyChanges = () => {
            axios.post("http://example.com", {
                /*post cuerpo*/
            })
        }

el ''applyChanges'' es el manejador de clics para el botón de enviar dentro del modal. Y finalmente:

        const showModal = () => {
            const modal = editor. Modal
            const content = createContent()
            const BTN = content.children.length === 2 & content.children[1];
            btn.addEventListener('click', applyChanges)
            modal.open({
                título: "¡Mi diálogo!",
                Contenido: Contenido
            })
        }

Ahora que tenemos nuestro componente disponible como bloque y una forma de mostrar nuestro modal, necesitamos definir un oyente para el evento drop dentro de nuestro plugin:

    editor.on("canvas:drop", (dt, m) => {
            si (m & & m.atributos && m.atributos.tipo == 'mi-primero-tipo') {
                /*nuestro componente ha sido eliminado, muestra el modal:*/
                showModal()
            }
    })

API de llamadas

Como puedes ver en ''applyChanges'' puedes usar la librería de red que quieras, pero no hay ninguna biblioteca de red integrada disponible en grapesjs.

inyectar HTML personalizado

Para inyectar contenido dentro de tu componente, puedes usar tanto append como components. ¡Salud!