event to track ckEditor cursor current position

Question

What I am trying to achieve is that update Ckediter color button plugin toolbar drop-down/Icon bg color on the base of the text selected by the user.

In the same manner how CKeditor Font / Font Size dropdown works. (Let say if user click on different size font, respective size will be reflected in Font size drop down)

I have tried to bind the CKEditor on "Focus" event. and following is my code.

    CKEDITOR.instances['inline' + DivID].setData(htmlstring);

CKEDITOR.instances['inline' + DivID].on('focus', function () {

 var CurrLayoutID = $(this)[0].name.replace('inline', '');

setTimeout(function () {
                var ckEditRangef = CKEDITOR.instances['inline' + CurrLayoutID].getSelection().getRanges()[0];
                    if (ckEditRangef != undefined) {
                            loopcoutForP = 0;
                            setSelectedColorToToolBar(ckEditRangef);
                            }
                     }, 400);
       });

var loopcoutForP = 0;
function setSelectedColorToToolBar(ckEditRangef)
{
    var ParentNodeItem;

    if (loopcoutForP == 0) {
        ParentNodeItem = ckEditRangef.startContainer.$.parentNode;
        // Set to black / Default if first time called. 
        $('.cke_button__textcolor_icon').attr('style', 'background-color: #000 !important');
    }
    else
    {
        ParentNodeItem = ckEditRangef.parentNode;
    }

    if ($(ParentNodeItem).is('p') == true) {
        // first elemetn 
        return true;
    }
    else
    {
        loopcoutForP++;
        var currentStyle = $(ParentNodeItem).attr('style');

        if (currentStyle != undefined) {
            if ((currentStyle).indexOf('color') != -1) {
                // Has Color 
                var color = currentStyle.replace('color:','');
                $('.cke_button__textcolor_icon').attr('style', 'background-color: ' + color + ' !important');
                return true;
            }
        }

        setSelectedColorToToolBar(ParentNodeItem);
    }
}

Above code works when clicked for the first time. as it gets focus.

Now my Question is on what event I am supposed to trigger my code. I have tried with "Click" and "Change" but didn't help me out

FYI: I am using multiple and dynamic ckeditoer text area on a page.

Answer 1

Finally Found a way around it.

using "contentDom" >> "Click" & KeyUp event.

 CKEDITOR.instances['inline' + layoutItemID + CurrLayoutID].on('contentDom', function () {
                        var CurrLayoutID = $(this)[0].name.replace('inline', '');

                        $('#inline' + CurrLayoutID + AppendInID + '').on('click , keyup', function (e) {

                            setTimeout(function () {
                                var ckEditRangef = CKEDITOR.instances['inline' + CurrLayoutID ].getSelection().getRanges()[0];

                                if (ckEditRangef != undefined) {
                                    loopcoutForP = 0;
                                    setSelectedColorToToolBar(ckEditRangef);
                                }
                            }, 400);
                        });
});