Modifica HTML a seconda di dove si fa clic con javascript/JQuery

Question

in una pagina HTML che si potrebbe avere qualche codice con due paragrafi come questo:

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

e molto semplice, questi due tag renderebbe come questo:

---

Il primo paragrafo

Il secondo comma

---

Quello che mi interessa è consentire all'utente di cliccare da qualche parte nel codice html reso in modo da inserire un nuovo elemento con JQuery. Ad esempio, se clicco tra la lettera i e la lettera r (solo un clic, nessun higlighting/selezione) nella parola f * ir * st trovata nel primo paragrafo, sarei in grado di inserire un elemento di span personalizzato o quello che mi piace esattamente in quella posizione nel codice HTML risultante in qualcosa di simile:

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

Tutte le idee che mi può aiutare? La mia richiesta esclude il posizionamento assoluto. Questo non risolverà i miei problemi.

Answer 1

Questo può essere fatto con uno script un po 'complesso.

posso indicare un algoritmo che puoi provare.

1.JQuery ha uno scostamento API() http://api.jquery.com/offset/ utilizzando che è possibile ottenere l'offset e l'elemento.

2.Ora è necessario prendere l'HTML interno dell'elemento, assumerlo come stringa, dall'offset Y val, dividere in posizione Y nella stringa. rendere l'elemento come due elementi.

3.Now è possibile creare direttamente un elemento in script utilizzando creteElement (TagName) e impostare l'innerHTML e poi inserirla tra i due elementi

Answer 2

Questa è sporco, ma si avvale di 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

Ecco la mia soluzione: http://jsfiddle.net/gion_13/L6aeT/
Funziona calcolando la dimensione effettiva (in px) della stringa.