Estoy insertando texto en una instancia de SCeditor y me gustaría mover el cursor después de la inserción, a una posición específica dentro del texto insertado.
Código de inicio del SCeditor:
var textarea = $('textarea[name="'+fieldname+'"]')[0]; // shortcut to insert custom text sceditor.instance(textarea).addShortcut('ctrl+alt+b', function() { var fieldname = this.opts.id; parent.window['sce_'+fieldname].insertText('\\sqrt{}'); // move cursor one to the left, so it is within the two brackets // ... return; }¿Cómo mover el cursor?
Código relacionado He encontrado ofertas con el objeto de rango, pero no había ningún ejemplo de cómo mover el cursor:
var rangeHelper = this.getRangeHelper(); var range = rangeHelper.selectedRange(); rangeHelper.selectRange(range); range.setStartAfter(parent); rangeHelper.selectRange(range);Jugar con los rangos es bastante horrible. La forma más fácil es probablemente insertar el texto como HTML e incluir algunos marcadores de selección especiales que utiliza SCEditor para restaurar las selecciones. Esto debería funcionar:
// Remove any current markers instance.getRangeHelper().removeMarkers() // Insert the text with the special marker tags instance.getRangeHelper().insertHTML( '\sqrt{' + '<span id="sceditor-start-marker" class="sceditor-selection sceditor-ignore" style="display: none; line-height: 0;"> </span>' + '<span id="sceditor-end-marker" class="sceditor-selection sceditor-ignore" style="display: none; line-height: 0;"> </span>' + '}' ); // Focus will set the cursor to the markers instance.focus()Cuando está en modo fuente, es mucho más fácil (no funciona en modo WYSIWYG, podría ser algo que debería hacer):
instance.insertText('\sqrt{', '}');Deberá usarRange.setStart() con un desplazamiento personalizado.
function setCaret() { var el = document.getElementById("editable") var range = document.createRange() var sel = window.getSelection() range.setStart(el.childNodes[2], 5) range.collapse(true) sel.removeAllRanges() sel.addRange(range) } <div id="editable" contenteditable="true"> text text text<br>text text text<br>text text text<br> </div> <button id="button" onclick="setCaret()">focus</button>