当前位置:Gxlcms > PHP教程 > SpringMVC+summernote实现可视化编辑器

SpringMVC+summernote实现可视化编辑器

时间:2021-07-01 10:21:17 帮助过:60人阅读

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


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

本次summernote版本是:/*! Summernote v0.8.1 | (c) 2013-2015 Alan Hong and other contributors | MIT license */

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

本次解决的问题是:

  1. 在编辑器中上传图片时,需要重写该js中的onImageUpload的方法,但在百度和广大平台上,因为很多人用的summernote版本过老,导致本人做的过程中出现了很多问题,最后在官网的API 和 demo 、GitHub上得以解决,非常感谢乐于分享的你们!

  2. 在编辑器中上传图片后,如果图片上传后不想要,或者想要替换图片,删除编辑框中的图片时,同步删除本地文件中上传的图片。(解决方法是:在summernote控制文件中,在removeMedia该方法下加入AJAX对后台指定url,发送该图片名,若本地资源有该文件,则删除)

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

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

打开官网,如图


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

我们选择上面的Getting started

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


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

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

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

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

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

Section 2:整合springmvc

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

JavaScript相关代码为: (callbacks为重新函数,具体请参看summernote.js核心文件,拉到最下面)

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

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

zh-CN为中文文件,如果需要转换语言,注意在下载的lang文件夹中取出,进行加载,并在summernote.js或summernote.min.js中 将最后的代码


改成自己需要的语言文件的简介即可。

在这里我们就已经把该编辑器放入自己的项目中了

Section 3:引入相关jar包、配置springmvc.xml核心文件

  1. 首先我们需要把下面两个jar放到我们项目的lib目录下

  2. 配置springmvc文件

<!-- 配置MultipartResolver -->
     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
     	<!-- property 一共有4个属性
     	maxUploadSize 上传的最大字节数,-1代表没有任何限制
     	maxInMemorySize 读取文件到内存中最大的字节数,默认是1024
     	defaultEncoding 文件上传头部编码,默认是iso-8859-1,注意defaultEncoding必须和用户的jsp的pageEncoding属性一致,以便能正常读取文件
     	uploadTempDir文件上传暂存目录,文件上传完成之后会清除该目录,模式是在servlet容器的临时目录,例如tomcat的话,就是在tomcat文件夹的temp目录
     	 -->
     	<property name="defaultEncoding" value="UTF-8"></property>
     	<property name="maxUploadSize" value="15728640"></property> <!-- 15MB -->
     </bean>

然后我们就开始在我们的control层/Action控制文件中编写相关上传图片的执行代码了

以上就是SpringMVC + summernote实现可视化编辑器的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行