Rasgos personalizados que no se actualizan si se usa mjml
@RakulAgn por favor, evita crear problemas a través de las discusiones.
Lee la respuesta completa abajo ↓Pregunta
setTimeout(() => {
editor. DomComponents.addType("mj-image", {
isComponent: (el: any) => el.tagName === "MJ-IMAGE",
modelo: {
Predeterminados: {
Rasgos: [
{
Tipo: "MJCHANGE",
etiqueta: " ",
Nombre: "MJCHANGE",
},
{
Tipo: "HFF",
etiqueta: "Link",
Nombre: "Href",
},
{
Tipo: "alt",
etiqueta: "Alt",
Nombre: "Alt",
},
],
},
},
});
editor. TraitManager.addType("mjchange", {
noLabel: cierto,
createInput({}) {
let selectedSrc = editor.getSelected();
sea src = selectedSrc!. ¡atributos.atributos!. src;
const toggleModal = () => {
editor.runCommand("open-assets", {
objetivo: editor.getSelected(),
});
};
const el = document.createElement("div");
el.setAttribute("clase", "vista-rasgo-imagen");
el.innerHTML = '<img src="${src}" style="width: 100%; height:auto;background:#f9f9f9;" id="gjs_img_preview_logo_rtl"/>
<tipo de botón="submit" clase="btn btn-bloque principal btn-sm" id="chg-img-trait-btn">Cambiar</button>';
const inputType = el.querySelector("#chg-img-trait-btn");
const imgBox = el.querySelector("#gjs_img_preview_logo_rtl");
¡imgBox!. addEventListener("click", toggleModal);
¡inputType!. addEventListener("click", toggleModal);
devuelve El;
},
});
editor.on("modal:open", (component) => {
const $ = editor.$;
editor. AssetManager.open({
tipos: ["MJ-Image"],
select(assets, completado) {
const selected = editor.getSelected();
if (selected & & selected.is("mj-image")) {
selected.addAttributes({ src: assets.getSrc() });
$("#gjs_img_preview_logo_rtl").attr("src", assets.getSrc());
Complete && Editor. AssetManager.close();
}
},
});
Este método funciona bien para HTML normal. Pero cuando probé con MJML para la etiqueta MJ-IMAGE El Src se actualiza en la etiqueta TR pero no se actualiza en la etiqueta img dentro de la etiqueta TR La imagen de abajo ! Captura de pantalla del 2022-12-21 13-13-13(1)
Originally publicado por @RakulAgn en https://github.com/artf/grapesjs/discussions/4795
Respuestas (2)
@RakulAgn por favor, evita crear problemas a través de las discusiones.
Gracias por informar de esto, @RakulAgn.
Gracias por compartir tu informe sobre Rasgos personalizados que no se actualizan si usas mjml. Para ayudar al equipo a investigar y priorizar esto:
Por favor, proporciona:
- Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
- Tu GrapesJS número de versión
- Información sobre navegador y sistema operativo
- Cualquier mensaje de error de la consola del navegador
- Pasos para reproducir el problema
Lo que más ayuda:
- Ejemplo de código mínimo (no tu proyecto completo)
- Grabación de pantalla o captura de pantalla que muestra el problema
- Comportamiento esperado frente a comportamiento real claramente indicado
- Configuración GrapesJS que estás usando
Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3228
El valor del componente no cambia
Hola @artf He añadido un nuevo componente Aquí está el código '''js editor. DomComponents.addType('header', { modelo: { Predeterminados: {...
Issue #3335
Creando rasgo con la interfaz de propiedad del Style Manager
Tengo un componente que usa la propiedad 'background-url' del Style Manager: Me gustaría reutilizar esta interfaz que aparece en el Style M...
Issue #3449
Cambiar de página llama a estilos y scripts de canvas una y otra vez
Hola Estoy integrando el gestor de páginas en mi proyecto. Pero el problema que tengo es que cada vez que cambio entre páginas, carga archi...
Issue #3225
¿Cómo actualizar el estilo a partir de un rasgo de casilla?
Hola @artf Estoy intentando actualizar el estilo usando el rasgo de casilla, pero no llama a la función. Aquí está el código ¡Agradezco muc...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.