ueditor搭建图片服务器

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

最近用使用富文本编辑器，之前一直使用kindeditor和eWebEditor来着，有同事给推荐说使用百度推出的Ueditor，所以咯，自己新项目就将它引进来了，这里说一下心得，

说实话，Ueditor的官网文档真的一般，但是还是能让人看懂的，只不过有些地方写法实在操蛋。不过简单的上手还是很容易的，好了，废话不多说，直接上干货。

一、简单的使用

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<script type="text/javascript" charset="utf-8" src="${ctx}/scripts/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/scripts/ueditor/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="${ctx}/scripts/ueditor/lang/zh-cn/zh-cn.js"></script> <html>
<head>
<title>功能管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
var ue;
// 初始化函数
$(document).ready(function() {
mini.parse();
ue = UE.getEditor('container', {
serverUrl: "${ctx}/system/authority/getImgServer.ac",
toolbars: [
[
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'fontborder', //字符边框
'formatmatch', //格式刷
'source', //源代码
'horizontal', //分隔线
'removeformat', //清除格式
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'selectall', //全选
'print', //打印
'preview', //预览
'paragraph', //段落格式
'horizontal', //分隔线
'simpleupload', //单图上传
'insertimage', //多图上传
'removeformat', //清除格式
'date', //日期
'time', //时间
'link', //超链接
'unlink', //取消链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'imagecenter', //居中
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'touppercase', //字母大写
'tolowercase', //字母小写
'autotypeset', //自动排版
]
],
autoHeightEnabled: true,
autoFloatEnabled: true
}); }); </script>
</head>
<body> <script id="container" name="describes" type="text/plain" style="width:100%;height:350px;"></script> </body>
</html>

简单功能实现

通过代码片段可以看到

这句话中 name的名字为describes 那么表单提交的话，提交到后台，只需要获取这个describes参数就可以拿到前台传递到后台的富文本内容了，

如果项目是使用struts2的框架的话，则只需要再后台的action中写一个叫describes的属性，富文本内容就被自动注入到这个属性中了。

ok，拿到前台提交过来的值后，就不需要我在说了吧，各种增删改查还不是随自己的心意去写咯。

二、搭建图片服务器后台

在上述代码中可以看到，在初始化编辑器的时候有这么一句话

serverUrl: "${ctx}/system/authority/getImgServer.ac",

这句话是重写了它验证后台是否符合他的要求的路径。

默认他会调用jsp/controller.jsp这个路径

我这里贴一下我后台处理的代码

package cfs.system.authority.action; import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLDecoder;
import java.util.UUID; import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import cfs.coom.action.BaseEditAction;
import cfs.core.constant.CfsConstant;
import cfs.core.util.Util; public class AuthorityAction extends BaseEditAction{
private static final long serialVersionUID = 1L;
//图片服务器接收跳转使用的action
private String action;
//上传的图片
private File upfile;
//上传图片名称
private String upfileFileName;
//上传图片类型
private String upfileContentType; /**
* 获取上传的图片
*
* @return 上传的图片
*/
public File getUpfile() {
return upfile;
} /**
* 设置上传的图片
*
* @param upfile 上传的图片
*/
public void setUpfile(File upfile) {
this.upfile = upfile;
} /**
* 获取上传图片名称
*
* @return 上传图片名称
*/
public String getUpfileFileName() {
return upfileFileName;
} /**
* 设置上传图片名称
*
* @param upfileFileName 上传图片名称
*/
public void setUpfileFileName(String upfileFileName) {
this.upfileFileName = upfileFileName;
} /**
* 获取上传图片类型
*
* @return 上传图片类型
*/
public String getUpfileContentType() {
return upfileContentType;
} /**
* 设置上传图片类型
*
* @param upfileContentType 上传图片类型
*/
public void setUpfileContentType(String upfileContentType) {
this.upfileContentType = upfileContentType;
} /**
* 获取图片服务器接收跳转使用的action
*
* @return 图片服务器接收跳转使用的action
*/
public String getAction() {
return action;
} /**
* 设置图片服务器接收跳转使用的action
*
* @param action 图片服务器接收跳转使用的action
*/
public void setAction(String action) {
this.action = action;
} /**
* 读取某个文件夹下的所有文件
*/
public String readfile(String filepath) throws Exception {
String name="";
File file = new File(filepath);
if (!file.isDirectory()) {
System.out.println("文件");
System.out.println("path=" + file.getPath());
System.out.println("absolutepath=" + file.getAbsolutePath());
System.out.println("name=" + file.getName()); } else if (file.isDirectory()) {
String[] filelist = file.list();
for (int i = 0; i < filelist.length; i++) {
File readfile = new File(filepath + "\\" + filelist[i]);
if (!readfile.isDirectory()) {
name += readfile.getName()+"=|="; }else if (readfile.isDirectory()) {
continue;
}
} } return name;
} /**
* 验证图片服务器是否存在.
*
* @Title: getImgServer
* @author lmoran@163.com
* @return
* @throws Exception
*/
public String getImgServer() throws Exception{
//如果是验证后台是否正常则走此段代码
if("config".equals(action)){
JSONObject jobj = new JSONObject();
jobj.put("imageActionName", "uploadimage");
jobj.put("imageFieldName", "upfile");
jobj.put("imageMaxSize", 2048000);
jobj.put("imageAllowFiles", JSONArray.fromObject(new String[]{".png",".jpg",".jpeg",".gif",".bmp"}));
jobj.put("imageCompressEnable", "true");
jobj.put("imageCompressBorder", "1600");
jobj.put("imageInsertAlign", "none");
jobj.put("imageUrlPrefix", "");
jobj.put("scrawlActionName", "uploadscrawl");
jobj.put("scrawlFieldName", "upfile");
jobj.put("scrawlMaxSize", 2048000);
jobj.put("scrawlUrlPrefix", "");
jobj.put("scrawlInsertAlign", "none");
jobj.put("snapscreenActionName", "uploadimage");
jobj.put("snapscreenUrlPrefix", "");
jobj.put("catcherLocalDomain", JSONArray.fromObject(new String[]{"127.0.0.1","localhost","img.baidu.com"}));
jobj.put("catcherActionName", "catchimage");
jobj.put("catcherFieldName", "source");
jobj.put("catcherUrlPrefix", "");
jobj.put("catcherMaxSize", 2048000);
jobj.put("catcherAllowFiles", JSONArray.fromObject(new String[]{".png",".jpg",".jpeg",".gif",".bmp"}));
jobj.put("videoActionName", "uploadvideo");
jobj.put("videoFieldName", "upfile");
jobj.put("videoUrlPrefix", "");
jobj.put("videoMaxSize", 102400000);
jobj.put("videoAllowFiles", JSONArray.fromObject(new String[]{".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid"}));
jobj.put("fileActionName", "uploadfile");
jobj.put("fileFieldName", "upfile");
jobj.put("fileUrlPrefix", "");
jobj.put("fileMaxSize", 51200000);
jobj.put("fileAllowFiles", JSONArray.fromObject(new String[]{".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"}));
jobj.put("imageManagerActionName", "listimage");
jobj.put("imageManagerListPath", "/cfs/ueditor/upload/image/");
jobj.put("imageManagerListSize", 20);
jobj.put("imageManagerUrlPrefix", "");
jobj.put("imageManagerInsertAlign", "none");
jobj.put("imageManagerAllowFiles", JSONArray.fromObject(new String[]{".png",".jpg",".jpeg",".gif",".bmp"}));
jobj.put("fileManagerActionName", "listfile");
jobj.put("fileManagerListPath", "/cfs/ueditor/upload/file/");
jobj.put("fileManagerUrlPrefix", "");
jobj.put("fileManagerListSize", 20);
jobj.put("fileManagerAllowFiles", JSONArray.fromObject(new String[]{".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"}));
System.out.println(jobj.toString());
writeToPage(jobj.toString());
//如果是上传图片的action则跳转到上传图片方法中
}else if("uploadimage".equals(action)){
return uploadimage();
}else if("listimage".equals(action)){
return listimage();
} return null;
} /**
* 使用富文本上传图片.
*
* @Title: uploadimage
* @author lmoran@163.com
* @return
* @throws Exception
*/
public String uploadimage() throws Exception{
String type=".png";
if(upfileFileName.indexOf(".")!=-1){
type=upfileFileName.substring(upfileFileName.lastIndexOf("."));
} String name=UUID.randomUUID().toString()+type;
String url=CfsConstant.UEDITOR_UPLOAD_IMAGE+ name;
String path = getSession().getServletContext()
.getRealPath("")+url;
File file = new File(path);
if (!file.exists()) {
file.createNewFile();
}
FileOutputStream fos = new FileOutputStream(file);
InputStream imgin = new FileInputStream(upfile);
byte[] imgbyte = toByteArray(imgin);
imgin.close();
fos.write(imgbyte);
fos.close();
JSONObject jobj = new JSONObject();
jobj.put("original", name);
jobj.put("name", name);
jobj.put("url", File.separator+ "cfs"+url);
jobj.put("size", upfile.length());
jobj.put("type", type);
jobj.put("state", "SUCCESS");
writeToPage(jobj.toString());
return null;
} /**
* 富文本组件，在线管理功能.
*
* @Title: listimage
* @author lmoran@163.com
* @return
* @throws Exception
*/
private String listimage() throws Exception {
String path = getSession().getServletContext()
.getRealPath("")+CfsConstant.UEDITOR_UPLOAD_IMAGE;
String str=readfile(path);
JSONArray ja=new JSONArray();
int len=0;
if(!Util.isNullOrEmpty(str)&&!str.equals("=|=")){
str=str.substring(0,str.lastIndexOf("=|="));
String[] strs=str.split("=\\|=");
len=str.length();
String namePath=Util.getString("resource", "server_path")+"cfs"+CfsConstant.UEDITOR_UPLOAD_IMAGE;
for (String s : strs) {
JSONObject obj=new JSONObject();
obj.put("url", namePath+s);
obj.put("mtime", 1467300922);
ja.add(obj);
}
}
JSONObject jobj = new JSONObject();
jobj.put("state", "SUCCESS");
jobj.put("list", ja);
jobj.put("start", 0);
jobj.put("total", len);
writeToPage(jobj.toString());
return null;
} /**
* 将InputStream转换成byte数组.
*
* @Title: toByteArray
* @author liufei12581@sinosoft.com.cn
* @param in 字节流
* @return byte数组格式的数据
* @throws IOException
*/
public byte[] toByteArray(InputStream in) throws IOException {
ByteArrayOutputStream out = new ByteArrayOutputStream();
byte[] buffer = new byte[1024 * 4];
int n = 0;
while ((n = in.read(buffer)) != -1) {
out.write(buffer, 0, n);
}
return out.toByteArray();
} }

action

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="authority" extends="cfs-default" namespace="/system/authority"> 
<action name="getImgServer" class="AuthorityAction" method="getImgServer"></action> </package> </struts>

struts2配置文件

注意：其中action为config表示是验证后台是否符合要求的代码，需要你返回一段json

我从官网示例中测出来的json格式：http://ueditor.baidu.com/server/ueditor/controller.php?action=config&&noCache=1467768503808

{"imageActionName":"uploadimage","imageFieldName":"upfile","imageMaxSize":2048000,"imageAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"imageCompressEnable":true,"imageCompressBorder":1600,"imageInsertAlign":"none","imageUrlPrefix":"","imagePathFormat":"\/server\/ueditor\/upload\/image\/{yyyy}{mm}{dd}\/{time}{rand:6}","scrawlActionName":"uploadscrawl","scrawlFieldName":"upfile","scrawlPathFormat":"\/server\/ueditor\/upload\/image\/{yyyy}{mm}{dd}\/{time}{rand:6}","scrawlMaxSize":2048000,"scrawlUrlPrefix":"","scrawlInsertAlign":"none","snapscreenActionName":"uploadimage","snapscreenPathFormat":"\/server\/ueditor\/upload\/image\/{yyyy}{mm}{dd}\/{time}{rand:6}","snapscreenUrlPrefix":"","snapscreenInsertAlign":"none","catcherLocalDomain":["127.0.0.1","localhost","img.baidu.com"],"catcherActionName":"catchimage","catcherFieldName":"source","catcherPathFormat":"\/server\/ueditor\/upload\/image\/{yyyy}{mm}{dd}\/{time}{rand:6}","catcherUrlPrefix":"","catcherMaxSize":2048000,"catcherAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"videoActionName":"uploadvideo","videoFieldName":"upfile","videoPathFormat":"\/server\/ueditor\/upload\/video\/{yyyy}{mm}{dd}\/{time}{rand:6}","videoUrlPrefix":"","videoMaxSize":102400000,"videoAllowFiles":[".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid"],"fileActionName":"uploadfile","fileFieldName":"upfile","filePathFormat":"\/server\/ueditor\/upload\/file\/{yyyy}{mm}{dd}\/{time}{rand:6}","fileUrlPrefix":"","fileMaxSize":51200000,"fileAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"imageManagerActionName":"listimage","imageManagerListPath":"\/server\/ueditor\/upload\/image\/","imageManagerListSize":20,"imageManagerUrlPrefix":"","imageManagerInsertAlign":"none","imageManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"fileManagerActionName":"listfile","fileManagerListPath":"\/server\/ueditor\/upload\/file\/","fileManagerUrlPrefix":"","fileManagerListSize":20,"fileManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"]}

验证后台是否符合要求需要返回的json格式

其中action为uploadimage时表示图片上传，这个可以改写，上面的验证时的返回的json其实就是对下面操作的设置，但是有一点比较恶心的是貌似就几个字段设置管用其他

例如图片路径啥的都不管用，这里图片上传也需要返回一个json

我从官网示例中测出来的json格式：http://ueditor.baidu.com/server/ueditor/controller.php?action=uploadimage

{"original":"demo.jpg","name":"demo.jpg","url":"\/server\/ueditor\/upload\/image\/demo.jpg","size":"99697","type":".jpg","state":"SUCCESS"}

上传图片返回的json格式

其中action为listimage表示图片管理，这个也可以改写，和上面图片上传一样

我从官网示例中测数来的json格式：http://ueditor.baidu.com/server/ueditor/controller.php?action=config&&noCache=1467768503808

图片管理返回的json格式

目前来讲项目中只需要实现图片的功能，例如音频视频也可以设置，返回的json格式大家可以自己去官网检测一下，总体来说功能还是不错的，比较容易上手，但是官网的api实在太一般。

最后还有一点要值得注意的是：它自己有初始化的方法，和jquery的初始化方法加载的时间顺序不太一样，最好用他自己的初始化，例如我想在一个页面一加载完就禁用掉不让用户编辑

那么直接使用它自己提供的初始化数据后的事件即可，

var ue;
// 初始化函数
$(document).ready(function() {
mini.parse();
ue = UE.getEditor('container', {
serverUrl: "${ctx}/system/authority/getImgServer.ac",
toolbars: [
["fullscreen"]
],
autoHeightEnabled: true,
autoFloatEnabled: true
});
ue.addListener( 'ready', function( editor ) {
ue.setDisabled("fullscreen"); //编辑器加载完成后，禁用编辑器 } ); });

初始化时禁用编辑器脚本