extjs ueditor 图片_jfinal 整合百度编辑器ueditor

先来张效果图

一，准备工作搭建好的jfinal 项目，百度编辑器官网下载ueditor和相应的java包

二，将ueditor编辑器复制粘贴到项目目录下，我的路径是/webapp/static/plugins/ueditor

三，在ueditor中找到config.json，复制到ueditor根目录下

四，在ueditor中找到ueditor.config.js，修改里面的代码，将原来的jsp修改为自己写的controller请求路径

// , serverUrl: URL + "jsp/controller.jsp"

, serverUrl:serverURL+"/ueditor/index"

五，将百度提供的java类复制粘贴到自己的项目目录下,不需要修改任何内容，实现ueditor类的时候要用到

六，实现/ueditor/index,以下是该controller的实现类

import com.baidu.ueditor.ActionEnter;

import com.jfinal.core.Controller;

import com.jfinal.kit.Ret;

import com.jfinal.plugin.activerecord.Record;

import com.jfinal.upload.UploadFile;

import com.weixun.cms.service.SiteService;

import com.weixun.utils.ajax.AjaxMsg;

import com.weixun.utils.file.FileUtils;

import java.io.File;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.List;

public class UeditorController extends Controller {

SiteService siteService = new SiteService();

/**

* ueditor初始化方法

*/

public void index() {

// String outText = ActionEnter.me().exec(getRequest());

String rootPath = getRequest().getSession().getServletContext().getRealPath(File.separator+"static"+File.separator+"plugins"+File.separator);

String outText = new ActionEnter(getRequest(),rootPath).exec();

renderHtml(outText);

}

/**

* 获取存储到数据库中的路径

* 没有则手动指定路径

* @return

*/

private Record getpath()

{

List records =siteService.findList("");

return records.get(0);

}

/**

* 图片上传方法

*/

public void upimage()

{

AjaxMsg ajaxMsg = new AjaxMsg();

Ret ret = null;

try {

//设置文件上传子目录

String path="uploads/images/";

//获取上传的文件

UploadFile upload = getFile("upfile",path);

File file = upload.getFile();

//获取文件名

String extName = FileUtils.getFileExt(file.getName());

//获取文件上传的父目录

String filePath = upload.getUploadPath();

//时间命名文件

String fileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + extName;

//重命名原来的文件

file.renameTo(new File(filePath+fileName));

//重新组合文件路径 ip+文件目录+文件名

String fileUrl=getpath().getStr("site_domain")+File.separator+path+fileName;

// ajaxMsg.setState("success");

// ajaxMsg.setMsg(fileUrl);

ret = Ret.create("state", "SUCCESS")

.set("url", fileUrl)

.set("path",fileUrl)

.set("original", "")

.set("title",fileName);

} catch (Exception e) {

e.printStackTrace();

ajaxMsg.setState("fail");

}

renderJson(ret);

}

/**

* 视频上传方法

*/

public void upvideo()

{

AjaxMsg ajaxMsg = new AjaxMsg();

Ret ret = null;

try {

//设置文件上传子目录

String path="uploads/videos/";

//获取上传的文件

UploadFile upload = getFile("upfile",path);

File file = upload.getFile();

//获取文件名

String extName = FileUtils.getFileExt(file.getName());

//获取文件上传的父目录

String filePath = upload.getUploadPath();

//时间命名文件

String fileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + extName;

//重命名原来的文件

file.renameTo(new File(filePath+fileName));

//重新组合文件路径 ip+文件目录+文件名

String fileUrl=getpath().getStr("site_domain")+File.separator+path+fileName;

// ajaxMsg.setState("success");

// ajaxMsg.setMsg(fileUrl);

ret = Ret.create("state", "SUCCESS")

.set("url", fileUrl)

.set("path",fileUrl)

.set("original", "")

.set("title",fileName);

} catch (Exception e) {

e.printStackTrace();

ajaxMsg.setState("fail");

}

renderJson(ret);

}

/**

* 文件上传方法

*/

public void upfile()

{

AjaxMsg ajaxMsg = new AjaxMsg();

Ret ret = null;

try {

//设置文件上传子目录

String path="uploads/files/";

//获取上传的文件

UploadFile upload = getFile("upfile",path);

File file = upload.getFile();

//获取文件名

String extName = FileUtils.getFileExt(file.getName());

//获取文件上传的父目录

String filePath = upload.getUploadPath();

//时间命名文件

String fileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + extName;

//重命名原来的文件

file.renameTo(new File(filePath+fileName));

//重新组合文件路径 ip+文件目录+文件名

String fileUrl=getpath().getStr("site_domain")+File.separator+path+fileName;

// ajaxMsg.setState("success");

// ajaxMsg.setMsg(fileUrl);

ret = Ret.create("state", "SUCCESS")

.set("url", fileUrl)

.set("path",fileUrl)

.set("original", "")

.set("title",fileName);

} catch (Exception e) {

e.printStackTrace();

ajaxMsg.setState("fail");

}

renderJson(ret);

}

/**

* ueditor上传

*/

public void config(){

if ("config".equals(getPara("action"))) {

render("/static/plugins/ueditor/config.json");

return;

}

UploadFile file = getFile("upfile");

String fileName = file.getFileName();

String[] typeArr = fileName.split("\\.");

String orig = file.getOriginalFileName();

long size = file.getFile().length();

// String url = UploadOSSKit.uploadImage(file);

String url="";

Ret ret = Ret.create("state", "SUCCESS")

.set("url", url)

.set("path",url)

.set("original", orig)

.set("type", "."+typeArr[1])

.set("size", size);

renderJson(ret);

}

}

七，在jsp页面引入ueditor，初始化后指定上传文件，图片，视频的方法

后台管理系统

.admin-main{

height: 900px;

}

.mainLeft{

float: left;

}

.mainRight{

float: left;

}

标题

图片

图片

上传图片

链接

发文日期

保存

发布--%>

菜单

/**

* 初始化百度编辑器

*

* */

var ue = UE.getEditor('editor', {

autoHeight:true,

autoHeightEnabled: false,//是否自动长高

autoFloatEnabled: false,//浮动是离浏览器的高度

imageScaledEnable:true,//图片能否自动缩放

allowDivTransToP:false//是否容许div转换为p 标签

// enterTag : 'br'

});

/**

* 设置百度编辑器上传action

*

* */

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

UE.Editor.prototype.getActionUrl = function(action) {

console.log("action"+action)

if (action == 'uploadimage' || action == 'uploadscrawl' ) {

return '/ueditor/upimage';

}else if (action == 'uploadvideo')

{

return '/ueditor/upvideo';

}

else if (action == 'uploadfile')

{

return '/ueditor/upfile';

}

else {

return this._bkGetActionUrl.call(this, action);

}

};

通过以上几个步骤，jfinal中就整合好百度编辑器了，以下是我使用jfinal 采用多模块的方式实现的一个cms,以及整合了shiro,ueditor,layui

地址为：https://gitee.com/live.cn/wxcms