¿Traducir los nombres de componentes por defecto (Cuerpo, Texto, Fila, etc.)?
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)
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);
});
});
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', } } });
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.
Issue #1336
[Pregunta] ¿Puedo hacer que todo no se pueda seleccionar por defecto?
Actualmente, todos los componentes son seleccionables/flotables por defecto. Y si quieres, puedes cambiar ese comportamiento proporcionando...
Issue #2310
[PREGUNTA] ¿Cómo puedo especificar la posición para arrastrar elementos?
Hola, estoy haciendo un proyecto con esta librería y quiero especificar la posición para arrastrar componentes en ella Por ejemplo, tengo u...
Issue #841
[PREGUNTA] Añadir Rasgo (atributo) por defecto al modelo para todos los componentes HTML (elementos)
Hola, He leído las wikis de Traits, Components y API, he recopilado todos los temas abiertos y cerrados. Incluso he encontrado el código do...
Issue #3004
PREGUNTA: propiedades de estilo personalizadas para cambiar de clase
Hola, Gracias por este buen editor. En mi proyecto, quiero ajustar las clases de componentes usando el gestor de estilos. Por ejemplo, esto...
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.