jQuery .html() 打破 Summernote

Question

我正在构建一个使用 Bootstrap 模态的系统，它从隐藏的 Div 中提取内容并将其添加到 bootstrap 模态中的 modal-body 类。

问题是，当我通过 .html() 加载它时，它会杀死 Summernote 编辑器上的工具栏，但是，快捷方式可以工作。

JSFiddle

以下是部分代码：

代码

	$(".home-options a").click(function() {
	  var _modal = $('#homeOptionModal');
	  var _this = $(this);
	  var _header = _this.find("h1").text();
	  var _tcontent = _this.find(".option-content").html();
	  _modal.modal('show');
	  _modal.find(".modal-title").html(_header);
	  _modal.find(".modal-body").html(_tcontent);
	});
	$('.summernote').summernote({
	  toolbar: [
	    // [groupName, [list of button]]
	    ['style', ['bold', 'italic', 'underline', 'clear']],
	    ['font', ['strikethrough', 'superscript', 'subscript']],
	    ['para', ['ul', 'ol', ]]
	  ]
	});

.modal-dialog {
  margin: 80px auto;
}
.modal-content {
  border: 5px solid #2A9CFF;
  border-radius: 0px;
}
.option-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<div class="row home-options">
  <div class="modal fade" id="homeOptionModal" tabindex="-1" role="dialog" aria-labelledby="homeOptionModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="homeOptionModalLabel"></h4>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="col-xs-12 col-sm-6">
    <div class="option-square">
      <h1>Click me</h1>
      <div class="option-content">
        <div class="form-group">
          <input type="text" placeholder="Full Name" class="form-control" id="fullname" value="" />
        </div>
        <div class="form-group">
          <input type="text" placeholder="What's your current job?" class="form-control" id="job" value="" />
        </div>
        <div class="form-group">
          <input type="text" placeholder="What city are you in?" class="form-control" id="location" value="" />

        </div>
        <div class="form-group">
          <textarea class="summernote" placeholder="Tell us a little more about yourself. What makes you tick?" id="bio">Content goes here</textarea>
        </div>
      </div>
    </div>
  </a>
</div>

如您所见，工具栏只是中断并且不与文本交互。我尝试了多种方法，但它似乎死了。

我也在 Modals 中网站周围的多个文本区域中使用 Summernote。

任何帮助将不胜感激。

Answer 1

当您将 HTML 复制到 .modal-body 时，您只复制了 HTML，您需要 Summernote 的 JavaScript 事件。我认为最好在复制之后发送 Summernote 事件，如下所示：

$(".home-options a").click(function() {
    var _modal = $('#homeOptionModal');
    var _this = $(this);
    var _header = _this.find("h1").text();
    var _tcontent = _this.find(".option-content").html();
    _modal.modal('show');
    _modal.find(".modal-title").html(_header);
    _modal.find(".modal-body").html(_tcontent);

    $('.summernote', _modal).summernote({
      toolbar: [
        // [groupName, [list of button]]
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['para', ['ul', 'ol',]]
      ]
    });
});

JS Fiddle