javascript - icon - ¿Cuál es la mejor manera de establecer la posición del cursor/cursor?

jquery button cursor pointer

Question

Si estoy insertando contenido en un área de texto que TinyMCE ha elegido, ¿cuál es la mejor manera de establecer la posición del cursor / cursor?

Estoy usando tinyMCE.execCommand("mceInsertRawHTML", false, content); para insertar el contenido, y me gustaría establecer la posición del cursor hasta el final del contenido.

Tanto document.selection como myField.selectionStart no funcionarán para esto, y creo que TinyMCE lo apoyará (a través de algo que no puedo encontrar en su foro) o será un hack muy feo.

Más tarde: se pone mejor; Acabo de descubrir que, cuando carga TinyMCE en WordPress, carga todo el editor en un iframe incrustado.

Más tarde (2): puedo usar document.getElementById(''content_ifr'').contentDocument.getSelection(); para obtener la selección como una cadena, pero no como un Objeto de selección en el que pueda usar getRangeAt(0) . Avanzando poco a poco.

Answer 1

Después de pasar más de 15 horas en este tema (dedicación, lo sé), encontré una solución parcial que funciona en FF y Safari, pero no en IE. Por el momento, esto es lo suficientemente bueno para mí, aunque podría seguir trabajando en él en el futuro.

La solución: al insertar HTML en la posición actual de intercalación, la mejor función para usar es:

tinyMCE.activeEditor.selection.setContent(htmlcontent);

En Firefox y Safari, esta función insertará el contenido en la posición de intercalación actual dentro del marco flotante que WordPress usa como editor de TinyMCE. El problema con IE 7 y 8 es que la función parece agregar el contenido a la parte superior de la página, no el iframe (es decir, falla por completo el editor de texto). Para solucionar este problema, agregué una declaración condicional basada en este código que utilizará esta función en su lugar para IE:

tinyMCE.activeEditor.execCommand("mceInsertRawHTML", false, htmlcontent);

El problema para esta segunda función, sin embargo, es que la posición de intercalación se establece al principio del área de publicación después de haber sido llamada (sin esperanza de recuperarla en función del alcance del navegador, etc.). En algún lugar cerca del final descubrí que esta función funciona para restaurar la posición de intercalación al final del contenido insertado con la primera función:

tinyMCE.activeEditor.focus();

Además, restaura la posición de intercalación hasta el final del contenido insertado sin tener que calcular la longitud del texto insertado. La desventaja es que solo funciona con la primera función de inserción que parece causar problemas en IE 7 e IE 8 (que podría ser más un error de WordPress que TinyMCE).

Una respuesta vergonzosa, lo sé. Siéntase libre de hacer preguntas para aclaraciones.

Answer 2

Es tan simple mover el cursor hasta el final que no puedo creer los terribles errores que se han publicado en otra parte en línea para hacer esto. La respuesta del Sr. Spocke no fue útil al principio, pero al final los documentos de API me proporcionaron la respuesta. "Seleccione todo el contenido y luego contraiga la selección":

ed.selection.select(ed.getBody(), true); // ed is the editor instance

ed.selection.collapse(false);

Espero que esto ayude a otra persona, ya que este hilo es uno de los primeros en aparecer en Google.

Answer 3

Esta es la solución que funciona para mí:

// params: 
//   $node: jquery node with tinymce loaded 
//   text: text to set at then before caret
function setTextAndCaretToEnd($node, text) {
     var ed = window.tinyMCE.get($node.attr("id"));
     ed.focus();
     ed.selection.setContent(text);
}

Answer 4

He plagiado esto desde here .

function setCaretTo(obj, pos) { 
    if(obj.createTextRange) { 
        /* Create a TextRange, set the internal pointer to
           a specified position and show the cursor at this
           position
        */ 
        var range = obj.createTextRange(); 
        range.move("character", pos); 
        range.select(); 
    } else if(obj.selectionStart) { 
        /* Gecko is a little bit shorter on that. Simply
           focus the element and set the selection to a
           specified position
        */ 
        obj.focus(); 
        obj.setSelectionRange(pos, pos); 
    } 
} 

Answer 5

Inserta un nodo DOM en la ubicación actual de selección / intercalación.

tinyMCE.activeEditor.selection.setNode(tinyMCE.activeEditor.dom.create(''img'', {src : ''some.gif'', title : ''some title''}));

Answer 6

La mejor manera que he encontrado es insertar el contenido con una identificación temporal y luego darle ese enfoque usando algún truco que encontré en el complemento advlink .

Espero que esto ayude.

            var ed = tinyMCE.activeEditor;

            ed.execCommand(''mceInsertContent'', false, ''<a id="_mce_temp_rob" href="http://robubu.com">robubu.com</a>'');

            //horrible hack to put the cursor in the right spot
            ed.focus(); //give the editor focus
            ed.selection.select(ed.dom.select(''#_mce_temp_rob'')[0]); //select the inserted element
            ed.selection.collapse(0); //collapses the selection to the end of the range, so the cursor is after the inserted element
            ed.dom.setAttrib(''_mce_temp_rob'', ''id'', ''''); //remove the temp id

Si estás haciendo esto desde una ventana emergente, creo que también debes agregar

        tinyMCEPopup.storeSelection();

antes de cerrar la ventana emergente.

Para cualquiera que intente insertar contenido de un cuadro meta personalizado de Wordpress en el editor TinyMCE, esta es la solución que funciona. Probé muchas otras secuencias de comandos, incluida otra en esta página, la respuesta anterior de Gary Tan, que funcionó para mí al instalar botones TinyMCE personalizados, pero no funcionó en este escenario.

Answer 7

La solución correcta es usar tinyMCE api tinymce.dom.Selection

http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.Selection

la sintaxis es algo así como:

var rng = tinymce.DOM.createRng();  // the range obj
var newNode = editor.dom.select(...    // find the correct selector so that newNode is the element of your editor text
rng.setStart(newNode.firstChild, 0); // 0 is the offset : here it will be at the beginning of the line.
rng.setEnd(newNode.firstChild, 0);
editor.selection.setRng(rng);

funciona yo uso esto yo mismo.

Answer 8

Primero, lo que debe hacer es agregar un lapso al final del contenido que desea crear.

var ed = tinyMCE.activeEditor;

//add an empty span with a unique id
var endId = tinymce.DOM.uniqueId();
ed.dom.add(ed.getBody(), ''span'', {''id'': endId}, '''');

//select that span
var newNode = ed.dom.select(''span#'' + endId);
ed.selection.select(newNode[0]);

Esta es una estrategia utilizada por los propios desarrolladores de TinyMCE al escribir Selection.js. Leer la fuente subyacente puede ser de gran ayuda para este tipo de problema.

Answer 9

Solo lanzando mis propios 2 centavos aquí. Ninguno de estos respondió mi pregunta. No estaba poniendo un elemento HTML, sino un bloque de texto ( [code][/code] por ejemplo) y necesitaba el cursor para ir entre los dos.

Utilizando parte de la respuesta de @robyates, lo que hice fue colocar un elemento HTML temporal entre las 2 etiquetas [code] , centrarme en él y luego eliminar completamente el elemento HTML. Aquí está mi código:

setup : function(ed) {
    // Add a custom button
    ed.addButton(''codeblock'', {
        title : ''Code Block'',
        text : ''[code/]'',
        icon: false,
        onclick : function() {
            // Add you own code to execute something on click
            ed.focus();
            //ed.selection.setContent(''[code][/code]'');
            ed.execCommand(''mceInsertContent'', false, ''[code]<span id="_cursor" />[/code]'');

            ed.selection.select(ed.dom.select(''#_cursor'')[0]); //select the inserted element
            ed.selection.collapse(0); //collapses the selection to the end of the range, so the cursor is after the inserted element
            ed.dom.remove(''_cursor''); //remove the element
        }
    });
}