Issue #1100💬 RespondidoAbierto el 9 de mayo de 2018por kuldeepcisReacciones 0

No se puede actualizar el valor de los traits en el HTML para un componente personalizado

Respuesta rápidapor artf

Por favor, lleva un registro de tus problemas aquí, estás hablando del mismo caso #1089

Lee la respuesta completa abajo ↓

Pregunta

He creado un componente personalizado para los iconos sociales. Cuando selecciono este componente tengo dos rasgos: configurar la URL de Facebook y mostrar Facebook; al actualizar ambos se actualizan y se reflejan en Canvas, pero cuando exporto no obtengo la URL de Facebook, que se establece mediante los rasgos. A continuación se muestra el código adjunto.

grapesjs.plugins.add('social-icons-component', (editor, opts = {}) => {

Sea c = opts;

Sea defaults = { bloques: 'iconos sociales',

Estilo por defecto defaultStyle: cierto,

Hora de inicio por defecto, por ejemplo, '2018-01-25 00:00' Hora de inicio: '',

Estilo por defecto defaultStyle: cierto,

Hora de inicio por defecto, por ejemplo, '2018-01-25 00:00' Hora de inicio: '',

Mensaje de texto para mostrar cuándo termina la cuenta atrás finTexto: 'CADUCADO',

Tipo de entrada de fecha, por ejemplo, 'fecha', 'cita-hora-local' dataTipoEntrada: 'fecha',

Prefijo de clase de cuenta atrás socialClssfx: 'iconos sociales',

Etiqueta de cuenta atrás etiquetaCuenta atrás: 'Cuenta atrás',

Etiqueta de categoría de cuenta atrás etiquetaCuenta atrásCategoría: 'Extra',

Días de texto de etiqueta usado en el componente labelDays: 'días',

Horas etiquetan el texto utilizado en el componente etiquetaHoras: 'horas',

Texto de etiqueta de actas utilizado en el componente

Fragmento de códigoTEXT
labelMinutes: 'minutos',

Los segundos etiquetan el texto usado en el componente
labelSeconds: 'segundos',

};

Valores predeterminados de carga
  para (dejemos nombre en los valores predeterminados) {
    si (!( nombre en c))
      c[name] = defaults[name];
  }

Añadir componentes
 loadComponents (editor, c);

// Añadir componentes
	loadBlocks(editor, c);

const domc = editor. DomComponents;
  const defaultType = domc.getType('default');
  const textType = domc.getType('text');
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  const textModel = textType.model;
  const textView = textType.view;
  const sfx = c.socialClssfx;

domc.addType('social-icons', {

model: defaultModel.extend({
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        Droppable: falso,
         rasgos: [{
            
etiqueta: 'Facebook URL',
            Nombre: "facebook_url",
             cambioProp: 1,
             valor:"dasdsdasd",

},
        {
            Tipo: "casilla de verificación",
            etiqueta: 'Facebook',
            Nombre: "facebook_show",
            cambioProp: 1,
            valor: 1,
           
},
        
],
        script: function() {

}
      }),
    }, {
      isComponent(el) {

if(el.getAttribute &&
          el.getAttribute('data-gjs-type') == 'social-icons') {
          return {
            Tipo: 'Iconos sociales'
          };
        }
      },
    }),

view: defaultView.extend({
      init: function() {

this.listenTo(this.model, 'change:facebook_url change:facebook_show', this.updateSrc);

const comps = this.model.get('components');
	
Añade una plantilla básica de cuenta atrás si aún no está inicializada
        if (!comps.length) {
          comps.reset();
          comps.add('
            <div data-js="social-icons" >
              <div data-js="social-facebook-div" class="${sfx}-block">
                <a data-js="social-facebook" href="" target="_blank" style="border: none;text-decoration: none;"class="facebook">
                    <img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/facebook.png" borde="0"><!---->
                </a>
              </div>
              <div class="${sfx}-block">
                <a data-js="social-twitter" href="" target="_blank" style="border: none;text-decoration: none;"class="twitter">
                    <img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/twitter.png" borde="0"><!---->
                </a>
              </div>
              <div class="${sfx}-block">
                <a data-js="social-linkedin" href="" target="_blank" style="border: none;text-decoration: none;"class="linkedin">
                    <img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/linkedin.png" borde="0"><!---->
                </a>
              </div>
               <div class="${sfx}-block">
                <a data-js="social-youtube" href="" target="_blank" style="border: none;text-decoration: none;"class="youtube">
                    <img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/youtube.png" borde="0"><!---->
                </a>
              </div>
            </div>
          `);
        }

},
       updateSrc: función updateSrc() {
         
var facebookUrl = this.model.querySelector('[data-js=social-facebook]');
         // var facebookDiv = this.model.querySelector('[data-js=social-facebook-div]');
        
var facebookUrl = this.el.querySelector('[data-js=social-facebook]');
         var facebookDiv = this.el.querySelector('[data-js=social-facebook-div]');

console.log(este);
          var facebook_url = this.model.get('facebook_url');
          var facebook_check = this.model.get('facebook_show');
          
if(facebook_check){
              facebookDiv.style.display = '';
             facebookUrl.href = facebook_url;
            }else{
              facebookDiv.style.display = 'ninguno';
             facebookUrl.href = facebook_url;
            }
        },
    }),

});
  estilo const = c.defaultStyle ? '<style>
    .${sfx} {
      text-align: center;
      familia tipográfica: Helvetica, serif;
    }
    .${sfx}-block {
      pantalla: bloque en línea;
      Margen: 0 10px;
      relleno: 10px;
    }
    .${sfx}-digit {
      tamaño de fuente: 5rem;
    }
    .${sfx}-endtext {
      tamaño de fuente: 5rem;
    }
    .${sfx}-cont,
    .${sfx}-block {
      pantalla: bloque en línea;
    }
  ' :</style> '';

var bm = editor. Jefe de bloque;
      bm.add('social-icons', {
      etiqueta: 'Cita de prueba',
      categoría: 'Extra',
     
Contenido: {
          Contenido: '
          
${estilo}
          `,
          Editable: !1,
          Droppable: !0,
          'tipo':'iconos sociales',
          estilo: {
              "ancho" : "100%",
              "text-align": "center",
              
}
        },
      atributos: {clase:'fa fa-quote-right'}
      });

});

Respuestas (2)

artf10 de mayo de 2018

Por favor, lleva un registro de tus problemas aquí, estás hablando del mismo caso #1089

lock[bot]17 de septiembre de 2019

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.