Question

有没有办法将光标设置在CKEditor内容的末尾？

这位开发人员也问过，但没有得到答案：

http://cksource.com/forums/viewtopic.php?f=11&t=19877&hilit=cursor+end

我想将焦点设置在CKEditor内的文本末尾。当我使用时：

ckEditor.focus();

它带我到CKEditor里面的文本的开头。

Answer 1

Dan的回答给我带来了奇怪的结果，但是微小的变化（除了拼写错误修复）使它有效：

var range = me.editor.createRange();
range.moveToElementEditEnd( range.root );
me.editor.getSelection().selectRanges( [ range ] );

Answer 2

根据CKEditor 4的文档，您可以在拥有编辑器对象后执行以下操作。

var range = editor.createRange();
range.moveToPosition( range.root, CKEDITOR.POSITION_BEFORE_END );
editor.getSelection().selectRanges( [ range ] );

链接：http://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection（在selectRanges函数下）。

Answer 3

经过一番摆弄后，我可以使用以下代码：

$(document).ready(function() {

    CKEDITOR.on('instanceReady', function(ev) {

        ev.editor.focus();

        var s = ev.editor.getSelection(); // getting selection
        var selected_ranges = s.getRanges(); // getting ranges
        var node = selected_ranges[0].startContainer; // selecting the starting node
        var parents = node.getParents(true);

        node = parents[parents.length - 2].getFirst();

        while (true) {
            var x = node.getNext();
            if (x == null) {
                break;
            }
            node = x;
        }

        s.selectElement(node);
        selected_ranges = s.getRanges();
        selected_ranges[0].collapse(false);  //  false collapses the range to the end of the selected node, true before the node.
        s.selectRanges(selected_ranges);  // putting the current selection there
    }

});

这个想法是：

获取根节点（不是正文）
前进到下一个节点，直到没有更多节点前进。
选择最后一个节点。
将其折叠
设定范围

Answer 4

这是@ peter-tracey的类似答案。在我的情况下，我的插件插入引文。如果用户进行了选择，我需要禁用选择并将光标放在句子的末尾。

  // Obtain the current selection & range
  var selection = editor.getSelection();
  var ranges = selection.getRanges();
  var range = ranges[0];

  // Create a new range from the editor object
  var newRange = editor.createRange();

  // assign the newRange to move to the end of the current selection
  // using the range.endContainer element.
  var moveToEnd = true;
  newRange.moveToElementEditablePosition(range.endContainer, moveToEnd);

  // change selection
  var newRanges = [newRange];
  selection.selectRanges(newRanges);

  // now I can insert html without erasing the previously selected text.
  editor.insertHtml("<span>Hello World!</span>");

Answer 5

CKEditor 3.x：

on : {
        'instanceReady': function(ev) {
           ev.editor.focus();
           var range = new CKEDITOR.dom.range( ev.editor.document );
           range.collapse(false);
           range.selectNodeContents( ev.editor.document.getBody() );
           range.collapse(false);
           ev.editor.getSelection().selectRanges( [ range ] );
        }
     }

基于开发人员提供的伪代码：

https://dev.ckeditor.com/ticket/9546#comment:3

你必须集中编辑器，获取文档对象，把它放在范围内，崩溃范围（带有false参数），选择body（带有 selectNodeContents），折叠它（带有false参数），最后选择范围。最好在instanceReady事件中完成所有操作。

Answer 6

这是ckeditor API提供的最简单的解决方案。我已经在IE10 +，ff，safari和Chrome上测试了它：

range = editor.createRange();
// the first parameter is the last line text element of the ckeditor instance
range.moveToPosition(new CKEDITOR.dom.node(editor.element.$.children[pos - 1]), CKEDITOR.POSITION_BEFORE_END)
range.collapse()
editor.getSelection().selectRanges([ range ])

Answer 7

你试过ckEditor.Selection.Collapse（false）;

Answer 8

这将肯定起作用。 CKEDITOR.config.startupFocus ='end';

如何在CKEditor中将光标位置设置为文本结尾？

8 个答案: