跟踪ckEditor光标当前位置的事件答案

【问题标题】：event to track ckEditor cursor current position跟踪ckEditor光标当前位置的事件
【发布时间】：2018-02-10 14:05:26
【问题描述】：

我想要实现的是在用户选择的文本的基础上更新 Ckediter color button plugin 工具栏下拉/图标 bg 颜色。

CKeditor 字体/字体大小下拉菜单的工作方式相同。（假设用户点击不同大小的字体，相应的大小将反映在字体大小下拉菜单中）

我尝试将 CKEditor 绑定到“Focus”事件。以下是我的代码。

    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 文本区域。

【问题讨论】：

这种情况的最佳事件是selectionChange，顾名思义，每次编辑器内的选择发生变化时都会触发它，因此当您希望代码对选择更改做出反应时，它是一个完美的候选者.

标签： javascript jquery ckeditor ckeditor4.x

【解决方案1】：

终于找到了解决办法。

使用 "contentDom" >> "Click" 和 KeyUp 事件。

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

【讨论】：