Los elementos hijos no se pueden arrastrar, se pueden soltar y se pueden resaltar. también el CSS de todos los elementos hijos que no se insertan en la sección de estilo mientras se desarrolla un componente banner en un plugin

Clase por defecto para usar en el Banner
    Subtítulo: 'zslbanner__subheading',

Clase por defecto para usar en el Banner
    claseLink: 'zslbanner__link',

Estilo predeterminado para las pestañas
    style: (config) => '
        .${config.classBannerContainer} {
        familia tipográfica: 'Montserrat', Arial, sans-serif;
        Color de fondo: #c9efff;
        Repetición de fondo: sin repetición;
        Posición de antecedentes: Centro central;
        Tamaño de fondo: Portada;
        posición: relativa;
        acolchado: 80px 20px;
        radio de frontera:0;
        pantalla: flex;
        alinear-ítems: centro;
        justificar-contenido: centro;
        dirección flexible: columna;
        Altura mínima: 370px;
      }
      .${config.classHeading} {
        Peso de fuente: 700;
        color: #333;
        tamaño de fuente: 40px;
        marje:0;
        margen inferior: 16px;
        text-align: center;
        altura de línea: 1,2;
      }
      .${config.classSubHeading} {
        tamaño de fuente: 26px;
        text-align: center;
        marje:0;
        margen inferior: 16px;
        Peso de fuente: 500;
        color: #333;
      }
      .${config.classLink} {
        pantalla: bloqueo;
        acolchado: 10px 20px;
        Antecedentes: ninguno;
        Margen: 20px 5px 5px 0 5px;
        tamaño de fuente: 14px;
        color: #fff !importante;
        Color de fondo: #005A9E;
        transición: todos los 0.2 se acomodan con facilidad;
        Radio de frontera: 4px;
        Peso de fuente: 500;
        frontera: ¡ninguna importante!
        text-align: center;
        Ancho mínimo: 160px;
        Espaciado entre letras: 1px;
      }
      .${config.classLink}:hover {
        Color de fondo: #037ede;  
       }
 `
}
! [imagen](https://user-images.githubusercontent.com/17553816/122001932-b6471180-cdce-11eb-822f-f81f75af60ef.png)

! [imagen](https://user-images.githubusercontent.com/17553816/122001962-c3640080-cdce-11eb-877a-56108e2adbba.png)

! [imagen](https://user-images.githubusercontent.com/17553816/122001992-cfe85900-cdce-11eb-8b1b-6c3fe60ee60f.png)

**Subheading.js**
rol de const export = 'Subtítulo';

Export default (DC, config) => {

dc.addType(config.typeBannerSubHeading, {
        modelo: {
            isComponent: function(t) {
                return ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'p'].indexOf(t.tagName) >= 0
            },
            Predeterminados: {
                nombre: 'Subtítulo',
                Arrastrable: Cierto,
                Copiable: Cierto,
                removible: cierto,
                Resaltable: Cierto,
                Editable: Cierto,
                atributos: { rol },
                clases: config.classSubHeading,
                etiquetaNombre: 'h3',
                contenido: 'Subtítulo',
                Rasgos: [
                    'id',
                    'título',
                    {
                        tipo: "select",
                        Opciones: [{
                            valor: "h1",
                            nombre: "Rumbo 1"
                        }, {
                            valor: "h2",
                            nombre: "Rumbo 2"
                        }, {
                            valor: "h3",
                            nombre: "Rumbo 3"
                        }, {
                            valor: "h4",
                            nombre: "Rumbo 4"
                        }, {
                            valor: "h5",
                            nombre: "Rumbo 5"
                        }, {
                            valor: "h6",
                            nombre: "Rumbo 6"
                        }, {
                            valor: "p",
                            nombre: "Paragraph"
                        }],
                        etiqueta: "Encabezado o párrafo",
                        nombre: "tagName",
                        cambioprop: 1
                    }
                ],
                ... config.bannerSubHeadingProps
            },
        },
        Vista: {
            eventos: {
                dblclick: 'onActive',
                Focusout: 'onDisable',
            },
            onActive() {
                this.el.contentEditable = true;
            },
            onDisable() {
                const { el, model } = this;
                el.contentEditable = false;
                model.set('content', el.innerHTML)
            },
        }
    });
}
! [imagen](https://user-images.githubusercontent.com/17553816/122002066-e55d8300-cdce-11eb-8216-e91659cfaaad.png)

! [imagen](https://user-images.githubusercontent.com/17553816/122002133-fad2ad00-cdce-11eb-9aab-d3f02d37c78b.png)

**Heading.js**

export const role = 'Encabezado';

Export default (DC, config) => {

dc.addType(config.typeBannerHeading, {
        modelo: {
            isComponent: function(t) {
                return ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'p'].indexOf(t.tagName) >= 0
            },
            Predeterminados: {
                nombre: 'Heading',
                Arrastrable: Cierto,
                Copiable: Cierto,
                removible: cierto,
                Resaltable: Cierto,
                Editable: Cierto,
                atributos: { rol },
                clases: config.classHeading,
                etiquetaNombre: 'h2',
                componentes: 'Rumbo de dirección',
                Rasgos: [
                    'id',
                    'título',
                    {
                        tipo: "select",
                        Opciones: [{
                            valor: "h1",
                            nombre: "Rumbo 1"
                        }, {
                            valor: "h2",
                            nombre: "Rumbo 2"
                        }, {
                            valor: "h3",
                            nombre: "Rumbo 3"
                        }, {
                            valor: "h4",
                            nombre: "Rumbo 4"
                        }, {
                            valor: "h5",
                            nombre: "Rumbo 5"
                        }, {
                            valor: "h6",
                            nombre: "Rumbo 6"
                        }, {
                            valor: "p",
                            nombre: "Paragraph"
                        }],
                        etiqueta: "Encabezado o párrafo",
                        nombre: "tagName",
                        cambioprop: 1
                    }
                ],
                ... config.bannerHeadingProps
            },
        },
        Vista: {
            eventos: {
                dblclick: 'onActive',
                Focusout: 'onDisable',
            },
            onActive() {
                this.el.contentEditable = true;
            },
            onDisable() {
                const { el, model } = this;
                el.contentEditable = false;
                model.set('content', el.innerHTML)
            },
        }
    });
}

**Button.js**
Export default (DC, config) => {

dc.addType(config.typeBannerButton, {
        modelo: {
            extiende: 'enlace',
            Predeterminados: {
                Editable: Cierto,
                nombre: 'Button',
                Arrastrable: Cierto,
                Copiable: Cierto,
                removible: cierto,
                Resaltable: Cierto,
                atributos: {
                    HFF: '#'
                },
                clases: config.classLink,
                contenido: 'Empezar',
                etiquetaNombre: 'a',
                Rasgos: [
                    'id',
                    'título',
                    'href',
                    'objetivo',
                ],
                ... config.bannerButtonProps
            },
        },
        Vista: {
            eventos: {
                dblclick: 'onActive',
                Focusout: 'onDisable',
            },
            onActive() {
                this.el.contentEditable = true;
            },
            onDisable() {
                const { el, model } = this;
                el.contentEditable = false;
                model.set('content', el.innerHTML)
            },
        }
    });
}

**BannerCreate.js**
Export default (DC, {
    typeBanner,
    typeBannerHeading,
    typeBannerSubHeading,
    typeBannerButton,
    estilo,
    ... Configuración
}) => {
    const type = config.typeBanner;
    dc.addType(type, {
        modelo: {
            Predeterminados: {
                nombre: 'Banner',
                clases: config.classBannerContainer,
                Componentes: [
                    { tipo: tipoEncabezadoBanner },
                    { tipo: tipoSubencabezadoBanner },
                    { tipo: tipoBannerButton },
                    style && '<style>${style(config)}</style>'
                ],
                ... config.bannerCreateProps
            },
        },
    });
}

Por favor, ayudadme.