CKEDITOR在编辑链接后跳到顶部

CKEDITOR jumps to top after editing a link

本文关键字:顶部 链接 编辑 CKEDITOR      更新时间:2023-09-26

如果我在 CKEDITOR-textarea 中编辑链接,光标总是跳到顶部,在内容的第一个字母之前。此问题仅出现在IE中,但仅出现在我的页面上。如果我去 CKEDITOR-demopage,它会按要求工作。

我一直在寻找类似的问题,但没有找到任何东西。有人知道解决方案吗?

编辑:我发现了问题:我有一个自定义插件来更改我的链接,这个插件使用element.setValue()来替换链接的值,这个函数跳转到顶部。我也尝试过setHtml()和setText(),但这是同样的问题。

编辑2:忘记添加我的代码:插件.js

CKEDITOR.plugins.add('previewLink', {
    icons: 'previewLink',
    init: function(editor){
        editor.addCommand('previewLinkDialog', new CKEDITOR.dialogCommand('previewLinkDialog'));
        editor.ui.addButton('previewLink', {
            label: 'Preview Link einfügen',
            command: 'previewLinkDialog',
            toolbar: 'insert'
        });
        CKEDITOR.dialog.add('previewLinkDialog', this.path + 'dialogs/previewLink.js');
        editor.on('doubleclick', function(evt){
            var element = evt.data.element;
            if(!element.isReadOnly()){
                if(element.is('a')){
                    editor.openDialog('previewLinkDialog');
                }
            }
        });
    }
});

对话框/预览链接.js

CKEDITOR.dialog.add('previewLinkDialog', function(editor){
    return {
        title: 'Preview Link einfügen',
        minWidth: 400,
        minHeight: 200,
        contents: [
            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                    {
                        type: 'text',
                        id: 'text',
                        label: 'Text',
                        validate: CKEDITOR.dialog.validate.notEmpty("Bitte füllen Sie das Text-Feld aus"),
                        setup: function(element){
                            this.setValue(element.getText());
                        },
                        commit: function(element){
                            // The problem happens here
                            element.setText(this.getValue());
                        }
                    },
                    {
                        type: 'text',
                        id: 'link',
                        label: 'Link',
                        validate: CKEDITOR.dialog.validate.notEmpty("Bitte füllen Sie das Link-Feld aus"),
                        setup: function(element){
                            //this.setValue(element.getAttribute('data-cke-pa-onclick'));
                            this.setValue(element.getAttribute('data-cke-saved-href'));
                        },
                        commit: function(element){
                            //element.setAttribute('data-cke-pa-onclick', this.getValue());
                            element.setAttribute('data-cke-saved-href', this.getValue());
                        }
                    },
                    {
                        type : 'checkbox',
                        id : 'popup',
                        label : 'In Popup öffnen',
                        'default' : 'checked',
                        onclickString: "openPopUp(this.href, '', iScreen.windowWidth, iScreen.windowHeight, 0, 0, 0, 1, 1, 0, 0, 0, 0); return false;",
                        setup: function(element){
                            this.setValue(element.getAttribute('data-cke-pa-onclick') == this.onclickString);
                        },
                        commit: function(element){
                            if(this.getValue() === true){
                                var onclick = this.onclickString;
                                element.setAttribute('data-cke-pa-onclick', this.onclickString);
                            }
                            else {
                                element.removeAttribute('data-cke-pa-onclick');
                            }
                        }
                    }
                ]
            }
        ],
        onShow: function() {
            var selection = editor.getSelection(),
                element = selection.getStartElement();
            if (element)
                element = element.getAscendant('a', true);
            if (!element || element.getName() != 'a' || element.data('cke-realelement')){
                element = editor.document.createElement('a');
                this.insertMode = true;
            }
            else
                this.insertMode = false;
            this.element = element;
            if (!this.insertMode)
                this.setupContent( this.element );
        },
        onOk: function() {
            var dialog = this,
                link = this.element;
            this.commitContent(link);
            if (this.insertMode)
                editor.insertElement(link);
        }
    };
});

此问题的原因是,使用 setText 调用时,您正在删除保留选择的节点。作为回退,IE会将选择移动到开头,从而导致编辑器滚动。

您在这里有几个选择。

选择编辑的链接

在对话框提交函数中,确保将所选内容放置在要选择的元素上。你可以用一行来做到这一点。

commit: function(element){
    // The problem happens here
    element.setText(this.getValue());
    editor.getSelection().selectElement( element );
}

请注意,尽管您最初放置了插入符号位置,但它将始终更改为选择整个链接。尽管如此,这是我推荐的解决方案,因为它很简单。

存储书签

如果精确的插入符号位置对您来说是一个关键因素,那么您可以在修改 DOM 之前使用书签来存储所选内容的"快照",以便稍后恢复它。

在这种特殊情况下,您需要使用bookmark2 API(标准书签将被 DOM 操作删除)。

commit: function(element){
    // The problem happens here.
    var sel = editor.getSelection(),
        // Create a bookmark of selection before node modification.
        bookmark = sel.getRanges().createBookmarks2( false ),
        rng;
    // Update element inner text.
    element.setText(this.getValue());
    try {
        // Attempt to restore the bookmark.
        sel.selectBookmarks( bookmark );
    } catch ( e ) {
        // It might fail in case when we had sth like: "<a>foo bar ^baz<a>" and the new node text is shorter than the former
        // caret offset, it will throw IndexSizeError in this case. If so we want to
        // manually put it at the end of the string.
        if ( e.name == 'IndexSizeError' ) {
            rng = editor.createRange();
            rng.setStartAt( element, CKEDITOR.POSITION_BEFORE_END );
            rng.setEndAt( element, CKEDITOR.POSITION_BEFORE_END );
            sel.selectRanges( [ rng ] );
        }
    }
}

如果需要更多信息,请参阅rangeselection文档。

为了解决这个问题,我建议你可以在调用导致问题的函数后尝试设置光标的位置?

// do before your custom action
var ranges = editor.getSelection().getRanges(); 
// .............your code ................
// after your custom page
ranges[0].setStart(element.getFirst(), 0);
ranges[0].setEnd(element.getFirst(), 0); //cursor

参考:http://ckeditor.com/forums/CKEditor/Any-way-to-getset-cursorcaret-location