一般如果要在网页项目中使用文章编辑器的话,都会考虑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);
})