Javascript 跟踪编辑器光标当前位置的事件

我试图实现的是根据用户选择的文本更新Ckediter工具栏下拉菜单/图标bg颜色

以同样的方式，CKeditor字体/字体大小下拉菜单也可以工作。 假设用户单击不同大小的字体，相应的大小将反映在字体大小下拉列表中

我已尝试将CKEditor绑定到焦点事件。下面是我的代码

    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);
    }
}

以上代码在第一次单击时起作用。当它获得焦点时

现在我的问题是什么事件应该触发我的代码。我尝试过单击并更改，但没有帮到我

---

仅供参考：我在一个页面上使用多个动态ckeditoer文本区域。

终于找到了解决方法

使用contentDom>>单击并键入事件

 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);
                        });
});

---

对于这种情况，最好的事件是，正如名称所示，每次编辑器中的选择发生更改时都会触发该事件，因此当您希望代码对选择的更改做出反应时，它是一个perfec候选者。