Question

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

我一直在寻找类似的问题，但没有找到任何结果。有人知道这方面的解决方案吗？

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

编辑2：忘记添加我的代码：的 plugin.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');
                }
            }
        });
    }
});

对话框/ previewLink.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);
        }
    };
});

Answer 1

出现此问题的原因是，通过setText调用，您将删除保留选择的节点。作为后备，IE会将选择移动到开头，导致编辑器滚动。

你有几个选择。

选择已编辑的链接

在对话框提交功能中，确保将选择放在要选择的元素上。你可以用一行来完成它。

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

请注意，尽管您有初始插入位置，但始终会更改它以选择整个链接。不过，这是我推荐的解决方案，因为它很简单。

存储书签

如果精确的插入位置对您来说是一个关键因素，那么您可以使用书签来存储＆＃34;快照＆＃34;修改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 ] );
        }
    }
}

如果您需要更多信息，请参阅range和selection文档。

Answer 2

要解决这个问题，我建议您在调用导致问题的函数后尝试设置光标的位置？

// 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

编辑链接后，CKEDITOR跳转到顶部

2 个答案:

选择已编辑的链接

存储书签