Cambio HTML dependiendo de donde hago clic con javascript/jQuery

Question

en una página HTML que podría tener algún código con dos párrafos como éste:

<hr /> 
<p>The first paragraph</p> 
<p>The second paragraph</p> 
<hr /> 

y muy simplemente, estas dos etiquetas haría así:

---

El primer párrafo

El segundo párrafo

---

Lo que me interesa es permitir que el usuario haga clic en algún lugar del código html prestado para insertar un nuevo elemento con JQuery. Por ejemplo, si hago clic entre la letra iy la letra r (solo un clic, sin resaltar/seleccionar) en la palabra f * ir * st encontrada en el primer párrafo, podría insertar un elemento span personalizado o todo lo que me gusta exactamente en esa posición en el código HTML resulta en algo como esto:

<hr /> 
<p>The fi<span id="myCustomSpan"></span>rst paragraph</p> 
<p>The second paragraph</p> 
<hr /> 

¿Alguna idea que me ayude? Mi solicitud excluye el posicionamiento absoluto. Eso no resolvería mis problemas.

Answer 1

Esto se puede hacer con secuencias de comandos algo complejas.

puedo indicar un algoritmo que puedes probar.

1.JQuery tiene un desplazamiento de API() http://api.jquery.com/offset/ con el que puede obtener el desplazamiento y el elemento.

2.Ahora necesita tomar el innerHTML del elemento, tomarlo como una cadena, del desplazamiento Y val, dividir en la posición Y en la cadena. hacer el elemento como dos elementos.

3.Now puede crear directamente un elemento de secuencia de comandos con creteElement (tagname) y establecer el innerHTML y luego insertarlo en entre los dos elementos

Answer 2

Ésta es sucio, pero hace uso de contenteditable: http://jsfiddle.net/Jj9Mp/.

$('div').click(function(e) { 
    $('div').attr('contenteditable', true); 
    document.execCommand("InsertHTML", false, "<span class=red>!</span>") 
    e.stopPropagation(); 
}); 

$(':not(div)').click(function(e) { 
    if($(this).parents('div').length === 0) { 
     $('div').attr('contenteditable', false); 
    } else { 
     $('div').click(); 
    } 
    e.stopPropagation(); 
}); 

Answer 3

Aquí está mi solución: http://jsfiddle.net/gion_13/L6aeT/
Funciona mediante el cálculo del tamaño real (en píxeles) de la cadena.