Crear rasgo como el rasgo de vídeo

El componente de vídeo es una gran demostración en sí mismo. Se puede encontrar en 'grapesjs repo root > src > dom_components > model > ComponentVideo.js'. Aquí tienes un ejemplo de código con el mínimo imprescindible: '''es6

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

domComps.addType('testBlock', { model: dModel.extend({ init() { const traits = [this.getProvidersTrait(), this.getOption1Trait()]; this.set ('rasgos', rasgos); this.listenTo(this, 'change:provider', this.updateTraits); }, updateTraits() { var prov = this.get('provider'); Rasgos var = []; Switch (prov) { caso 'TraitOption1': rasgos = [este.TrechoDeProveedor(), esto.ObténTratoOpción1)]; pausa; caso 'Opción2': rasgos = [esto.TratoProveedorT(), esto.TratoOpción2Obtener()]; pausa; Por defecto: pausa; } this.loadTraits(traits); this.em.trigger('component:toggled'); }, getProviderTrait() { return { tipo: 'select', etiqueta: 'Proveedor', Nombre: 'Proveedor', cambioProp: 1, Opciones: [ { valor: 'traitOption1', nombre: 'traitOption1' }, { valor: 'traitOption2', nombre: 'traitOption2' } ] } }, getOption1Trait() { return { Tipo: 'texto', etiqueta: 'Option1', Nombre: 'Option1', cambioProp: 1, } }, getOption2Trait() { return { Tipo: 'texto', etiqueta: 'Opción2', Nombre: 'Option2', cambioProp: 1, } } }, { isComponent: function(el) { if(el.tagName == 'DIV'){ return {type: 'testBlock'}; } }, }),

vista: dVista, });

Puedes probar esto añadiendo un div sencillo al Gestor de Bloques
'''es6
      editor. BlockManager.add('testBlock', {
        etiqueta: 'Bloque',
        tipo: 'testBlock',
        contenido: '<div>Test block</div>'
      });

Las partes importantes son 'this.listenTo(this, 'change:provider', this.updateTraits);' en la función type init() para escuchar cambios en el rasgo principal y asegurarse de que changeProp esté configurado en 1 en los rasgos, de lo contrario change:provider no detectará las actualizaciones.

Vale, muchas gracias, lo entiendo