HTML5 İçerik Listeden sonra düzenlenebilir paragraf

Question

Google Chrome'u kullanıyorum.

Çok küçük bir HTML düzenleyiciye ihtiyacım var ve Simple Edit'u buldum. Çok küçük editör, sadece ihtiyaçlarım için. Ancak ... İçerik Düzenlenebilirliğini kullanan bu ve diğer birçok editörün ortak bir sorunu var.

listesini oluşturduktan sonra Sorun

(son liste öğesinin üzerine iki kez butonu), yeni bir div oluşturur. Bana beklenecek yeni bir paragraf etiketi oluşturmak olacaktır.

Linkler

• burada editörü deneyin: minik kaynak kodunahttp://files.inlovewithcss.com/simple-edit/
• bak:https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

Soru

Boşlukları önlemek için doğru yol nedir ve bunun yerine bir liste sonra paragraf etiketleri ekleyin?

Answer 1

Bryan Allo tarafından yayınlanan cevap, imleci div'un sonuna yerleştirmeniz gerektiğini dikkate almadı. Aksi takdirde, her değiştirme eyleminde kullanıcının CTRL-End'e vurması gerekir.

Bu

da http://jsfiddle.net/82dS6/ de eylem görülecek ben teklif çözümdür:

function setEndOfContenteditable(contentEditableElement){ 
    // Taken from http://stackoverflow.com/a/3866442/1601088 
    var range,selection; 
    if(document.createRange){//Firefox, Chrome, Opera, Safari, IE 9+ 
     range = document.createRange(); 
     range.selectNodeContents(contentEditableElement); 
     range.collapse(false); 
     selection = window.getSelection(); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
    else if(document.selection){//IE 8 and lower 
     range = document.body.createTextRange(); 
     range.moveToElementText(contentEditableElement); 
     range.collapse(false); 
     range.select(); 
    } 
} 

function replaceDivWithP(el){ 

    $(el).find('div').each(function(){ 
     $(this).replaceWith($('<p>' + $(this).html() + '</p>')); 
    }); 
} 

$(function(){ 
    $(".text").simpleEdit(); 
}); 

$('.textarea').bind('keyup', function(){ 
    replaceDivWithP(this); 
    setEndOfContenteditable(this); 
}); 


​ 

Answer 2

Hızlı bir çözüm, herhangi bir DIV'yi Ps ile değiştirmektir. Bunu içeriğinizin düzenlenebilir DIV'sine yerleştirin.

onkeyup="this.innerHTML=this.innerHTML.replace('div','p')" 

Yardım edin. İyi şanslar.

Answer 3

yerine işleme on-the-fly, size düşünebiliriz her keyup olayla post-processing:

$('.textarea').bind('blur', function(){ 
    $('.textarea div').contents().unwrap().wrap('<p/>'); 
}); 

Fiddle: http://jsfiddle.net/thNUS/4/

Answer 4

formatblock which has compatibility issues kullanmaktı ile ben gelebilir iyi. Temelde bu kadar gibi başka bir bağlantı eklemek olabilir:

textcontainer.prepend("<button class='paragraph'>p</button>"); 

...

$(".paragraph").live("click", function(){ 
    document.execCommand('formatblock', false, "p"); 
}); 

Bu kullanıcılara bir paragraf etiketi eklemek seçeneği sunar. Bu etiketten çıkmak biraz zor olsa da, bazı kullanılabilirlik sorunları da var.Sağlanan demo onunla oynayabilir:

Demo: http://jsbin.com/ovexiz/1
Kaynak: http://jsbin.com/ovexiz/1/edit

* paragraflar yeşil renkli metinle tarz unutmayın.

Answer 5

Önceki yanıtlar, bir keyup veya blur tabanlı bir çözüm önermiştir.

http://jsfiddle.net/9ZAL7/:

function replaceDivWithP(el){ 

    $(el).find('div').each(function(){ 
     $(this).replaceWith($('<p>' + $(this).html() + '</p>')); 
    }); 
} 

$(function(){ 
    $(".text").simpleEdit(); 
}); 

$('button.list').bind('click', function(){ 
    replaceDivWithP($('.textarea')); 
}); 
​