Question

嘿朋友，请原谅我的英语，我正在从事一个项目，需要在一行中插入一个引导网格列（紧接在最后一栏）在summernote中，并且有一些引导行列，它已经存在于来自数据库的summernote编辑器中。

我对jquery部分有点困惑。请帮助我。请查看以下代码：

<a class="btn btn-warning btn-sm text-dark" href="javascript:void;" id="inserGridWithOption"><i class="fa fa-th"></i> Insert Grid</a>

<textarea class="form-control summernote" rows="6" placeholder="Enter product short summery or description" name="homerow6col1" id="homerow6col1">
 <div class="row">
  <div class="col-md-4">
   <p class="text-center border p-3 ReasonToBuyBlockEntry">
    This is column - 1
   </p>
  </div>
  <div class="col-md-4">
   <p class="text-center border p-3 ReasonToBuyBlockEntry">
    This is column - 2
   </p>
  </div>
 </div>
</textarea>

<script>
 $('#inserGridWithOption').click(function(){
  var markupStr = '<div class="col-md-4"> <p class="text-center border p-3 ReasonToBuyBlockEntry"> This is a new column.</p></div>';
  var res = $('#homerow6col1').summernote('code');
  $('#homerow6col1').summernote('code', res + markupStr );
 });
</script>

我想要的是它每隔现有行插入或添加一列单击“插入网格”按钮的时间。看到结果/输出应该是例如下面的代码，其中我用一些突出显示了所需的输出 “ ####”：

<textarea class="form-control summernote" rows="6" placeholder="Enter product short summery or description" name="homerow6col1" id="homerow6col1">
 <div class="row">
  <div class="col-md-4">
   <p class="text-center border p-3 ReasonToBuyBlockEntry">
    This is column - 1
   </p>
  </div>
  <div class="col-md-4">
   <p class="text-center border p-3 ReasonToBuyBlockEntry">
    This is column - 2
   </p>
  </div>
  ######## Following code should be inserted########
  <div class="col-md-4">
   <p class="text-center border p-3 ReasonToBuyBlockEntry">
    This is a new column.
   </p>
  </div>
  ######## Above code should be inserted ########
 </div>
</textarea>

如何在summernote编辑器中插入bootstrap col，我想将其添加到来自数据库的数据中

0 个答案: