convert paragraph or new elements into checkbox

Question

I have contenteditable div as text editor

Functionality needed is whatever the user writes or copy/paste in text editor turns into checkbox

for eg

Case 1

If User writes the following

Test1(enter key pressed)

Test2(enter key pressed)

Test3(enter key pressed)

then there should be three checkbox for Test1,Test2,Test3 respectively

And

Case2

when the user writes

Parent1 (enter key pressed)

• Test1(enter key pressed)

• Test2(enter key pressed)

• Test3(enter key pressed)

In the above case there will be 4 checkbox parent1 and 3 li's

Things i have achieved but i am open to accept new way if more 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

Basically a new span,div,br tags or for that matter li's should be created into checkboxes.

If there is any different method which will fulfill both the requirement/basic requirement of creating checkboxes it is most welcome.

Answer 1

Here is a possible solution. I have made a traversal to the innermost text element and then convert that into a checkbox.

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

Here is the fiddle: http://jsfiddle.net/wLrfqvss/6/

Hope thats what you are looking for.

If you want this to happen for only certain elements, you could always add a check like so:

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

in the above code.

Answer 2

you can use template for checkbox instead of hardcoding 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)
}

this will also provide you flexibility of using any html template as the code is not control specific