前端 summernote富文本编辑器 点击文章预览的功能实现

  一般如果要在网页项目中使用文章编辑器的话,都会考虑summernote富文本编辑器,毕竟使用简便,而且是开源的,一般的用法就是:

    <div class="form-group">	
	<label class="col-sm-3 control-label">公告内容：</label>
		<div class="col-sm-8">
			<input id="noticeContent" name="noticeContent" type="hidden">
			<div class="summernote"></div>
			</div>
		</div>
			
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
    <script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
    <script th:inline="javascript">
        $('.summernote').summernote({
		height : '220px',
		lang : 'zh-CN'
	});
		
    </script>

    效果如下:

   

    现在有一个问题就是一般文章显示的是一个列表,如下,需要点击某一个进行预览,所以就要将summernote保存的内容显示出来:

 //点击行数据时,进入预览界面,2018年7月11日11:18:12
   $("#bootstrap-table").on("click-row.bs.table",function(e, row, $element){
	 console.log("表格的行点击事件,序号是:"+row.noticeId);
   })

   这里使用的是bootstrap_table控件,监听每一行的点击事件,然后使用div的apped方法,将summernote保存的内容,从数据库中读取出来blob数据类型,放在html标签中显示出来,如下:

 <div class="form-group">	
         <label class="col-sm-3 control-label">内容：</label>
          <div class="col-sm-8" id="preview_content">  
            <input id="noticeContent" name="noticeContent" th:field="*{noticeContent}" type="hidden">
                   
         </div>
</div>

var content = $("#noticeContent").val();
			
//点击预览,将summbernote保存在数据库的blob类型显示出来,2018年7月11日10:22:24
$("#preview_content").append(content);

   注:

   1.summernote的编辑内容我是直接全部保存在数据库中,使用longblob类型.关键点是使用jquery的apped将保存的html样式显示出来即可.

   2.如果你在表格中,添加了编辑或者删除按钮,点击行的事件会有重叠,暂时没想到好的方式,就改成了双击行,查看预览内容,如下:

  //点击行数据时,进入预览界面,2018年7月11日11:18:12
  $("#bootstrap-table").on("dbl-click-row.bs.table",function(e, row, $element){
			 
	console.log("表格的行点击事件,序号是:"+row.noticeId); 
	 var url=prefix + "/preview/"+row.noticeId;
	$.modal.openFull("预览" + $.table._option.modalName, url);
			
})