Updating custom toolbar to display colour of 'selected' content.

[Joel]

Hello,

I'm trying to work out the best way of updating my toolbar to style the colour picker with the colour of the current selection. I noticed that it works in the main example, but I can't for the life of me work out how.

Ideally, I'd like an event so I can update the toolbar with the selected font size and colour.

Has anyone achieved this already, and if so, how?

Thanks

Joel

[Joel]

I managed to figure this out by delving into the source a bit more (though I'm on an older version than latest).

Here's how I did it;

// Set up an event watcher on any interaction so we can update the colour
editor.on('interaction', function(){
    var color = getEditorColor();
    // Set your toolbar colour here
});

getEditorColor: function(){
        var el = editor.composer.commands.state("foreColorStyle");
        // If it found elements, we want the first one
        if ( el ) {
            el = el[0];
        }
        // Couldn't find a forColorStyle
        else {
            return false;
        }

        // Get the styles using getComputedStyle
        var styles = window.getComputedStyle(el);

        return styles.color; // rgb(200,0,0)
}

I'm also going to implement this for font size too