Javascript: Bir kullanıcı seçimini html etiketlerine göre nasıl genişletirim?

Question

Le Kodu: Yani şu anda http://jsfiddle.net/frf7w/12/

mevcut yöntem seçilmiş olarak ... tam olarak seçilen metni alıyoruz ve görüntülendiğinde, sayfa patlatmak kalmaması etiketler ekleyecektir.

Ama ne yapmak istiyorum: Bir kullanıcı bir sayfanın bir bölümünü seçtiğinde, seçim içinde eşlenmemiş etiketler varsa, seçim ileriye veya geriye doğru atlayacaktır (ne benzersiz eşleme etiketine bağlı olarak) seçimi geçerli html yapmak etiket (ler) için seçimdir. Bir kullanıcı bir sayfadaki metni seçin ve şu anda bağlı kodla yapabilirsiniz (WYSIWYG editörü bu metni düzenleyebilmek için te mümkün istiyorum çünkü

ben bunu yapmak istiyorum sebebi vardır) ve daha sonra yeniden düzenlediklerimi sayfaya koyduk (şu an bunu yapamıyorum çünkü kullandığım yöntem etiketleri ekler).

Answer 1

Sen adding a range tarafından seçimin sınırlarını değiştirebilirsiniz:

var sel = window.getSelection(), 
    range = sel.getRangeAt(0); 

var startEl = sel.anchorNode; 
if (startEl != range.commonAncestorContainer) { 
    while (startEl.parentNode != range.commonAncestorContainer) { 
     startEl = startEl.parentNode; 
    } 
} 
var endEl = sel.focusNode; 
if (endEl != range.commonAncestorContainer) { 
    while (endEl.parentNode != range.commonAncestorContainer) { 
     endEl = endEl.parentNode; 
    } 
} 

range.setStartBefore(startEl); 
range.setEndAfter(endEl); 

sel.addRange(range); 

Yukarıdaki örnek size kapsayacak şekilde genişletilir bir seçim verecektir Başlangıç ​​ve bitiş düğümleri arasındaki ağacın tamamı, kapsayıcı (commonAncestorContainer() sayesinde).

Bu, metin düğümlerini dom öğelerine eşit olarak ele alır, ancak bu sizin için bir sorun olmamalıdır.

Demo: http://jsfiddle.net/Nq6hr/2/

Answer 2

Seçimle verilen düğümlerle çalışmalısınız. DerecedeNode ve anchorNode sonunu temsil eder ve seçim düğümlerinin başlangıcı, hem "tam" seçime sahip olmanıza yardımcı olabilir. https://developer.mozilla.org/fr/DOM/Selection

Satır içi düzenlemede contentEditable özniteliğini denemeniz gerekir. Bir yayılma Bu öznitelik içeren, seçimin unsurlarını çevreleyebilir https://developer.mozilla.org/en/DOM/element.contentEditable

Answer 3

bu SO yanıtında coverAll yöntemi Use javascript to extend a DOM Range to cover partially selected nodes istediğiniz tam olarak ne var. Bazı nedenlerle Selection prototipini genişletmek benim kromumda çalışmıyor, bu yüzden kodu çıkardım ve this ile window.getSelection(). Son kod şunun gibi görünür:

function coverAll() { 
    var ranges = []; 
    for(var i=0; i<window.getSelection().rangeCount; i++) { 
     var range = window.getSelection().getRangeAt(i); 
     while(range.startContainer.nodeType == 3 
       || range.startContainer.childNodes.length == 1) 
      range.setStartBefore(range.startContainer); 
     while(range.endContainer.nodeType == 3 
       || range.endContainer.childNodes.length == 1) 
      range.setEndAfter(range.endContainer); 
     ranges.push(range); 
    } 
    window.getSelection().removeAllRanges(); 
    for(var i=0; i<ranges.length; i++) { 
     window.getSelection().addRange(ranges[i]); 
    } 
    return; 
}