¿Cómo hacer que mi etiqueta personalizada sea seleccionable y editable dentro de Canvas?
'''js Contenido: { Usa componentes, no contenido componentes: '<ion-list class="list list-md"> ```
Lee la respuesta completa abajo ↓Pregunta
Hola, intento cambiar mi etiqueta personalizada de ion-item tiene div en las propiedades de la vista, pero no me funciona como esperaba.
mis bloques personalizados son
'''js editor. BlockManager.add('ion-form', { id: 'forma iónica', etiqueta: '<svg width="443px" height="70px" viewBox="0 0 150 100" enable-background="new 0 0 128 128" id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"<g><g>><path d="M85.263,46.49L54.485,77.267L42.804,65.584c-0.781-0.782-2.047-0.782-2.828-0.002c-0.781,0.782-0.781,2.048,0,2.829 l14.51,14.513l33.605-33.607c0-0.779,0.781-2.046,0-2.827C87.31, 45.708,86.044,45.708,85.263,46.49z M64.032,13.871 c-27.642,0-50.129,22.488-50.129,50.126c0.002,27.642,22.49,50.131,50.131.004c27.638,0,0,0,50.123-22.489,50.123-50.131 C114.161,36.358,91.674,13.871,671,64.032,13.871z M64.038.110.128h-0.004c-25.435,0-46.129-20.694-46.131-46.131 c0-25.434,20.693-46.126,46.129,46.126s46.129,20.693,46.129,46.126C10.161,89.434,89.471,110.128,64.038.110.128"/></g></g> <div>Forma iónica</div> ',</svg> categoría: 'Formas', Contenido: { Contenido: '<ion-list class="list list-md"> <div style="padding-top:10px; addding-right:10px; addding-left: 10px; addding-bottom: 10px"> <ion-item-class="item-block item-md elemento-entrada"> <div class="item-inner"> <div class="input-wrapper"> <ion-label class="label label-md" id="lbl-6">Nombre de usuario</ion-label> <ion-input type="text" class="input input-md" ng-reflect-type="text"> <input class="text-input text-input-md" dir="auto" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-md" type="text" aria-labelledby="lbl-6" autocomplete="off" autocorrect="off" placeholder="ng-reflect-type="text"> </ion-input> </div> </div> <div class="button-effect"></div> </ion-item> </div> <div style="padding-top:10px; addding-right:10px; addding-left: 10px; addding-bottom: 10px"> <ion-item-class="item-block item-md elemento-entrada"> <div class="item-inner"> <div class="input-wrapper"> <ion-label class="label label-md" id="lbl-7">Contraseña</ion-label> <ion-input type="password" class="input input-md" ng-reflect-type="password"> <input class="text-input text-input-md" dir="auto" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-md" type="password" aria-labelledby="lbl-7" autocomplete="off" autocorrect="off" placeholder="ng-reflect-type="password"> </ion-input> </div> </div> <div class="button-effect"></div> </ion-item> </div> ',</ion-list> Tipo: 'Tipo-forma', activeOnRender: 1, clases: ['formLabel'], script: función () {}, estilo: { 'Tap-Top': '10px', 'relleno-derecha': '10px', 'relleno-izquierda': '10px', 'acolchado-bottom': '10px', 'color de fondo': '#ffffff' }, atributos: { título: 'Mi título' } }, Arrastrable: Cierto, Desmontable: Verdadero })
Mi vista personalizada es
comps.addType('form-type', {
model: defaultType.model.extend({
etiquetaNombre: 'ion-item'
}, {
isComponent(el) {
if(el.tagName == 'ion-item')
return {type: 'form-type'}
},
}),
view: defaultType.view.extend({
etiquetaNombre: 'div' //<-- en lienzo se usará div
})
});
Mi captura de pantalla es
! [imagen](https://user-images.githubusercontent.com/33427536/50949048-b2f71f80-14ca-11e9-89f3-4a5419dcbfc8.png)
en la captura de pantalla anterior. puedes ver que no puedo seleccionar la caja de entrada interna ni etiquetar
**Mis expectativas**
1. es necesario seleccionar la casilla de entrada interna para cambiar su tipo y nombre provisional
2. haz que el nombre de la etiqueta interior sea editable
Respuestas (2)
'''js Contenido: { Usa componentes, no contenido componentes: '<ion-list class="list list-md">
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1720
[PREGUNTA] Cómo añadir el botón en rasgos personalizados
Hola, intento añadir un botón a mis rasgos personalizados para mis bloques personalizados pero no funciona bien como esperaba y También hay...
Issue #1724
[PREGUNTA] vincula rasgos personalizados a mis bloques personalizados
Hola, he creado un rasgo y bloques personalizados, pero intento vincular mis bloques en rasgos, no aparece en la opción de configuración Mi...
Issue #1574
Pregunta, bloquear contenido del archivo
Hola, esto no es realmente un problema, sino más bien una pregunta. Actualmente estoy usando bloques personalizados en mi editor GrapesJS....
Issue #1831
[Pregunta] ¿Cómo ejecutar comandos para un componente de bloque?
Me gustaría hacer algo así. Así que, una vez que un usuario deja caer el componente de prueba en el lienzo, me gustaría abrir el modal de 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 →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.