Editable Div Caret Position

Tengo un div editable y estoy usando un botón para insertar una imagen en el div. En este momento, solo estoy haciendo document.getElementById ('elementid'). InnerHTML. + =; para obtener la imagen añadida al final del div. Me gustaría ingresar la imagen donde está el cursor. ¿Cómo voy a hacer esto?Editable Div Caret Position

Gracias

Fuente

2010-12-02 intl

Para insertar un elemento en el caret no es demasiado difícil. La siguiente función inserta un nodo en el símbolo de intercalación (o al final de la selección, si se selecciona el contenido) en todos los principales navegadores:

function insertNodeAfterSelection(node) { 
    var sel, range, html; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.collapse(false); 
      range.insertNode(node); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.collapse(false); 
     html = (node.nodeType == 3) ? node.data : node.outerHTML; 
     range.pasteHTML(html); 
    } 
}

Fuente

2010-12-03 10:39:09

me preguntaba cómo podría configurar esto para el final de la e área digitable en lugar de un punto específico – kqlambert

@kricket: http://stackoverflow.com/a/4238971/96100 –

ayuda esto a: http://jsfiddle.net/8akDr/

Fuente

2010-12-02 20:46:18

entiendo que simplemente está reemplazando un carácter insertado/conjunto de caracteres, pero ¿Cómo voy a insertar el personaje en la posición de intercalación? ¿Tendría que ser una entrada de teclado simulada o de alguna otra manera? – intl

Wow ... Estoy muy avergonzado de decir que pensé que querías decir algo así como, literalmente, un personaje de cariño en el texto ... Me disculpo por mi malentendido :( –

Odio sonar negativo, pero esto es tan duro que es ridículo. Tienes que lidiar con IE y otros, y las implementaciones son muy diferentes. Pero donde se vuelve extremadamente difícil es que si haces clic en un botón para insertar la imagen, pierdes el foco y la posición de intercalación, por lo que debes recordar la posición con alguna habilidad de marcado de onblur (una vez más, IE diferente). Lo central no es tanto un problema si su contenido editable está en un marco flotante y mantiene su propio enfoque. (Nota: no estoy perjudicando a IE aquí, en realidad prefiero su implementación al Drek estándar W3C.)

Puede ver algunos editores de texto de código abierto en busca de pistas y sugerencias. Pero encontrarás una enorme cantidad de código para manejar estas simples tareas.

Fuente

2010-12-02 21:08:04 mwilcox

Hay dificultades como mencionas pero no son insuperable. La biblioteca My Rangy (http://code.google.com/p/rangy) puede ayudar con la mayoría de ellos: proporciona una única API y métodos para guardar y restaurar una selección. En gran medida no estoy de acuerdo con usted sobre la selección de IE/TextRange es mejor que los estándares DOM: 'Range' es enormemente superior a' TextRange' en la mayoría de los sentidos, excepto en el caso de los límites para abarcar palabras y moverse al texto adyacente en el documento. No hay un estándar para objetos de selección (WHATWG funciona uno) pero la selección de IE no tiene nada en aquellos en otros navegadores. –

... y en realidad, ahora que leo la pregunta un poco más de cerca, esta tarea no es tan difícil. –

Respuesta

Cuestiones relacionadas