个人中心
gpt4 book ai didi

SpringBoot整合UEditor的示例代码

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章SpringBoot整合UEditor的示例代码由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

当前开发项目涉及到富文本框，了解了不少富文本编辑器之后，最终决定使用度娘的ueditor。原因：功能强大，并且自带适配java后端的图片和视频上传.

项目地址 。

不多说，上一下该项目的地址： http://ueditor.baidu.com/website/ 。

简书不支持markdown其他站点的外链很遗憾 。

整合过程 。

后端改造 。

因为项目使用的springboot框架，而ueditor对于java后端的支持仅仅是给了一个jsp文件。因此，需要对该文件进行一下处理，修改为面向springboot的统一controller.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@controller
@transactional
@requestmapping ( "/static/common/ueditor/jsp" )
public class jspcontroller {
   @requestmapping ( "/controller" )
   @responsebody
   public void getconfiginfo(httpservletrequest request,httpservletresponse response){
     response.setcontenttype( "application/json" );
     string rootpath = request.getsession().getservletcontext()
         .getrealpath( "/" );
     try {
       string exec = new actionenter(request, rootpath).exec();
       printwriter writer = response.getwriter();
       writer.write(exec);
       writer.flush();
       writer.close();
     } catch (ioexception | jsonexception e) {
       e.printstacktrace();
     }
   }

如上所述，该项目即支持来自/static/common/ueditor/jsp/controller的上传请求了.

前端请求 。

在前端添加ueditor支持。即：将整个uediotr包进行项目引入，并且在使用该控件的地方进行js的导入.

项目引入，我的对应代码结构如下:

SpringBoot整合UEditor的示例代码

页面引入，引入对应代码如下:

?
1
2
<script type= "text/javascript" charset= "utf-8" th:src= "@{/static/common/ueditor/ueditor.config.js}" ></script>
   <script type= "text/javascript" charset= "utf-8" th:src= "@{/static/common/ueditor/ueditor.all.js}" ></script>

实例化ueditor编辑器即可，下面是我的初始化参数，仅做参考.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//实例化编辑器
   var ue = ue.geteditor( '' +id,{
     toolbars: [
       [
         'fontfamily' , //字体
         'fontsize' , //字号
         'undo' , //撤销
         'redo' , //重做
         '|' ,
         'emotion' , //表情
         'forecolor' , //字体颜色
         'backcolor' , //背景色
         'bold' , //加粗
         'underline' , //下划线
         'strikethrough' , //删除线
         '|' ,
         'justifyleft' , //居左对齐
         'justifyright' , //居右对齐
         'justifycenter' , //居中对齐
         '|' ,
         'link' , //超链接
         'unlink' , //取消链接
         'simpleupload' , //单图上传
         'insertimage' , //多图上传
         //'music', //音乐
         //'insertvideo', //视频
         'removeformat' , //清除格式
         'formatmatch' , //格式刷
         'source' , //源代码
       ]
     ],
     enableautosave: false ,
     autoheightenabled: true ,
     autofloatenabled: true ,
     initialframewidth:width,
     initialframeheight:height,
     scaleenabled: true //滚动条
   });

此时，访问我们的页面就会看到富文本框了.

不过，此时会提示我们后台配置文件出错，无法实现上传功能 。

实现上传功能 。

修改config.js文件，对应的全局请求路径。该请求是为了获取config.json对应的配置数据。可以在controller里面直接返回配置信息或者在controller里面进行json文件的读取。我这里使用的是读取配置文件的方式，使用ueditor自带的方法，文章开头已经实现，这里贴一下需要修改的请求:

SpringBoot整合UEditor的示例代码

完成以上配置之后，再次加载ueditor的页面，其中上传图片的按钮即可完成图片的上传了.

注意：如果开始调试模式，加入断点，测试加载json串的时候。会出现超时错误。暂时没从配置文件里面找到配置字段。所有，这里需要注意，假如一切配置均无问题，但是依然返回后台配置错误的话，可以把断点全部取消掉试一试.

注意：上传需要加入上传组件，此处使用fileuoload 。

?
1
2
3
4
5
<dependency>
       <groupid>commons-fileupload</groupid>
       <artifactid>commons-fileupload</artifactid>
       <version> 1.3 </version>
     </dependency>

使用servlet实现上传 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
  * 尝试使用servlet来实现ueditor
  *
  * @author onywang
  * @create 2018-02-05 2:40
  **/
@webservlet (name = "ueditorservlet" , urlpatterns = "/static/common/ueditor/ueditor" )
public class ueditorcontrollerservlet extends httpservlet {
   @override
   protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
     request.setcharacterencoding( "utf-8" );
     response.setheader( "content-type" , "text/html" );
     printwriter out = response.getwriter();
     servletcontext application= this .getservletcontext();
     string rootpath = application.getrealpath( "/" );
 
     string action = request.getparameter( "action" );
     string result = new actionenter( request, rootpath+ "web-inf/classes" ).exec();
     if ( action!= null &&
         (action.equals( "listfile" ) || action.equals( "listimage" ) ) ){
       rootpath = rootpath.replace( "\\" , "/" );
       result = result.replaceall(rootpath, "/" );
     }
     out.write( result );
   }
 
   @override
   protected void doget(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
     dopost(req, resp);
   }

采用servlet的方式，新建一个注解式的servlet即可.

需要在main方法里面加入@servletcomponentscan注解.

修改ueditor默认访问路径.

注意：springboot下面，所有的资源文件都是放在classes下面的，所有，对于路径的处理一定要加倍小心。放在增加路径web-inf/classes 。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://www.jianshu.com/p/241b2a401e32 。

最后此篇关于SpringBoot整合UEditor的示例代码的文章就讲到这里了,如果你想了解更多关于SpringBoot整合UEditor的示例代码的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： Java线程池FutureTask实现原理详解
文章推荐： Javascript Validation for email(正则表达式) 英文翻译
文章推荐： xcode8 关闭控制台不打印信息的解决方法(图文详解)
文章推荐： 学php正则！超基础简单例子
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com