UEditor编辑器小扩展

Wesley13
• 阅读 472

项目中使用UEditor编辑器作为富文本编辑器,用起来挺好。但随着文件服务器的搭建,项目中图片文件以及其它一下小文件被独立存储之后,UEditor用起来就不那么爽了。

如果不做点改动的话,所有通过UEditor上传的文件,还是存储在项目中的/ueditor/jsp/upload/目录下(默认配置),无法和文件服务器配合使用。

所以改动是必然的,具体操作步骤如下:

1、找切入点。

      ueditor.config.js中配置了服务器统一请求接口路径。这个就是突破口。

UEditor编辑器小扩展

    这个controller.jsp究竟是个啥东东,打开一看便知:

UEditor编辑器小扩展

由上面划红线的代码可以看出,其实真正的“幕后黑手”是 com.baidu.ueditor.ActionEnter (ueditor-1.1.1.jar中,源码官网下载的源码包中也有)。

2、打开com.baidu.ueditor.ActionEnter,你就发现invoke方法中统一了文件上传和列表显示文件的类和方法。

UEditor编辑器小扩展

3、由以上两点可以看出,只需要从ActionEnter,Uploader,FileManager这三个类入手即可。

     接着追踪代码,结合搞这个扩展的出发点(从UEditor中分离文件存储和文件访问),发现只需要把怎样获取表单中提交的文件流,如何存储文件,如何访问文件,这三个问题搞定即可。

结合ueditor的源码,定义了如下接口:

package net.viservice.editor.ueditor;

import javax.servlet.http.HttpServletRequest;

import net.viservice.editor.MultipartFile;

import com.baidu.ueditor.define.State;

public interface UeditorService {

    /**
     * 获取上传的文件
     * 
     * @param filedName
     *            参数名
     * @param request
     * @return
     */
    public MultipartFile getMultipartFile(String filedName, HttpServletRequest request);

    /**
     * 存储文件
     * 
     * @param multipartFile
     * @param maxSize
     * @return
     */
    public State saveFileByInputStream(MultipartFile multipartFile, long maxSize);

    /**
     * 存储文件
     * 
     * @param data
     * @param fileName
     * @return
     */
    public State saveBinaryFile(byte[] data, String fileName);

    /**
     * 获取文件列表
     * 
     * @param allowFiles
     *            允许显示的文件
     * @param start
     *            起始位置
     * @param pageSize
     *            每页显示条数
     * @return
     */
    public State listFile(String[] allowFiles, int start, int pageSize);
    
}

这样就分离了文件的存储和访问。可以自由实现UeditorService接口,完成自己的应用与文件服务器或者云存储服务的结合了。

详细的代码放在:http://git.oschina.net/xiangzi/ueditor-extend

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
2年前
ssm项目中ueditor富文本编辑器的使用
一、下载 https://ueditor.baidu.com/website/index.html  将ueditor放到项目中合适的位置  !(https://oscimg.oschina.net/oscnet/429e83cb838b1eb4ed6dd0d348481174948.png)二、配置文件上传路径   在utf8js
Easter79 Easter79
2年前
Spring之WebSocket
初次学习WebSocket。在本次写的WebSocketDemo里使用到了如下插件(技术):1.百度的富文本编辑器:http://ueditor.baidu.com/website/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fueditor.baidu.com%2Fwebsit
Wesley13 Wesley13
2年前
ueditor源代码重点难点分析
网上好像几乎没有研究ueditor源码的文章,原因可能是ueditor源码太复杂了,接近浏览器代码和word/excel源码。本文分析ueditor源码整体流程逻辑以及重点难点细节。首先,编辑器是如何实现输入的?本人开始始终不得其解,在源码找不到输入事件绑定的处理函数,后来在白云峰同学的提醒下才顿悟,整个iframe网页就相当于是一个<textarea
Wesley13 Wesley13
2年前
Neditor 富文本编辑器介绍
Neditor富文本编辑器介绍Neditor是我们团队基于Ueditor的一款富文本编辑器。不论从功能还是从其它各方面来讲,Ueditor都是一款无以替代的编辑器产品。只是已经不符合现代化样式的需求,于是我们修改它的样式,实现了这样的效果:!image(https://www.notadd.com/s
Wesley13 Wesley13
2年前
UEditor编辑器
1.UEditor编辑器官网:http://ueditor.baidu.com/website/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fueditor.baidu.com%2Fwebsite%2F)2.下载文件:选择  1.4.3.3.Net版本UTF8板!(h
Wesley13 Wesley13
2年前
ueditor1.4.3 springmvc图片上传
ueditor:百度富文本编辑器,地址:ueditor.baidu.com版本选择,之所以选择1.4.3,是因为ueditor1.4.2才修复在bootstrap环境下图片拖拽异常,看到1.4.3也修复了不少的bug,没敢使用1.4.2,稍微看了下源码,1.4.3里面很多todo注释,ueditor一直在改进,不太成熟,既然这么多bug,为什么要选ue
Wesley13 Wesley13
2年前
UEditor使用说明
UEditor使用说明UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码。 !(https://oscimg.oschina.net/oscnet/c5da02e392bca54c54520b8f38d0b
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这