Issue #1722💬 RespondidoAbierto el 10 de enero de 2019por Ramkumar-MurugesanReacciones 0

¿Cómo hacer que mi etiqueta personalizada sea seleccionable y editable dentro de Canvas?

Respuesta rápidapor artf

'''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)

artf14 de enero de 2019

'''js Contenido: { Usa componentes, no contenido componentes: '<ion-list class="list list-md">

lock[bot]15 de enero de 2020

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.

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 →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

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