Faltan estilos en línea usados por CKEditor al añadir componentes html en bruto

+1

Hola He tenido problemas similares. Creo que es bastante serio, ya que tanto el boletín como la demo de mjml se ven afectados. (Ambos usan CKeditor como RTE)

Cuando importo un contenido que tiene un texto (mj-text) que tiene elementos estilizados (span), el contenido importado se analiza y los elementos de estilo se reconocen como componentes individuales y no como contenido del elemento de texto envolvente.

ejemplo (Esto es válido según mjml.io):

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>
        <mj-divisor borde-color="#F45E43"></mj-divider>
        <mj-text font-size="20px" font-family="helvetica"><strong>Hola</strong> <span style="color: #F45E43;">Mundo</span></mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Resultado esperado: ! imagen

Resultado: ! imagen

El problema es que, debido a que los textos anidados se analizan en componentes, sus atributos de estilo se eliminan y el código de resultado ya no los contiene:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="/assets/img/logo-small.png">
        </mj-image>
        <mj-divisor frontera-color="#F45E43">
        </mj-divider>
        <mj-text-font-size="20px" font-family="helvetica">
          <strong>Hola</strong> 
          <span id="io1ak">World</span>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

El estilo debe estar ahí en algún lugar bajo el capó. Porque cuando hago doble clic en el texto, el CKEditor carga y de alguna manera "restaura" el atributo de estilo. Pero a menos que abra todos los textos para editar en cada edición de contenido, el estilo se pierde.

No todas las versiones de GrapesJS se ven afectadas. '0.21.1' y '0.21.1' son Pero '0.16.3' - '0.19.5' se comporta como se esperaba.

He comprobado los cambios de '0.19.5' a '0.20.1' y no pude rastrear claramente qué podría haber causado el cambio en este comportamiento. Pero probablemente tenga que ver con 'Soporte textible para componentes de texto extendidos'

Ahora sé que los textos anidados son nativos de grapesJS, ya que esta es la forma predeterminada de estilizarlos. ¿Pero hay alguna forma de desactivar la función de texto anidado?

Salida de CKEDITOR: '<div>algunos textos enriquecidos de <span style="color:blue">ckeditor</span></div>' Después de analizar en editor, conviértete en lo siguiente: '<div data-gjs-type="text">some rich text from <span style="color:blue" data-gjs-type="default">ckeditor</span></div>' Básicamente todos los dominantes se convierten en componentes.

Quizá dar la opción al desarrollador para decidir si un componente debería dejar de añadir nodos hijos como componentes. Puede añadir una nueva propiedad de bandera en el modelo del componente, por ejemplo: ''stopProcessChildren''

Dentro de ./parser/mode/ParserHtml.ts::p arseNode(), justo antes de entrar en el recurisve parseNode() y asignar componentes hijos 'model.components = this.parseNode(node, {/.../});'

• Añadir una condición else-if: si ''stopProcesprocesNiños'' del modelo es cierto, no se haga el parseNode() en nodos hijos.
• a continuación, hay que establecer el InnerHtml del nodo dominante actual para modelar el ''contenido'' o hacerlo en la definición de componentes

Desde los valores por defecto ./dom_components/model/Component.ts::toHTML() y ./dom_components/model/Component.ts::getInnerHTML(), La salida HTML debería devolver el ''contenido'' del modelo si no hay componentes hijos.

La definición propuesta de componentes puede ser así:

editor. DomComponents.addType('my-rich-text', {
  isComponent: el => {
    if (allChildText(el)) { //check si todo nodo de texto o nombre de etiqueta en textTags
      return { 
		Escribe: 'my-rich-text', // o puedes hacer 'text' aquí? No estoy seguro.
		Editable: Cierto,
		contenido: el.innerHtml,
		componentes: falso,
		stopProcessChildren: cierto, //nueva propiedad
	  };
    }
  },
  // ...
});

Preocupaciones: XXS

Gracias por informar de esto, @gustavohleal.

¡Gran sugerencia sobre Falta de estilos en línea que utiliza CKEditor al añadir componentes html en bruto! Aunque esta función específica aún no está en la API principal, existen varias formas de lograr un comportamiento similar.

Usando el sistema de eventos: '''javascript editor.on('component:update', (component) => { Tu lógica aquí });

**Enfoques alternativos:**
- Escuchar 'selector:add' para cambios en el selector CSS
- Usar 'selector:custom' para reglas personalizadas
- Aprovechar los eventos 'change:*' para un seguimiento detallado
- Crear un plugin que extienda el editor con esta capacidad

**Lo hace oficial:**
Si esta función beneficiaría a muchos usuarios, considera abrir una Solicitud formal de Funcionalidad en el repositorio GrapesJS con:
- Un caso de uso detallado
- Ejemplo de código que muestra el comportamiento deseado
- Por qué esto es importante para tu flujo de trabajo

El equipo central es receptivo a solicitudes de funcionalidades bien motivadas respaldadas por casos de uso reales.