Crear configuraciones de componentes seleccionadas personalizadas

Hay una opción en el panel para cambiar la configuración del componente (para enlaces, hay una opción de no cambiar enlace - HREF - y destino, para textos, id y título y para imágenes, atributo alt). Me gustaría saber cómo puedo crear esas entradas y cómo puedo cambiar estas atracción en un componente seleccionado. He creado una vista de panel para usarla como CKEditor y cambiar los componentes de texto cuando se selecciona y me gustaría que estos ajustes de nutria estuvieran en la misma vista:

editor. Panels.addButton('views',{ // 'views' es el id del panel
    id: 'editorCK',
    claseNombre: 'fa fa-pencil',
    comando: 'editorCK',
});
editor. Commands.add('editorCK', {
    run: function(editor, sender){
        const bm = editor. Jefe de bloque;
        const pn = editor. Paneles;
        var blocoSelecionado = editor.getSelected();
        if(this.mkeditorCustom){
            $(this.mkeditorCustom).remove();
        }
        if (blocoSelecionado && blocoSelecionado.attributes.type == "text"){
            bm.render();
            id de const = 'contenedor de vistas';
            const mkeditorCustom = document.createElement('div');
            const panels = pn.getPanel(id) || pn.addPanel({ id });
            const textarea = document.createElement('textarea');
            textarea.id = "ckeditor";
            mkeditorCustom.appendChild(área de texto);
            panels.set('appendContent', mkeditorCustom).trigger('change:appendContent');
            this.mkeditorCustom = mkeditorCustom;
            $('#ckeditor').html(blocoSelecionado.toHTML().replace(/ <div class="c.*?>(.*?)<\/div>/, '$1')); if(CKEDITOR.instances.ckeditor) CKEDITOR.instances.ckeditor.destroy(); if(!CKEDITOR.instances.ckeditor) CKEDITOR.replace(', opcoesCKEDITOR); CKEDITOR.instances['\ckeditor'].on('change', function() { blocoSelecionado.set('content', CKEDITOR.instances['ckeditor'].getData().replace(/<div class="c.*?>(.*?)<\/div>/, '$1'));
            });
        }else{
            bm.render();
            id de const = 'contenedor de vistas';
            const mkeditorCustom = document.createElement('div');
            const panels = pn.getPanel(id) || pn.addPanel({ id });
            const conteudo = document.createElement('div');
            conteudo.className = 'gjs-sm-header';
            const texto = document.createTextNode('Seleccione um bloco de texto para usar o editor de texto');
            conteudo.appendChild(texto);
            mkeditorCustom.appendChild(conteudo);
            panels.set('appendContent', mkeditorCustom).trigger('change:appendContent');
            this.mkeditorCustom = mkeditorCustom;
        }
        this.mkeditorCustom.style.display = 'bloque';
    },
    stop: function(editor, sender){
        if(CKEDITOR.instances['ckeditor']) CKEDITOR.instances['ckeditor'].destroy();
        const mkeditorCustom = this.mkeditorCustom;
        mkeditorCustom & & (mkeditorCustom.style.display = 'ninguno');
    }
});

Otra cosa que intento crear es que en esta misma Vista de Panel hay una entrada (cuando no se selecciona ningún componente) que cambia el ancho máximo del HTML generado y otra para cambiar el color del fondo