Question

这是专门针对CKEditor的开发人员。

目标是知道光标何时位于自定义属性范围内或外。

使用Ckeditor时，如果从插件中插入如下所示的自定义范围，有时当您停止输入时，请将焦点对准textarea并将您的cusor替换为该行的末尾 - 就好像您正在继续键入已经离开了。文本可以在span内部，也可以在没有封装的情况下。

无焦点前的示例：

    <span style="color:blue;line-height:12px;font-size:10px;font-family:arial;" class="master-span">
<span style="color:red;line-height:20px;font-size:18px;font-family:museo;" class="child-span">Text is here</span>
</span>

在＆＃34;这里＆＃34;结束时重新聚焦并定位cusor在屏幕上并开始输入。

<span style="color:blue;line-height:12px;font-size:10px;font-family:arial;" class="master-span">
<span style="color:red;line-height:20px;font-size:18px;font-family:museo;" class="child-span">Text is here</span> Text is now outside!!!
</span>

我要问的是，我将在哪里定位我的故障排除，以了解光标/锚点何时位于跨度内或外部，即是否在代码中进行了计算以确定此问题？

这种查询的原因是跨度格式化是非常重要的，我们不能在周围的文本区域中使用主跨度，因为这可以由用户改变。我们还发现，由于浏览器无法设置行高，因此确保文本始终位于跨度范围内，使用项目符号很麻烦，这将是一个很大的帮助。

P.S我已经下载了源代码，看看我能在哪里找到它。

非常感谢您的帮助。

Answer 1

单击任何CKeditor实例的文本区域后，我查找了光标的父节点，看它是否是LI节点。这表明光标已落在我的跨度内的子弹点内。我继续找到我能找到的最外面的文本节点，因为我的假设是如果光标在跨度之外，那么用户想要继续从最后一个字符输入。

在我的设置中，在一个范围内可以有多个子跨度，没有数量限制。因此，我必须找到最末端（或接近结尾）有文本节点的最外部跨度。

我通过获取节点列表并反转顺序来查找相反顺序中的第一个文本节点。我创建了一个函数，可以循环查找第一个文本节点时的span和break数。

一旦我有了我的文本节点，我就会设置范围并计算文本的长度，以便将其放在最后。以下是我的最终解决方案，适用于最新的Chrome / FF / IE。

＆＃13;

$("#preview-text-3827").on("click", function(){

            var CKEDITOR   = window.parent.CKEDITOR;
            var ck_instance_name = false;
            for ( var ck_instance in CKEDITOR.instances ){
                if (CKEDITOR.instances[ck_instance].focusManager.hasFocus){
                    ck_instance_name = ck_instance;
                    break;
                }
            }
            var editor = CKEDITOR.instances[ck_instance_name];
            var selection = editor.getSelection();
            var parent_attrs = "";
            if (selection.getType() == CKEDITOR.SELECTION_TEXT) {
                parent_attrs = selection.getStartElement();
                if(parent_attrs.getName() == "li"){

                    var nodeList = parent_attrs.getChildren();
                    console.log( "Now Reverse" );
                    for ( var i = nodeList.count() - 1; i > -1; --i ) {
                        //console.log( nodeList.getItem( i).nodeName );
                        var el = nodeList.getItem( i);
                        if(el.$.nodeName == "#text"){
                            // This is the last text but it's inside the li which is WRONG
                        }
                        if(el.$.nodeName == "SPAN"){
                            // This should be the last span
                            // Jump into this span and find the children.
                            var result = retractLiPosition(el);
                            if(result.text == true){
                                var inner = result.result;
                                var text = inner.$.textContent || inner.$.innerText;
                                var length = text.length;
                                var range = editor.createRange();
                                range.setStart( inner , length); 
                                range.setEnd( inner, length); 
                                editor.getSelection().selectRanges( [ range ] );
                                break;
                            }
                        }
                    }
                }
            }


        });


function retractLiPosition(element){
    var returning = new Object();
    returning.result = element;
    returning.text = false;
    var result = element;
    var nodeList = element.getChildren();
    for ( var i = nodeList.count() - 1; i > -1; --i ) {
        var el = nodeList.getItem( i);
        if(el.$.nodeName == "#text"){
            returning.result = el;
            returning.text = true;
            break;
        }
        if(el.$.nodeName == "SPAN"){
            // This should be the last span
            // Jump into this span and find the children.
            returning = retractLiPosition(el);
        }
    }
    return returning;
}


});

＆＃13;

如何知道Ckeditor锚是否封装在span内？

1 个答案: