Create custom selected component settings

There is a option in panel to change setting of component (For links, there is an option no change link - HREF - and target, for texts, id and title and for images, alt attribute). I would like to know how can I create that inputs and how can I change this attrs in selected component? I created a Panel's view to use as CKEditor to change text components when selected and I would like that these otter settings be at the same view:

editor.Panels.addButton('views',{ // `views` is the panel's id
    id: 'editorCK',
    className: 'fa fa-pencil',
    command: 'editorCK',
});
editor.Commands.add('editorCK', {
    run: function(editor, sender){
        const bm = editor.BlockManager;
        const pn = editor.Panels;
        var blocoSelecionado = editor.getSelected();
        if(this.mkeditorCustom){
            $(this.mkeditorCustom).remove();
        }
        if (blocoSelecionado && blocoSelecionado.attributes.type == "text"){
            bm.render();
            const id = 'views-container';
            const mkeditorCustom = document.createElement('div');
            const panels = pn.getPanel(id) || pn.addPanel({ id });
            const textarea = document.createElement('textarea');
            textarea.id = "ckeditor";
            mkeditorCustom.appendChild(textarea);
            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('ckeditor', opcoesCKEDITOR);
            CKEDITOR.instances['ckeditor'].on('change', function() {
                blocoSelecionado.set('content', CKEDITOR.instances['ckeditor'].getData().replace(/<div class="c.*?>(.*?)<\/div>/, '$1'));
            });
        }else{
            bm.render();
            const id = 'views-container';
            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('Selecione 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 = 'block';
    },
    stop: function(editor, sender){
        if(CKEDITOR.instances['ckeditor']) CKEDITOR.instances['ckeditor'].destroy();
        const mkeditorCustom = this.mkeditorCustom;
        mkeditorCustom && (mkeditorCustom.style.display = 'none');
    }
});

Other thing I'm trying to is create at this same Panel View is an input (when isn't any component selected) that change max width of html generated and another to change background's color