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