Treść HTML5 Edytowalny akapit po liście

Question

Używam Google Chrome.

Potrzebuję bardzo małego edytora HTML i znalazłem Simple Edit. Bardzo mały edytor, tylko dla moich potrzeb. Jednak ... Ten i wiele innych edytorów, które używają edycji treści mają jeden wspólny problem.

Problem

Po utworzeniu listy (naciśnij enter dwa razy na ostatniej pozycji listy), to tworzy nowy div. Oczekiwano, że utworzę nowy tag akapitu.

Linki

• Try edytor tutaj:http://files.inlovewithcss.com/simple-edit/
• spojrzeć na kod źródłowy maleńkim:https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

pytań

Jaki jest właściwy sposób zapobiegania elementom div, a zamiast tego dodawanie znaczników akapitu po liście?

Answer 1

W odpowiedzi wysłanej przez Bryana Allo nie wzięto pod uwagę, że należy umieścić kursor na końcu elementu div. W przeciwnym razie po każdej zamianie użytkownik musiałby nacisnąć CTRL-End.

To rozwiązanie proponuję, również należy rozpatrywać w akcji na http://jsfiddle.net/82dS6/:

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

Szybkim rozwiązaniem jest po prostu zastąpienie dowolnych DIV za pomocą Ps. Umieść to wewnątrz edytowalnego DIV zawartości.

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

Mam nadzieję, że to pomaga. Powodzenia.

Answer 3

Zamiast przetwarzanie on-the-fly z każdym keyup przypadku, można rozważyć post-processing:

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

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

Answer 4

najlepszym mogę wymyślić było wykorzystanie formatblock which has compatibility issues. Zasadniczo można dodać inny link tak:

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

...

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

To daje swoim użytkownikom możliwość wstawienia znacznika akapitu. Wydostanie się z tego tagu jest jednak nieco trudne, więc ma również pewne problemy z użytecznością.Można grać z nim na dołączonej demo:

Demo: http://jsbin.com/ovexiz/1
Źródło: http://jsbin.com/ovexiz/1/edit

* pamiętać, że ustępy stylu z zielonym kolorowego tekstu.

Answer 5

Poprzednie odpowiedzi proponowały rozwiązanie oparte na keyup lub blur. Ten wykorzystuje zdarzenie click przycisku listy, aby zminimalizować ilość wywołań funkcji:

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')); 
}); 
​