Definir componentes en plantilla
Si quieres inicializar el editor con algunos componentes ya colocados en el lienzo, necesitas esto: '''js inicialización del editor... Define un componente personalizado como antes En lugar de proceder con la definición de bloques, usa este fragmento a continuación: editor.setComponents(' <tr data-gjs-type="custom-typ...
Lee la respuesta completa abajo ↓Pregunta
Preguntas
- ¿Cómo puedo convertir una parte de mi plantilla en un componente?
- ¿Cómo puedo configurar DraggableComponents en un componente así?
- Si es así, ¿puedo dejar de poner selectable: false, highlightable: false, hoverable: false en los nodos hijos dentro de dicho componente?
- ¿Es posible suministrar un enlace externo diferente al componente?
Más explicación y una parte del código
Tengo una pregunta porque creo que grapesjs es más inteligente de lo que lo uso actualmente. Tenemos una asp.net app integrada y la inicializamos desde un elemento. Ese elemento es la combinación de nuestra plantilla html y los datos que cada día ofrecen a nuestros usuarios un boletín prellenado con contenido nuevo. Pueden arrastrar artículos y luego enviarlos.
Nuestra plantilla tiene cosas como esta (el código dentro es de razor/cshtml):
<tr data-gjs-draggable="#main" data-gjs-copyable="false">
<td data-gjs-selectable="false" data-gjs-highlightable="false" data-gjs-hoverable="false">
<a data-gjs-selectable="false" data-gjs-highlightable="false" data-gjs-hoverable="false" href="https://www.@(Model.Site.Address)/subscribe/" target="_blank">
<img data-gjs-selectable="false" data-gjs-highlightable="false" data-gjs-hoverable="false" style="margin-bottom: 5px;" alt="" src="https://cdn.@(Model.Site.Address)/Subscribe.jpg" border="0" width="468" />
</a>
</td>
</tr>
A mí me parece que debería ser un componente con la nueva opción de arrastrarComponentes activada. (véase la pregunta 1-3)
Esta pieza tiene un enlace externo que acabará en la salida. Ayudaría a nuestros usuarios si pudiera haber otro enlace que no se envíe, sino solo para uso interno (enlace al editor en nuestro cms). Quizá solo esté disponible en el gestor de capas.
Respuestas (3)
Si quieres inicializar el editor con algunos componentes ya colocados en el lienzo, necesitas esto: '''js inicialización del editor... Define un componente personalizado como antes En lugar de proceder con la definición de bloques, usa este fragmento a continuación: editor.setComponents(' <tr data-gjs-type="custom-type"> < > <a> <img style="margin-bottom: 5px;" alt="" src="https://cdn.@(Model.Site.Address)/Subscribe.jpg" border="0" width="468" /> </a> </td> </tr> ',)
Salud.
por ahora, Grapes tiene algún problema para almacenar componentes personalizados definidos fuera de los plugins.
En realidad, se almacenan correctamente, solo se trata de cargar componentes que no se reconocen porque el tipo personalizado aún no existe, así que esta es la razón por la que se pone el código en el plugin (los plugins se cargan antes de obtener componentes). Estamos actualizando la documentación de Componentes y esto será la primera recomendación (y la única disponible) para definir tipos personalizados
Por cierto, @Jogai el enfoque descrito por @pouyamiralayi es correcto. En lugar de escribir '''html
<tr data-gjs-draggable="#main" data-gjs-copyable="false"> ``` Puedes simplemente definir un tipo de componente personalizado (o ampliar el ['row'](https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/ComponentTableRow.js) incorporado) '''js editor. DomComponents.addType('my-row',{ extender: 'fila', modelo:{ valores predeterminados:{ arrastrable: '#main', copiable: 'falso', } // ... ``` Y úsalo donde lo necesites'''html
<tr data-gjs-type="my-row"> ``` Las propiedades se tomarán del tipo de componente definido. De este modo, estás más orientado a componentes y es más fácil reutilizarlos alrededor de tus plantillasGracias por la respuesta y los enlaces. Son realmente útiles. Sin embargo, para esta pregunta buscaba una forma de hacerlo dentro de una plantilla. Actualmente no usamos el gestor de bloques, nuestros usuarios solo arrastran cosas. Nunca añaden nada.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2839
[Pregunta] Añadí un componente llamado plantilla en los bloques, pero cuando intento arrastrar otros componentes dentro de ese componente plantilla, se arrastra, pero tras guardarlo elimina todos los componentes que hay dentro. ¿Cómo evitar esto?
Este es el código del componente de plantilla: '''js exportar default { init(editor) { editor. DomComponents.addType('myTemplate', { isComp...
Issue #3328
¿Cómo puedo actualizar el nodeValue (valor de texto) de los componentes mediante formas de entrada
Hola. Grapesjs es una herramienta estupenda. Gracias por ello. Quiero actualizar el valor de texto de un componente por entradas, ¿cómo pue...
Issue #1912
[PREGUNTA] Componentes personalizados hijos por defecto
Hola, Estoy intentando entender cómo puedo lograr lo siguiente.Crear un componente con un contenido predeterminado como hijos.Crea un bloqu...
Issue #2660
[PREGUNTA] Función de componentes del modelo de Reinit
Hola a todos, Tengo un componente personalizado con una estructura diferente según el valor de la prop. ¿Cómo puedo recordar/reiniciar el f...
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.