javascript - CKEDITOR 编辑链接后跳到顶部

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

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

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

保存书签

如果精确的插入符号位置对您来说至关重要，那么您可以在修改 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文档。