Pregunta: RTE en modal
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,
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)
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.
Issue #1669
[Pregunta] El modal de enlace personalizado no actualiza el texto actual, sino que añade otro texto con enlace
Hola Artur, Estoy intentando tener un modal personalizado al pulsar el botón de enlace en RTE. Pero no convierte el texto seleccionado a en...
Issue #1888
[Pregunta] Añadir html personalizado dentro de Canvas
Hola, Estoy usando uvas para exportar un json personalizado con toda la información que necesito, en lugar de HTML y CSS. Para hacer eso, e...
Issue #3185
[PREGUNTA] ¿Cómo obtener el rasgo del modelo de un componente?
Hola, He añadido un nuevo tipo de "array" al TraitManager. Así que puedo añadir varios subrasgos. En un punto tengo que comprobar los rasgo...
Issue #1912
[PREGUNTA] Componentes personalizados hijos por defecto
Hola, Estoy intentando entender cómo puedo lograr lo siguiente.Crear un componente con un contenido predeterminado como hijos.Crea un bloqu...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.