Issue #2123💬 RespondidoAbierto el 9 de julio de 2019por lajby95Reacciones 2

¿Traducir los nombres de componentes por defecto (Cuerpo, Texto, Fila, etc.)?

Respuesta rápidapor giorgiosjames1

Parece que el nombre de visualización de un componente en el lienzo y el gestor de capas es el id de tipo del bloque, con la primera letra en mayúsculas. Por lo que veo, la única forma de cambiar esto es crear un tipo nuevo extendiendo el antiguo, con un ID diferente, y luego borrar el tipo antiguo para mantener todo...

Lee la respuesta completa abajo ↓

Pregunta

Quiero cambiar los nombres de los componentes predeterminados que puedes arrastrar y soltar en el lienzo, para que muestren diferentes nombres en el gestor de capas y en otros lugares, principalmente por la traducción a otro idioma. Ejemplos: Cuerpo, texto, fila, enlace, imagen, etc. ¿Cómo podría hacerlo? ! gestor de capas

Respuestas (3)

giorgiosjames12 de julio de 2019

Parece que el nombre de visualización de un componente en el lienzo y el gestor de capas es el id de tipo del bloque, con la primera letra en mayúsculas. Por lo que veo, la única forma de cambiar esto es crear un tipo nuevo extendiendo el antiguo, con un ID diferente, y luego borrar el tipo antiguo para mantener todo limpio. Luego, todos los bloques que utilicen el tipo antiguo deben cambiarse al nuevo tipo, y sus etiquetas también deben cambiarse. Aquí tienes algunos ejemplos de código cambiando algunos de esos nombres de componentes por defecto:

'''es6 editor.on('load', () => {

const translateObject = { 'texto': 'texto traducido', 'imagen': 'imagen traducida', 'cuerpo': 'cuerpoTraducido', 'row':'readRow', 'enlace':'enlace traducido', };

const bm = editor. Jefe de bloque; const dm = editor. DomComponents;

Object.keys(translateObject).forEach((translationKey) => { const translationVal = translateObject[translationKey];

const affectedBlocks = bm.getAll().filter((b) => { return b.attributes.content.type === llave de traducción; });

affectedBlocks.forEach((block) => { block.attributes.content.type = translationVal; block.set('label', traducciónVal); });

const oldType = dm.getType(translationKey);

dm.addType(translationVal, { modelo: oldType.model, view: oldType.view });

dm.removeType(llaveTraducción);

});

});

artf14 de julio de 2019

Puedes actualizar sus nombres de esta manera. IMPORTANTE: coloca el código en un plugin de lo contrario, corres el riesgo de ver los nombres actualizados solo con componentes recién añadidos '''js editor. DomComponents.addType('image', { modelo: { por defecto: { nombre: 'MI IMAGEN', } } });

lajby9512 de julio de 2019

Gracias. Esto funciona bien al añadir nuevos componentes, pero digamos que cargo un html+css predefinido usando editor.setComponents(html) y luego empiezo a editarlo más tarde. Las etiquetas HTML del preset reciben automáticamente GrapesJS los distintos nombres de componentes (Text, Box, Image, etc.). ¿Cómo podría editar esos nombres por defecto? No consigo encontrar la manera.

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 →

Explorar categorías de plugins

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