convertire paragrafo o nuovi elementi nella casella

Question

ho contenteditablediv come editor di testo

funzionalità necessarie è tutto ciò che l'utente scrive o copia/incolla in editor di testo si trasforma in casella

per esempio

caso 1

Se l'utente scrive il seguente

Test1 (enter tasto premuto)

Test2

Test3 (ENTER tasto premuto) (tasto premuto entrare)

allora non ci dovrebbero essere tre casella di controllo Test1, Test2, Test3 rispettivamente

E

Case2

quando l'utente scrive

Parent1 (enter tasto premuto)

• Test1 (enter tasto premuto)

• Test2 (enter tasto premuto)

• Test3 (enter tasto premuto)

Nel caso sopra ci saranno 4 casella parent1 e 3 li's

preferenze che abbia raggiunto ma i Sono aperto ad accettare nuove strade se più accurate.

$('#checkbox').click(function() { 
var $p = ""; 
    var re = /\S/; 
    $p = $('.outputBox'); 
     $p.contents() 
     .filter(function() {  
     return this.nodeType == 3&& re.test(this.nodeValue);; 
    }) 
    .wrap('<label> <input type="checkbox" name="field_1" value="on" />') 
}); 

FIDDLE Demo

fondamentalmente una nuova campata, div, tag br o per quella di Li questione dovrebbe essere creato in caselle.

Se esiste un metodo diverso che soddisfi sia il requisito/requisito di base della creazione di caselle di controllo, è molto gradito.

Answer 1

Quasi tutti ha dato risposta a primo caso di domanda, ma ho trovato risposta per il 2 ° caso ho aggiunto due righe in caso di click visualizzare contenuto con checkbox

immagino Sreekumar @arthi è anche me li's sempre in checkbox Rispetto a quello.

$('.outputBox').find("ol").find("li").wrapInner(('<label style="display:block;"> <input type="checkbox" class="liolChk" name="field_1" value="on" />')); 
$('.outputBox').find("ul").find("li").wrapInner(('<label style="display:block;"> <input type="checkbox" class="liolChk" name="field_1" value="on" />')); 

Fiddle Demo

Answer 2

Ecco una possibile soluzione. Ho effettuato un attraversamento dell'elemento di testo più interno e poi lo ho convertito in una casella di controllo.

$('#checkbox').click(function() { 
    var $p = ""; 
    $p = $('.outputBox'); 
    wrapText($p); 
}); 

function wrapText(domObj) { 
    var re = /\S/; 
    domObj.contents().filter(function() { 
     if (this.nodeType === 1) { 
      wrapText($(this)); 
     } else { 
      return (this.nodeType === 3 && re.test(this.nodeValue)); 
     } 
    }) 
    .wrap('<label> <input type="checkbox" name="field_1" value="on" /></label>'); 
} 

Ecco il violino: http://jsfiddle.net/wLrfqvss/6/

La speranza è ciò che state cercando.

Se si vuole che questo accada solo per alcuni elementi, si può sempre aggiungere un controllo in questo modo:

if (this.nodeType === 1 && this.tagName === 'DIV') 

nel codice sopra.

Answer 3

Che ne dici di utilizzare *(space) per generare li? Ho usato regex e processare string per generarlo.

function update() { 
    var str = $('#inputBox').html(); 
    $('#outputBox').html(str); 
    $('#showHTML').text(str); 

    str = str.replace(/(<br>$)/,'') 
      .replace(/(<br>)/g,'$1\n') 
      .replace(/\* (.*)/g, '<li>$1</li>') 
      .replace(/^(?!<li>)/gm,'<input type="checkbox" name="field_1" value="on">') 
      .replace(/^<li>(.*)<\/li>/gm,'<li><input type="checkbox" name="field_1" value="on">$1</li>'); 

    if(str.indexOf('<li>')!=-1) { 
     var index = str.indexOf('<li>'); 
     var lastIndex; 
     str = str.substring(0, index) + '<ul>' + str.substring(index);   
     lastIndex = str.lastIndexOf('</li>') + '</li>'.length+ 1; 
     str = str.substring(0, lastIndex) + '</ul>' + str.substring(lastIndex); 
    } 
    $('#translatedBox').html(str); 
    $('#translatedHTML').text(str); 
} 

Qui è la flessibilità jsfiddle

Answer 4

è possibile utilizzare modello per casella, invece di hardcoding html

<div id="template" style="visibility:hidden"> 
<label> <input type="checkbox" name="field_1" value="on" /></label> 
</div> 

nel codice

$('#checkbox').click(function() {}); 

function createElement() 
{ 
var targetElement=$("#template").clone(true); 
targetElement.removeAttr("style"); 
targetElement.attr("name","new id"); 
var $p = ""; 
var re = /\S/; 
$p = $('.outputBox'); 
    $p.contents() 
    .filter(function() {  
    return this.nodeType == 3&& re.test(this.nodeValue);; 
}) 
.wrap(targetElement) 
} 

questo fornirà anche di utilizzare qualsiasi modello html in quanto il codice non è specifico per il controllo

Answer 5

Ciao a cambiare il codice js come seguire,

$('div[contenteditable=true]').blur(function() { 



    $('.outputBox').append('<br>').append("<input type='checkbox' value='"+$(this).html()+"' />"+$(this).html()); 
$(this).html(""); 

}); 




$('div[contenteditable=true]').keydown(function(e) { 
    //$('.outputBox').html($(this).html()); i commented this line 

spero sua qualcosa di lavoro come te stavamo cercando ..