如果我在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);
}
};
});
解决方法:
出现此问题的原因是,通过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文档.
标签：javascript,ckeditor,html 来源： https://codeday.me/bug/20190623/1270531.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。