konvertieren Absatz oder neue Elemente in Checkbox

Question

I contenteditablediv als Texteditor

Funktionalität benötigt haben, ist, was der Benutzer schreibt oder Kopieren/Einfügen in Texteditor verwandelt sich in Checkbox

für zB

Fall 1

Wenn Benutzer schreibt die folgende

Test1 (Taste gedrückt eingeben)

Test2

Test3 (Taste eingeben) (Enter-Taste gedrückt)

dann sollte es drei Kontrollkästchen sein für Test1, Test2, Test3 bzw.

Und

Case2

, wenn der Benutzer

Parent1 (Eingabetaste gedrückt)

• Test1 (Enter-Taste gedrückt wird)

schreibt

• Test2 (Enter-Taste gedrückt wird)

• Test3 (Taste gedrückt eingeben)

Im obigen Fall wird es 4 Checkbox sein parent1 und 3 li's

Dinge, die ich erreicht habe, aber ich bin offen, neuen Weg zu akzeptieren, wenn genauer.

$('#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

im Grunde eine neue Spanne, div, br-Tags oder dass die Angelegenheit li in Kontrollkästchen erstellt werden soll.

Wenn es eine andere Methode gibt, die sowohl die Anforderung/Grundvoraussetzung der Erstellung von Checkboxen erfüllt, ist es sehr zu begrüßen.

Answer 1

Fast jeder Antwort Antwort auf erste Fall der Frage gegeben, aber ich gefunden für die 2. Fall ich habe diese zwei Zeilen in dem Click-Ereignis von SHOW CONTENT mit CHECKBOX

ich @arthi Sreekumar denke, auch mir wird immer li's in checkbox Upvote dazu.

$('.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

Hier ist eine mögliche Lösung. Ich habe eine Traversierung zum innersten Textelement gemacht und dieses dann in eine Checkbox umgewandelt.Hier

$('#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>'); 
} 

ist die Geige: http://jsfiddle.net/wLrfqvss/6/

Hoffnung ist das, was Sie suchen.

Wenn Sie dies nur für bestimmte Elemente passieren wollen, können Sie immer einen Scheck wie so hinzufügen:

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

in dem obigen Code.

Answer 3

Wie wäre es mit *(space)li zu generieren? Ich habe Regex und Prozess-String verwendet, um es zu generieren. Hier

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

ist die jsfiddle

Answer 4

Sie Vorlage für Kontrollkästchen statt hartzucodieren html

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

in Code

$('#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) 
} 

dies wird Ihnen auch die Flexibilität der Verwendung jeder nutzen kann HTML-Vorlage, da der Code nicht steuerungsspezifisch ist

Answer 5

Hallo ich Ihre js Code ändern, wie folgt,

$('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 

Ich hoffe, seine Arbeit so etwas wie die Sie gesucht haben ..