CKEDITOR在编辑链接后跳到顶部
CKEDITOR jumps to top after editing a link
如果我在 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 ] );
}
}
}
如果需要更多信息,请参阅range
和selection
文档。
为了解决这个问题,我建议你可以在调用导致问题的函数后尝试设置光标的位置?
// 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
- 阻止在单击链接后转到页面顶部
- 如何使用嵌套的 React 组件从“链接页面”的顶部开始
- 同一域链接正在顶部iFrame中加载,而不是在整个页面上加载
- 轨道:涡轮链接回到页面顶部
- Javascript-点击时阻止JS链接滚动回顶部
- 当外部链接打开Tab时,页面滚动到顶部也固定了导航栏
- 试图在CSS中以顶部标题居中链接,但不会移动
- 防止点击Sennajs中的链接跳到页面顶部
- 为什么当我滚动到我的页面顶部并单击附加表单的链接时,它会向下滚动我
- HTML5 中图像顶部的超链接文本
- 如何阻止页面在单击链接后跳转到顶部
- 包含动态内容的较长页面上的返回顶部链接
- 基础6:单击链接时隐藏顶部栏
- Jquery 对话框滚动到一个链接,如何将其保持在顶部
- CKEDITOR在编辑链接后跳到顶部
- 返回顶部链接隐藏在文本之下
- 出现,消失的“滚动到顶部”链接与jQuery和CSS
- 下行链接更改为滚动上的回到顶部链接
- 当用户滚动时,滚动链接更改为顶部链接
- 滚动回顶部链接是可见的第一次加载