Issue #408Opened October 12, 2017by dong-dev1 reactions

How to update toolbar of component?

Question

Code SnippetTEXT
![image](https://user-images.githubusercontent.com/21217537/31474879-b2d70e2a-af27-11e7-99a1-c5a982683495.png)
Hi Artf, i was added new command to editable component, update style work well  but i don't know how to update this toolbar after component updated (update align icon for example), do you have any suggetion?
`        defaultCommands['testCommand'] = {   

                run(ed) {   
                    var sel = ed.getSelected();  
                    var styles = sel.get('style');  
                    var tbs = sel.get('toolbar');  
                    var tmpTbs = [];  
                    var tmpStyles = {};  
                    tbs.map((tb) => {  
                        if (tb['command'] == 'testCommand') {  
                            switch (styles['text-align']) {  
                                case 'center':  
                                    tb['attributes'] = { class: 'fa fa-align-right' };  
                                    tmpStyles['text-align'] = "right";  
                                    break;  
                                case 'left':  
                                    tb['attributes'] = { class: 'fa fa-align-center' };  
                                    tmpStyles['text-align'] = "center";  
                                    break;  
                                case 'right':  
                                    tb['attributes'] = { class: 'fa fa-align-left' };  
                                    tmpStyles['text-align'] = "left";  
                                    break;  
                                default:  
                                    tb['attributes'] = { class: 'fa fa-align-center' };  
                                    tmpStyles['text-align'] = "center";  
                                    break;  
                            }  
                        }  
                        tmpTbs.push(tb);  
                    })  
                    sel.set({  
                        'style': tmpStyles,  
                        'toolbar': tmpTbs  
                    });   
                }  
            };`

Answers (2)

artfOctober 12, 20171 reactions

You can set a listener on component update

editor.on('component:update', () => {
     editor.runCommand('testCommand');
})

Be aware that with var styles = sel.get('style') you get the style of the component and not what is selected in Style Manager (if the component has classes, the css rule will be selected)

lock[bot]September 18, 20190 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.