前端 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);})

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

summernote富文本编辑器基本使用
summernote富文本编辑器的基本使用一.简介二.下载: 三.基本使用: 1.引入js/css 2.建立一个div 3.用 js初始化操作 4.上传图片的Controller 5.过去编辑器内 ...
vue+summernote富文本编辑器
vue+summernote富文本编辑器最近项目中有新增编辑报告的需求需使用富文本编辑器,在网上找了几篇相关博客,于是选择了summernote ,summernote是一款轻量级的富文本编辑器,比 ...
summernote富文本编辑器的基本使用
summernote富文本编辑器的基本使用(一) 本文主要是跟官网的一些翻译,也锻炼下英语水平.原英文网址http://summernote.org/getting-started/ 基础API 初始 ...
summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传前言一.自定义上传附件按钮和弹窗二.结合PHP上传文件进行后端处理三.用jq模拟点击添加链接方式去处理上传附件前言 summernote的上传 ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...
Django使用summernote富文本编辑器，完整前后端
今天项目中要使用summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 &l ...
Django中summernote富文本编辑器完整前后端
summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 Summernote ...
summernote富文本编辑器
一.文档二.使用四.他山之石一.文档官网地址 https://summernote.org/ github https://github.com/summernote/summernote 选 ...
js显示PHP源代码命令,layedit富文本编辑器中如何添加显示源码功能（代码）
本篇文章给大家带来的内容是关于layedit 富文本编辑器中如何添加显示源码功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 由于项目需要用到富文本编辑器,并且要有显示源码 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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