example - ckeditor plugins

¿Cómo configurar la posición del cursor al final del texto en CKEditor?

Question

¿Hay alguna manera de configurar el cursor para que esté al final del contenido de un CKEditor?

Este desarrollador preguntó también, pero no recibió respuestas:

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

Me gustaría establecer el foco al final del texto dentro de un CKEditor. Cuando uso:

ckEditor.focus();

Me lleva al principio del texto que ya está dentro del CKEditor.

Answer 1

¿has probado ckEditor.Selection.Collapse (false);

Answer 2

Aquí hay una respuesta similar a @ peter-tracey. En mi caso mi plugin está insertando una cita. Si el usuario ha hecho una selección, necesitaba deshabilitar la selección y colocar el cursor al final de la oración.

 // 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 ] );
}
}

basado en el pseudocódigo proporcionado por los desarrolladores aquí:

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

Debe enfocar el editor, obtener el objeto de documento, ponerlo en rango, contraer rango (con parámetro falso), seleccionar cuerpo (con selectNodeContents), contraerlo (con parámetro falso) y finalmente seleccionar rango. Lo mejor es hacerlo todo en el evento instanceReady.

Answer 4

De acuerdo con la documentación de CKEditor 4, puede hacer lo siguiente una vez que tenga el objeto editor.

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

Enlace: http://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection (bajo la función selectRanges).

Answer 5

Después de un poco de violín, tengo que trabajar con el siguiente código:

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

La idea es:

1. Obtener el nodo raíz (no el cuerpo)
2. Avance hasta el siguiente nodo, hasta que no haya más nodos para avanzar.
3. Seleccione el último nodo.
4. Colapsarlo
5. Establecer rango

Answer 6

Esta es la solución más fácil que proporciona la API de ckeditor. Lo he probado en IE10 +, ff, safari y 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

Esto funcionará seguro. CKEDITOR.config.startupFocus = ''end'';

Answer 8

La respuesta de Dan obtuvo resultados extraños para mí, pero un cambio menor (además de la corrección tipográfica) hizo que funcionara:

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