Bloque no editable después de la plantilla de importación
Perdona, encontré la solución mientras leía mi propia pregunta))) los componentes y estilos son cadenas. Para quienes buscan una solución: 'editor.setComponents(JSON.parse(value.components);' 'editor.setStyle(JSON.parse(value.styles));'
Lee la respuesta completa abajo ↓Pregunta
Tengo el mismo problema que en 1408. Dijiste que JSON debería importarse en lugar del HTML. ¿Podrías decirme, por favor, cómo importar la plantilla JSON? No encuentro la solución.
En 'storage:store' obtengo un objeto:
{ activos: "", componentes: "", CSS: "", html: "", Estilos: "" }
Luego ejecuto el comando:
'let emailTemplateStr = editor.runCommand('gjs-get-inlined-html')'
y guárdalo.
Pero después de importar esta plantilla ('this.editor.setComponents(template)'), algunos bloques han cambiado de "text" a "box" y no son editables por CKEditor. Entonces, ¿cómo debería verse el objeto para importarlo correctamente? Supongo que debería poner componentes y estilos a este objeto. Pero no tengo ni idea de cuál es su estructura.
Respuestas (3)
Perdona, encontré la solución mientras leía mi propia pregunta))) los componentes y estilos son cadenas. Para quienes buscan una solución: 'editor.setComponents(JSON.parse(value.components);' 'editor.setStyle(JSON.parse(value.styles));'
@artf si uso la plantilla del <strong>importador de texto </strong> falla y convierte el elemento de texto en caja
Plantilla de ejemplo para reproducir el problema. #1906
''<ancho de tabla="100%" altura="150" bgcolor="rgb(245, 245, 245)" id="ipyk" clase="c6668 c1354 c7111 c10256 c12714 c22130" estilo="cuadro-tamaño: recuadro de borde; altura: 150px; margen-arriba: 0px; margen-derecha: auto; margen-inferior: 10px; margen-izquierda: auto; relleno-top: 5px; relleno-derecho: 5px; relleno-inferior: 5px; relleno-izquierda: 5px; ancho: 100%; ancho máximo: 550px; color de fondo: rgb(245, 245, 245); over-wrap: palabra de ruptura; guiones: auto;">
<tbody id="inej" class="c1363 c7121 c10266 c12726 c22143" style="box-sizing: border-box;">
<tr id="iqhg" clase="c1371 c7130 c10276 c12737 c22155" estilo="tamaño de caja: cuadro de borde;">
<td valign="top" id="iajj" class="c6692 c1379 c7139 c10286 c12748 c22167" style="cuadro-tamaño: border-box; font-size: 12px; font-weight: 300; vertical-align: top; color: rgb(111, 119, 125); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; addding-top: 0px; addding-top: 0px; addding-bottom: 0px; addedding-left: 0px;">
<ancho de tabla="100%" altura="150" id="inlm" clase="c7742 c1516 c7149 c10296 c12760 c22180" estilo="overflow-wrap: palabra de ruptura; guiones: auto; tamaño-caja: cuadro de borde; altura: 150px; margen-arriba: 0px; margen-derecha: auto; margen-inferior: 10px; margen-izquierda: auto; relleno-top: 5px; relleno-derecho: 5px; relleno-inferior: 5px; relleno-abajo: 5px; relleno-izquierda: 5px; ancho: 100%;">
<tbody id="ixxl" class="c1525 c7159 c10306 c12772 c22193" style="box-ssize: border-box;">
<tr id="i2r4" clase="c1533 c7168 c10316 c12783 c22205" estilo="tamaño de caja: cuadro de borde;">
<td valign="top" id="iv9e" clase="c7766 c1541 c7177 c10326 c12794 c22217" estilo="cuadro-tamaño: recuadro-cuadro; tamaño-fuente: 12px; tipo-peso: 300; color: rgb(111, 119, 125); margen-superior: 0px; margen-derecha: 0px; margen-izquierda: 0px; margen-izquierda: 0px; relleno-top: 10px; relleno-derecho: 10px; relleno-izquierda: 10px; acolchado-izquierda: 10px; vertical-alineado: top;">
<id="i20i" class="c12862 c7187 c10336 c12806 c22230" style="tamaño de caja: cuadro de borde; relleno-top: 10px; relleno-derecho: 10px; relleno-inferior: 10px; relleno-izquierda: 10px; peso-fuente: 400; tamaño-tipo: 14px; estilo-tipo: normal; familia de fuentes: Arial, Helvetica, sans-serif; color: rgb(0, 0, 0);">
<br id="ir9rg" class="c22260" style="box-ssizeing: border-box;">
<br id="iwcfg" class="c22269" style="box-ssizeing: border-box;">Ryan, aquí...
<br id="iumju" class="c22287" style="box-ssizeing: border-box;">
<br id="ipt4h" class="c22296" style="box-ssizeing: border-box;">¡Ha sido genial conectar contigo en nuestra Discovery Call!
<br id="iqbfb" class="c22314" style="box-sizing: border-box;">
<br id="iwkb2" clase="c22323" estilo="tamaño de caja: border-box;">Como se mencionó, aquí tienes un enlace directo a nuestra web para que puedas conocer más sobre nuestra filosofía en
<em id="i5kze" class="c22341" style="box-ssizeing: border-box;">Cómo gestionar un pequeño bufete de abogados</em> y por qué somos EL más grande y de más rápido crecimiento
<strong id="i5xet" class="c22359" style="box-ssizeing: border-box;"><em id="iyyid" class="c22367" style="box-siding: border-box;">Comunidad</em></strong> de abogados emprendedores existente...
<br id="idiu2" class="c22395" style="box-ssizeing: border-box;">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
''</table>'Perdón, encontré la solución mientras leía mi propia pregunta))) los componentes y estilos son cadenas. Para quienes buscan una solución: 'editor.setComponents(JSON.parse(value.components);' 'editor.setStyle(JSON.parse(value.styles));'
¿Qué es el "valor"?
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2968
Pregunta: intentando poner el sector 'Settings' bajo el estilo
https://github.com/artf/grapesjs/issues/1627 Creo que la pregunta está relacionada específicamente con esta línea, tengo el mismo problema....
Issue #1109
[PREGUNTA] Bloques de columna no desplegables en lienzo
Buenos días @artf :) Estoy experimentando un problema similar al de este problema. No puedo dejar caer ningún bloque (texto, imagen, etc.)...
Issue #1214
Consulta para un problema relacionado con el 873
'Número anterior' Por favor, confirma, el error reportado anteriormente ha sido resuelto. O sigue teniendo el mismo problema. Por favor, co...
Issue #3778
No se muestran opciones seleccionadas - nueva anomalía
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? ChromeEnlace de demo reproducible https://g...
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.