Question

我将contenteditable div作为文本编辑器

所需的功能是用户在文本编辑器中写入或复制/粘贴的任何内容都会变成复选框

例如

案例1

如果用户编写以下内容

测试1（输入按键）

测试2（输入按键）

测试3（输入按键）

那么 Test1 ， Test2 ， Test3 应分别有三个复选框

并且

情况2

当用户写

时

Parent1（输入按键）

Test1（输入按键）
Test2（输入按键）
Test3（输入按键）

在上述情况下，将有4个复选框parent1和3 li's

我已经取得的成就，但如果更准确，我愿意接受新的方式。

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

this overload

基本上应该在复选框中创建一个新的span，div，br标签或者这个标签。

如果有任何不同的方法可以满足创建复选框的要求/基本要求，那么非常欢迎。

Answer 1

这是一个可能的解决方案。我已经对最里面的文本元素进行了遍历，然后将其转换为复选框。

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

这是小提琴： http://jsfiddle.net/wLrfqvss/6/

希望这就是你要找的东西。

如果您希望仅对某些元素进行此操作，您可以随时添加支票：

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

在上面的代码中。

Answer 2

你可以使用模板复选框而不是硬编码html

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

代码

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

这也将为您提供使用任何html模板的灵活性，因为代码不是特定于控件的

Answer 3

几乎每个人都对第一个问题的答案给出了答案，但我找到了第二个案例的答案我在显示CHECKBOX

的点击事件中添加了这两行

我猜@arthi sreekumar也让我li's进入checkbox Upvote。

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

如何使用*(space)生成li？我使用正则表达式和进程字符串来生成它。

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

以下是jsfiddle

Answer 5

你好我改变你的js代码如下，

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

我希望它能像你一样寻找......

将段落或新元素转换为复选框

5 个答案: