Javascript 将光标设置到编辑器中的特定位置
是否有办法将光标位置设置为CKEditor中的已知索引 我之所以想这样做,是因为当我在编辑器中更改html时,它会将光标重置为插入元素的开头,这是一个问题,因为我在用户键入内容时会动态更改内容 如果我知道我想将光标设置回编辑器中已知的字符位置,比如100,这可能吗Javascript 将光标设置到编辑器中的特定位置,javascript,ckeditor,contenteditable,Javascript,Ckeditor,Contenteditable,是否有办法将光标位置设置为CKEditor中的已知索引 我之所以想这样做,是因为当我在编辑器中更改html时,它会将光标重置为插入元素的开头,这是一个问题,因为我在用户键入内容时会动态更改内容 如果我知道我想将光标设置回编辑器中已知的字符位置,比如100,这可能吗 (我问了a,但我认为我用示例代码把问题复杂化了。)设置选择的基本方法是通过a,设置其位置和位置 注意:如果您不知道Range API(或至少不知道Range背后的理念),您将无法使用selection。这里有一个很好的介绍-(是的,这
(我问了a,但我认为我用示例代码把问题复杂化了。)设置选择的基本方法是通过a,设置其位置和位置 注意:如果您不知道Range API(或至少不知道Range背后的理念),您将无法使用selection。这里有一个很好的介绍-(是的,这是一个规范,但它很好)。非常相似,但有点大 例如:
// Having this HTML in editor:
// <p id="someId1">foo <em id="someId2">bar</em>.</p>
var range = editor.createRange();
range.setStart( editor.document.getById( 'someId1' ), 0 ); // <p>^foo
range.setEnd( editor.document.getById( 'someId2' ).getFirst(), 1 ); // <em>b^ar</em>
editor.getSelection().selectRanges( [ range ] );
// Will select:
// <p id="someId1">[foo <em id="someId2">b]ar</em>.</p>
这是最简单的解决办法。只有当我们所做的DOM更改没有过时的范围或者我们知道如何更新它们时,它才会起作用
解决方案2-通过侵入式书签
通过该方法创建的书签在选择范围的起点和终点插入具有特殊属性(包括数据cke bookmark
)的不可见
元素
如果您可以避免不受控制的innerHTML
更改,而是附加/删除/移动一些节点,那么请记住,您必须保留这些
元素,此方法将非常有效。如果修改也会更改选择,则还可以移动书签的元素
默认情况下,书签保留对其
元素的引用,但也可以创建可序列化书签,将true
传递给createBookmarks
方法。这种书签将通过ID保留对节点的引用,因此您可以覆盖整个innerHTML
注:此方法在中也可用
这是最流行的方法,因为您可以完全控制选择,并且可以更改DOM,尽管您需要处理书签的span
解决方案3-通过非侵入式书签
注意:在这个解决方案中,我们使用方法
在这里,我们还创建了一个书签对象数组,但我们不向DOM中插入任何元素。这些书签按地址存储位置。是祖先在其父代中的索引数组
此解决方案与解决方案1非常相似,但您可以覆盖整个innerHTML
,因为它(很可能;>)不会更改书签节点的地址。尽管如此,在这种情况下,您应该将true
传递到createBookmarks2
以获得规范化的地址,因为在设置innerHTML
时,相邻的文本节点将被连接,而空的文本节点将被删除
总而言之。。。
。。。使用DOM和选择并不是件小事。你需要知道你在做什么,你需要知道DOM,你需要为你的问题选择正确的解决方案。通常是第二个问题,但这取决于具体情况。Reinmar的回答让我找到了这个解决方案
var selection = ed.getSelection();
var bookmarks = selection.createBookmarks(true);
//delete text from editor
var range = selection.getRanges()[0];
range.moveToBookmark(bookmarks[0]);
range.select();
注意:moveToBookmark函数没有在api中记录,但非常有用,是唯一适合我的解决方案。我当然不是ckeditor方面的专家,我花了几天时间才找到一个有效的解决方案。所以moveToBookmark可能是一个不推荐使用的函数,我不确定。非常好的答案-确实帮助我更好地理解这个问题。谢谢你,先生!那很有趣。我想知道@Reinmar是否有任何意见?更改编辑器内容后,我没有成功地使用
selectBookmarks
,可能moveToBookmark
在我的情况下效果更好。现在似乎已经有文档记录了。
var ranges = editor.getSelection().getRanges();
// Make DOM changes.
editor.getSelection().selectRanges( ranges );
var bookmarks = editor.getSelection().createBookmarks();
// Make DOM changes.
editor.getSelection().selectBookmarks( bookmarks );
var bookmarks = editor.getSelection().createBookmarks2();
// Make DOM changes.
editor.getSelection().selectBookmarks( bookmarks );
var selection = ed.getSelection();
var bookmarks = selection.createBookmarks(true);
//delete text from editor
var range = selection.getRanges()[0];
range.moveToBookmark(bookmarks[0]);
range.select();