Конвертировать абзац или новые элементы в флажок

У меня contenteditable div как текстовый редактор

Необходимая функциональность - это то, что пользователь записывает или копирует/вставляет в текстовый редактор, превращается в флажок

например,

Случай 1

Если пользователь записывает следующие

Test1 (введите клавишу нажата)

Test2 (введите клавишу нажата)

Test3 (введите клавишу нажата)

тогда необходимо установить три флажка для Test1, Test2, Test3 соответственно

И

Случай 2

когда пользователь пишет

Parent1 (введите клавишу нажата)

  • Test1 (введите клавишу нажата)

  • Test2 (введите клавишу нажата)

  • Test3 (введите клавишу нажата)

В приведенном выше случае будет установлен флажок 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" />')
});

Демоверсия FIDDLE

В основном новые флажки span, div, br или, в этом случае, li должны быть созданы в флажках.

Если существует какой-либо другой метод, который будет выполнять как требование, так и основное требование создания флажков, это очень приветствуется.

Ответы

Ответ 1

Почти каждый дал ответ на первый случай вопроса, но я нашел ответ на второй случай Я добавил две строки в событие click ПОКАЗАТЬ СОДЕРЖАНИЕ с CHECKBOX

Я думаю, @arthi sreekumar также получает меня li's в checkbox. Подпишитесь на это.

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

Скриншот Демо

Ответ 2

Вот возможное решение. Я сделал обход для самого внутреннего текстового элемента, а затем преобразовал его в флажок.

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

в приведенном выше коде.

Ответ 3

вы можете использовать шаблон для флажка вместо hardcoding 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-шаблона, поскольку код не является специфичным для управления

Ответ 4

Как насчет использования *(space) для генерации li? Я использовал regex и строку процесса для ее создания.

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

Ответ 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

Я надеюсь, что он работает так, как вы искали.