0

我有一个 html 模板，用于使用 Summernote 动态创建表单字段。一旦将克隆的模板添加到表单中，该工具似乎无法正常工作？任何人都可以建议我缺少什么以及是否有其他解决方法？

我的 JS 代码如下

$(document).ready(function () {


        bookIndex = 0;

        $('.addButton').click(function() {
            bookIndex++;
            var template = $('#bookTemplate'),
                clone    = template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id');
             $('#bookForm').append(clone)                   ;

        });

        $('textarea').summernote();


    });

html是：

 <form id="bookForm" method="post" class="form-horizontal">
        <div class="form-group">
            <label class="col-xs-1 control-label">Book</label>
            <div class="col-xs-4">
                <textarea type="text" class="form-control" name="title[]" placeholder="Title" ></textarea>
            </div>

        </div>
        </form>
    <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
     <div class="form-group" id="bookTemplate">
            <div class="col-xs-4 col-xs-offset-1">
                <textarea type="text" class="form-control" name="title[]" placeholder="Title" ></textarea>
            </div>
      </div>

完整代码和相应的输出如下：http: //jsbin.com/jogema/edit ?html,js,output

4

1 回答 1

3

我知道这已经晚了，但希望它会帮助别人。

看起来问题是您已经初始化了要克隆的文本区域。相反，您需要将模板 HTML 复制到您的代码中，然后初始化 Summernote。

这是您的 jsbin 中的工作 js：

$(function() {

  $("#add_field_button").click(function (e) {
      var newProd = $('#prod_form_template')
              .clone()
              .removeClass('hide')
              .removeAttr('id')
              .appendTo('#prod_list');
       $('#prod_list').append(newProd);
       $(newProd).summernote();

  });

  $('#prod_list textarea').summernote();

});

和jsbin：

http://jsbin.com/xevenisacu/1/edit?html,js,输出

更新

如果你确实需要克隆一个初始化的summernote编辑器，你也可以这样做，但你需要先销毁并删除标记：

// first get rid of the summernote editor

$('#container').find('.summernote').summernote('destroy');

// next remove the extra code created by summernote

$('#container').find('.note-editor').remove();

// finally, remove the summernote element itself

$('#container').find('.summernote').remove();

// clone the template

$('#container').append($('.template.summernote').clone());

// initialize summernote

$('#container').find('.summernote').summernote();
于 2016-08-23T18:16:55.020 回答