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

时间:2019-02-11 23:30:36

标签: jquery html summernote

  

嘿朋友,请原谅我的英语,我正在从事一个项目,   需要在一行中插入一个引导网格列(紧接在   最后一栏)在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>

0 个答案:

没有答案