如何在CKEditor中将光标位置设置到文本末尾？

Question

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

该开发人员也提出了问题，但没有收到答案：

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

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

ckEditor.focus();

它会将我带到 CKEditor 内已有文本的开头。

Answer 1

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

$(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
    }

});

这个想法是：

1. 获取根节点（而不是主体）
2. 前进到下一个节点，直到没有更多的节点可以前进到。
3. 选择最后一个节点。
4. 折叠
5. 设置范围

Answer 2

这是@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 3

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 参数），选择正文（带有
selectNodeContents），折叠它（使用 false 参数），最后
选择范围。最好在instanceReady事件中完成这一切。

Answer 4

这是 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 5

这肯定会起作用。
CKEDITOR.config.startupFocus = '结束';

Answer 6

您是否尝试过 ckEditor.Selection.Collapse(false);

Answer 7

根据 CKEditor 4 文档，另一个选项是：

const range = this.ckeditor.createRange()
range.moveToElementEditablePosition(range.root, true)
this.ckeditor.getSelection().selectRanges([range])

链接： https: //ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dom_range.html#method-moveToElementEditablePosition

Answer 8

丹的回答对我来说得到了奇怪的结果，但微小的改变（除了拼写错误修复之外）使它起作用：

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

Answer 9

根据 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< /a> （在 selectRanges 函数下）。