Issue #1804💬 RespondidoAbierto el 18 de febrero de 2019por AkibDeraiya123Reacciones 0

Aplicar dos rasgos diferentes en la misma etiqueta html pero aplicar solo uno

Respuesta rápidapor artf

¿El código HTML ya está cargado en Canvas? ¿Has intentado ejecutar tu definición de componente personalizada mediante un plugin? Si no, intentas ver cambios en componentes ya cargados

Lee la respuesta completa abajo ↓

Pregunta

Hola @artf,

Si necesitamos inicializar dos rasgos en la misma etiqueta HTML, ¿entonces es posible o no? En realidad defino dos rasgos diferentes en la misma etiqueta ('en el enlace/una etiqueta').

Permíteme describirte brevemente. Supongamos que tengo un grupo de enlaces que contiene clase es como 'no-arrastrar y soltar'.

Así que su código HTML es como

<ul>
    <li>
        <a class="not-drag-drop" href="index.html">Home 1</a>
    </li>
    <li>
        <a class="not-drag-drop" href="index2.html">Home 2</a>
    </li>
    <li>
        <a class="not-drag-drop" href="index3.html">Home 3</a>
    </li>
</ul>

Así que para la clase 'no-arrastrar-soltar' de arriba quiero añadir un rasgo como,

var domComponents = editor. DomComponents
    var defaultType = domComponents.getType('default')
    var dModel = defaultType.model;
    var dView = defaultType.view;
    
domComponents.addType('not-drag-drop', {
      model: dModel.extend(
        {
          valores predeterminados: Object.assign(
            {},
            dModel.prototype.defaults,
            {
              Badgable: falso,
              copiable: falso,
              arrastrable: falso,
              Droppable: falso,
              resaltable: falso,
              Hoverable: falso,
              móvil: falso,
              removible: falso,
              Estilizado: falso,
              propagar: ['badgable', 'droppable', 'resaltable']
            }
          )
        },
        {
          isComponent: function(el) {
            si (el.classList && el.classList.contains('not-drag-drop')) {
              return {type: 'no-drag-drop'};
            }
          },
        }
      ),
      vista: dVista,
    });

Y para todos los enlaces quiero que se mencionen rasgos más, como,

var dType = editor. DomComponents.getType('link');
var dModel = dType.model;
var dView = dType.view;

editor. DomComponents.addType('link', {
        model: dModel.extend({
          defaults: Object.assign({}, dModel.prototype.defaults, {
            Rasgos: [
              Las cadenas se convierten automáticamente en tipos de texto
              título,
              {
                tipo: 'select',
                etiqueta: 'Target',
                Nombre: 'Objetivo',
                Opciones: [
                  { valor: '', nombre: 'Esta ventana' },
                  { valor: '_blank', nombre: 'Nueva ventana' }
                ]
              },
              {
                tipo: 'select',
                etiqueta: 'Href',
                Nombre: 'Href',
                Opciones: OPS
              }
            ],
          }),
        }, {
          isComponent: function(el) {
            if(el.tagName == 'A'){
              return {type: 'link'};
            }
          },
        }),
    
vista: dVista,
      });

Pero cuando hago clic en el enlace que contiene la clase 'no-arrastrar-soltar', solo se aplican los rasgos 'no-arrastrar-soltar', no aplica el rasgo 'enlace'. Así que, cuando voy a cambiar el 'href' de este enlace, no me aparece el desplegable de enlaces solo mostrando el cuadro de entrada.

¿Podríais ayudarme, por favor, cómo puedo resolver este problema?

Respuestas (3)

artf21 de febrero de 2019

¿El código HTML ya está cargado en Canvas? ¿Has intentado ejecutar tu definición de componente personalizada mediante un plugin? Si no, intentas ver cambios en componentes ya cargados

no-response[bot]3 de marzo de 2019

Este asunto se ha cerrado automáticamente porque no ha recibido respuesta a nuestra solicitud de más información por parte del autor original. Con solo la información que actualmente hay en el asunto, no tenemos suficiente información para actuar. Por favor, contacta con nosotros si tienes o encuentras las respuestas que necesitamos para que podamos investigar más a fondo.

lock[bot]10 de marzo 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 →

Explorar categorías de plugins

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