我在开发将不可编辑的内容插入文本流中的CKEditor插件时遇到了麻烦.我一直在尝试使用范围功能,但由于文档不是很好,所以收效甚微.所以,给定一些文本,让我们说插件插入"[[uneditable stuff]]",然后在WYSIWYG显示包裹在一个范围内,以便它可以用颜色设置样式:
<p>This is some text[[uneditable stuff here]]</p>
当第一次插入不可编辑的东西时,我们希望用户能够继续键入或按Enter键换新行.下面的代码(我在这里得到:如何将光标位置设置为CKEditor中的文本结尾?)在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
Run Code Online (Sandbox Code Playgroud)
所以我想要发生的是光标位于"^"位置:
<p>This is some text<span>[[uneditable stuff here]]</span>^</p>
如果新元素不在行的末尾,那么在创建它之后,光标应该转到这里:
<p>This is some text<span>[[uneditable stuff here]]</span>^ with more text after the new element</p>
在FF中,我可以将光标放在行尾但不在新元素之后的位置.在IE中,光标仍在新跨越,这是我看到的时候我键入内,它仍然是在跨度的CSS颜色,并切换到源视图时,该文本是走了(因为它是一个不可编辑的跨度).
我知道有一个range.setStartAfter方法,但即使在FF/Chrome中也完全无法工作. …