SpringMVC + summernote实现可视化编辑器

零到壹度

发布时间：2018-04-02 17:36:04

4026人浏览过

来源于php中文网

原创

本篇文章给大家分享的是SpringMVC + summernote实现可视化编辑器的操作详解，内容挺不错的，希望可以帮助到有需要的朋友。本次着重讲解一下springmvc框架下的集成 summernote编辑器：如下

该编辑器跟知乎平台上编辑器类似，可以自己在JS控制文件中进行相关控件的控制。

与目前官网版本方法基本一致首先，关于summer可视化编辑器，官网是https://summernote.org/

本次解决的问题是：

在编辑器中上传图片时，需要重写该js中的onImageUpload的方法，但在百度和广大平台上，因为很多人用的summernote版本过老，导致本人做的过程中出现了很多问题，最后在官网的API 和 demo 、GitHub上得以解决，非常感谢乐于分享的你们！
在编辑器中上传图片后，如果图片上传后不想要，或者想要替换图片，删除编辑框中的图片时，同步删除本地文件中上传的图片。（解决方法是：在summernote控制文件中，在removeMedia该方法下加入AJAX对后台指定url，发送该图片名，若本地资源有该文件，则删除）

接下来，我们一步一步来讲解一下如何配置上的summernote编辑器，和如何重写它的相关方法

Section 1：安装和下载配置summernote可视化编辑器

打开官网，如图

该编辑器比较简洁，易用，如果喜欢功能强大和复杂一些的可以考虑一下百度团队的UE或者UM。

我们选择上面的Getting started

来获取该编辑器所需要加载的文件，你可以通过多种方式进行加载，本人采用的是直接下载配置

当然，也可以直接使用下cdn

该页面有相关的demo和基础API，自己参考一下即可

HiShop网店代理分销系统

Hishop.5.2.BETA2版主要更新： [修改] 进一步优化了首页打开速度 [修改] 美化了默认模板 [修改] 优化系统架构,程序标签及SQL查询效率,访问系统页面的速度大大提高 [修改] 采用了HTML模板机制,实现了前台模板可视化编辑,降低模板制作与修改的难度. [修改] 全新更换前后台AJAX技术框架,提升了用户操作体验. 店铺管理 [新增] 整合TQ在线客服 [修改] 后台广告位增加

下载

到这里，我们的相关summernote安装已经完成，接下来你可以选择直接使用demo进行一波骚操作了

下面，我们来讲解一下如何与springmvc项目进行整合

Section 2：整合springmvc

下面，首先我们打开自己项目，直接将相关的HTML代码放在自己的视图层即可，通过路径访问该视图，本人的为：

JavaScript相关代码为：（callbacks为重新函数，具体请参看summernote.js核心文件，拉到最下面）

    	$("#summernote_1").summernote({
		      //height:500 //不建议填写，如果上传图片高度比较大，编辑器则不会自动调整高度的
		      focus:true,  //启动时自动获取焦点
		      maxHeight:null,  //编辑器最大高度
		      minHeight:500,//编辑器最小高度，会跟随内容和图片大小自动调整编辑器高度
			}
	});

在我这JS加载的文件一共有3个：