Elementos html personalizados
Sí, puedes usar diferentes nombres de etiquetas en tu componente personalizado '''js const dc = editor. DomComponents; const defaultType = dc.getType('default'); dc.addType('my-custom-type', { model: defaultType.model.extend({ etiquetaNombre: 'custom-tag' }, { isComponent(el) { if(el.tagName == 'CUSTOM-TAG') return {t...
Lee la respuesta completa abajo ↓Pregunta
¿Es posible, y si es así, cómo hacerlo, usar un elemento html personalizado, por ejemplo,
<body> <my-custom-tag/> </body>¿Cuál renderizará HTML específico para la ventana de previsualización, pero la fuente mostrará la etiqueta personalizada?
Gracias, Paul
Respuestas (3)
Sí, puedes usar diferentes nombres de etiquetas en tu componente personalizado '''js const dc = editor. DomComponents; const defaultType = dc.getType('default');
dc.addType('my-custom-type', {
model: defaultType.model.extend({ etiquetaNombre: 'custom-tag' }, { isComponent(el) { if(el.tagName == 'CUSTOM-TAG') return {type: 'my-custom-type'} }, }),
view: defaultType.view.extend({ etiquetaNombre: 'div' //<-- en lienzo se usará div }) });
Gracias @artf, eso me orienta en la dirección correcta.
Si quiero que todo lo que necesite ser editable en el bloque aparezca en el código de etiquetas personalizadas, ¿cómo lo conseguiría?
¿Te refieres a algo así? '''js editor. BlockManager.add('custom-block', { etiqueta: 'Custom Block' Contenido: '<custom-tag>...</custom-tag>', })
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #917
[PREGUNTA] Propiedades de estilo personalizado por elemento
¿Es posible tener una interfaz de propiedad personalizada por elemento? Por ejemplo, considera que quiero que el tamaño de fuente se muestr...
Issue #1622
Emisión de fuente seleccionada por defecto para fuente personalizada en la tipografía.
Hay un problema de fuente: cuando hago clic en cualquier elemento no muestra la fuente actual del elemento, añadí código personalizado para...
Issue #1479
Elemento personalizado con ventana emergente
Hola @artf He creado una ventana emergente para seleccionar datos personalizados de enlaces, pero los datos se guardan y también se muestra...
Issue #1877
[SOLICITUD DE FUNCIÓN] ¿Estilos personalizados que añaden o eliminan clases personalizadas?
Actualmente, todos los valores del gestor de estilo que cambias para un elemento simplemente actualizan una <style> etiqueta en línea en el...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.