Issue #2937💬 RespondidoAbierto el 4 de agosto de 2020por MattDBPReacciones 1

Pregunta: RTE en modal

Respuesta rápidapor Ju99ernaut1

Puedes usar esto para conseguir un componente y su estilo; '''js objetivo const = editor.getSelected(); sea html = target.toHTML(); Sea CSS = editor. CodeManager.getCode(target, 'css', { CSSC: Editor. CSSComposer }); html = '<style>${css}</style>' + html; ```

Lee la respuesta completa abajo ↓

Pregunta

Hola,

Fragmento de códigoTEXT
Estoy intentando que TinyMCE funcione como editor en modal en lugar de en línea.
Puedo obtener los componentes seleccionados html con target.getEl().innerHTML, pero esto no incluye ningún tipo de estilo.
Al volver a configurar el contenido con replaceWith(html), todo el estilo se pierde en el componente.

¿Hay alguna forma de actualizar o reemplazar el html de un componente sin perder estilos?

`
const cmd = {

run(editor, sender, options = {}) {
        var target = options.target || editor.getSelected();
        const modal = editor. modal;

const STATE = {
            VueInstance: null,
            Html: target.getEl().innerHTML
        };

const vueElement = document.createElement('div');
        vueElement.innerHTML = '<editor :init="EditorConfig" v-model="Html"></editor>';

modal.onceOpen(() => { 
            ESTADO. VueInstance = nuevo Vue({ 
                el: vueElement,
                data() {
                    return {
                        EditorConfig: config,
                        Html: STATE. HTML
                    }
                },
                componentes: {
                    Editor
                }
            }); 
        });
        modal.onceClose(() => {             
            si(ESTADO. VueInstance) {
                const html = STATE. VueInstance.Html;
                target.components(html);
                const originalStyle = target.styleToString();
                const newComp = target.replaceWith(html);
                if(_.isArray(newComp)) {
                    newComp.forEach(i => {
                        i.EstiloSet(Estilo original);
                    })
                }
                else {
                    newComp.setStyle(originalStyle);
                }
                ESTADO. VueInstance.$destroy();
            }
        });

const modalOpts = {
            título: 'Edit',
            contenido: vueElement
        };

modal.open(modalOpts)
    }
};

export const EditModalCommand = cmd;
`

Respuestas (1)

Ju99ernaut17 de agosto de 2020

Puedes usar esto para conseguir un componente y su estilo;

'''js objetivo const = editor.getSelected(); sea html = target.toHTML(); Sea CSS = editor. CodeManager.getCode(target, 'css', { CSSC: Editor. CSSComposer }); html = '<style>${css}</style>' + html;

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.