Как установить позицию курсора в конец текста в CKEditor? - PullRequest
18 голосов
/ 27 декабря 2010

Есть ли способ установить курсор в конце содержимого CKEditor?

Этот разработчик тоже спросил, но не получил ответов:

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

Я хотел бы установить фокус в конце текста внутри CKEditor.Когда я использую:

ckEditor.focus();

Это приводит меня к началу текста уже внутри CKEditor.

Ответы [ 8 ]

21 голосов
/ 01 июня 2013

Ответ Дэна дал мне странные результаты, но незначительные изменения (в дополнение к исправлению опечатки) заставили его работать:

var range = me.editor.createRange();
range.moveToElementEditEnd( range.root );
me.editor.getSelection().selectRanges( [ range ] );
9 голосов
/ 01 мая 2013

В соответствии с документацией для 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).

4 голосов
/ 02 января 2012

После небольшого перебора я получил его для работы со следующим кодом:

$(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. Установить диапазон
2 голосов
/ 15 ноября 2014

Вот аналогичный ответ на @ 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>");
1 голос
/ 03 октября 2013

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

Вы должны сфокусировать редактор, получить объект документа, поместить его в диапазон, диапазон свертывания (с ложным параметром), выберите тело (с selectNodeContents), сверните его (с ложным параметром) и, наконец, выберите диапазон. Лучше всего делать все это в случае instanceReady.

0 голосов
/ 11 декабря 2018

Это будет работать наверняка. CKEDITOR.config.startupFocus = 'end';

0 голосов
/ 11 апреля 2017

Это самое простое решение, предоставляемое API ckeditor. Я проверил это на 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 ])
0 голосов
/ 03 января 2011

вы пробовали ckEditor.Selection.Collapse (false);

...