Question

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

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

我试图在“Focus”事件上绑定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文本区域。

Answer 1

终于找到了解决它的方法。

使用“contentDom”＆gt;＆gt; “点击”＆amp; 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);
                        });
});

事件跟踪ckEditor光标当前位置

1 个答案: