Plugins 插入不可编辑元素后的编辑器光标位置
我在开发将不可编辑内容插入文本流的CKEditor插件时遇到了麻烦。我一直在尝试利用范围函数,但没有什么成功,因为文档不够详细。因此,给定一些文本,让我们假设插件插入“[[uneditable stuff]]”,然后在WYSIWYG显示时将其包装在一个范围内,以便可以用颜色设置样式:Plugins 插入不可编辑元素后的编辑器光标位置,plugins,insert,cursor,ckeditor,range,Plugins,Insert,Cursor,Ckeditor,Range,我在开发将不可编辑内容插入文本流的CKEditor插件时遇到了麻烦。我一直在尝试利用范围函数,但没有什么成功,因为文档不够详细。因此,给定一些文本,让我们假设插件插入“[[uneditable stuff]]”,然后在WYSIWYG显示时将其包装在一个范围内,以便可以用颜色设置样式: 这是一些文本[[此处不可编辑的内容] 当第一次插入不可编辑的内容时,我们希望用户能够继续键入或按Enter键输入新行。以下代码(我在这里得到:)在Firefox中有效,但(自然)在IE9、8或7中不起作用: var
这是一些文本[[此处不可编辑的内容]
当第一次插入不可编辑的内容时,我们希望用户能够继续键入或按Enter键输入新行。以下代码(我在这里得到:)在Firefox中有效,但(自然)在IE9、8或7中不起作用:
var s = editor.getSelection();
editor.insertElement(e); // element 'e'= a span created earlier
var p = e.getParent();
s.selectElement(p);
var selected_ranges = s.getRanges();
selected_ranges[0].collapse(false); // false = to the end of the selected node
s.selectRanges(selected_ranges); // putting the current selection there
因此,我希望光标移动到位置“^”:
这是一些文本[[此处不可编辑的内容]^
如果新元素不在行尾,则在创建新元素后,光标应转到此处:
这是一些文本[[此处不可编辑的内容]]^新元素后面有更多文本
在FF中,我可以将光标放在行的末尾,但不能放在新元素后面的位置。在IE中,光标仍然在新的范围内,我键入时看到的范围仍然是css颜色,切换到源代码视图时,文本消失了(因为它是不可编辑的范围)
我知道有一个range.setStartAfter方法,但即使在FF/Chrome中也完全无法使其工作
有没有人能很好地处理在CKEditor中使用范围和选择方法?我知道我不知道
我开始认为仅仅使用editor.insertElement是错误的,我应该了解FakeElement(insertBogus?)函数,我还不了解这些函数。链接和图像之类的库存插件似乎没有这个问题。我不得不做一些鬼鬼祟祟的事情来解决这个问题,但它确实得到了解决:在创建不可编辑项(属性content editable:false的范围)后,我不得不创建一个包含一个空格的文本的“虚拟”范围。所以,我插入了真实的跨度,然后是假人。但仅当创建新项目时 因此,这将出现在“如果不处理编辑选定项目”部分中。这里,“a”是编辑器实例,“e”是所需的不可编辑项,“f”是虚拟范围
var e=new CKEDITOR.dom.element('span',a.document);
e.setAttributes({// stuff to create our element});
var f=new CKEDITOR.dom.element('span',a.document);
f.setAttributes({
'class':'dummyF'
});
f.setText(' '); // that's just one space
// after section dealing with editing a selected item, in "else":
var sel = a.getSelection(); // current cursor position
a.insertElement(e); // the real new element
if(CKEDITOR.env.ie || CKEDITOR.env.webkit){ // IE & Chrome like this way
f.insertAfter(e);
sel.selectElement(f);
}
else { //FF likes this way (to ensure cursor stays in the right place)
f.insertAfter(e);
var rangeObjForSelection = new CKEDITOR.dom.range( a.document );
rangeObjForSelection.selectNodeContents( f );
a.getSelection().selectRanges( [ rangeObjForSelection ] );
}
我必须承认我并不完全理解自己的代码。我经过几个小时的反复试验才到达那里。哦,我必须添加一个htmlFilter规则来去除剩余的“f”元素:
e.addRules({
// e is the htmlFilter: applied to editor data before/upon output
elements:{
span:function(s){ // 's' is any spans found in the editor
if(s.attributes&&s.attributes['data-cke-myelement']) {
//stuff to do with my element
}
else if(s.attributes['class']=='dummyF') { //CKEDITOR.env.ie&&
// for dummy spans to deal with "can't type or hit enter after new element" problem
realtext = new String(s.children[0]['value']);
realtext.replace(/^ /,'');
s.children[0]['value'] = realtext;
delete s.name;
}
}
}
});
我还必须补充一点,我不记得为什么我必须在删除span之前替换“nbsp”实体。但它是有效的。我不知道为什么要删除你用的是“s.name”而不是“s”
希望这对其他人有所帮助。我也遇到了同样的问题,通过将SVG元素包装在
;+中,我可以在不可编辑内容(SVG元素)前后放置光标元素+代码>
const eHtml=';'+svgHtml+';';//将元件包裹在一个跨度内,并使用sorrounding#8203;
const wrpEl=CKEDITOR.dom.element.createFromHtml(eHtml);
编者:插入元素(wrpEl);
wrpEl.remove(真);//取下儿童的包装带。
这对我来说效果很好,现在我可以在SVG元素的开头和结尾使用curesor。我在将图像直接粘贴到编辑器中时遇到类似问题,图像被选中,我不希望它被选中,因此我必须取消选择图像并将光标放在图像的正后方:
CKEditorObject.on('afterInsertHtml', function (e) {
setTimeout(function () {
var range = e.editor.getSelection().getRanges()[0];
range.collapse();
e.editor.getSelection().selectRanges( [ range ] );
}, 1);
});
我正在努力解决这个问题。自从你发帖以来,你在这方面有过成功吗?
CKEditorObject.on('afterInsertHtml', function (e) {
setTimeout(function () {
var range = e.editor.getSelection().getRanges()[0];
range.collapse();
e.editor.getSelection().selectRanges( [ range ] );
}, 1);
});