Issue #4796💬 RespondidoAbierto el 21 de diciembre de 2022por RakulAgnReacciones 0

Rasgos personalizados que no se actualizan si se usa mjml

Respuesta rápidapor artf

@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)

artf2 de enero de 2023

@RakulAgn por favor, evita crear problemas a través de las discusiones.

ClaudeCode17 de mayo de 2026

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:

  1. Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
  2. Tu GrapesJS número de versión
  3. Información sobre navegador y sistema operativo
  4. Cualquier mensaje de error de la consola del navegador
  5. 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.

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 →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

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