Contenuto HTML5 paragrafo modificabile dopo la lista

Question

Io uso Google Chrome.

Ho bisogno di avere un editor HTML molto piccolo e ho trovato Simple Edit. Editor molto piccolo, solo per le mie esigenze. Tuttavia ... Questo e molti altri editor che usano Content Editable hanno un problema comune.

Problema

Dopo la creazione di un elenco (premere invio due volte sulla voce ultimo elenco), si crea un nuovo div. Mi aspettavo di creare un nuovo tag di paragrafo.

Link

• Prova l'editor qui:http://files.inlovewithcss.com/simple-edit/
• un'occhiata al codice sorgente di piccolo:https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

Domanda

Qual è il modo corretto di impedire i div e invece aggiungere tag di paragrafo dopo un elenco?

Answer 1

La risposta inviata da Bryan Allo non ha tenuto conto del fatto che è necessario posizionare il cursore alla fine del div. Altrimenti su ogni azione di sostituzione l'utente dovrebbe premere CTRL-Fine.

Questa è la soluzione che propongo, anche per essere visto in azione a 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

Una soluzione rapida è semplicemente sostituire qualsiasi DIV con Ps. Inseriscilo nel tuo DIV modificabile del contenuto.

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

Spero che sia d'aiuto. In bocca al lupo.

Answer 3

Invece di elaborazione on-the-vola con ogni evento keyup, si potrebbe prendere in considerazione di post-elaborazione:

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

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

Answer 4

Il meglio che ho potuto venire con era di usare formatblock which has compatibility issues. In sostanza si potrebbe aggiungere un altro link in questo modo:

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

...

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

Questo offre agli utenti la possibilità di inserire un tag di paragrafo. Uscire da quel tag è un po 'complicato, quindi ha anche alcuni problemi di usabilità.Si può giocare con essa sul demo fornito:

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

* notare che i paragrafi sono arredate con testo di colore verde.

Answer 5

Le risposte precedenti hanno proposto una soluzione basata su keyup o blur. Questo si usa l'evento click del pulsante lista di ridurre al minimo la quantità di chiamate di funzione:

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