文档章节

jfinal 整合百度编辑器ueditor

风灬云
 风灬云
发布于 04/17 11:19
字数 1510
阅读 44
收藏 1
点赞 1
评论 2

先来张效果图

一,准备工作搭建好的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<Record>  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,初始化后指定上传文件,图片,视频的方法

<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">


    <title>后台管理系统</title>
    <% String path = request.getContextPath(); %>
    <% Date d = new Date();%>
    <% SimpleDateFormat sdformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//24小时制  %>
    <%String date = sdformat.format(d); %>
    <link rel="stylesheet" href="${basePath}/static/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${basePath}/static/css/ztree/metro/ztree.css"  media="all">

    <%--百度编辑器需要引入的js--%>
    <script type="text/javascript" charset="utf-8" src="../../../static/plugins/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../../static/plugins/ueditor/ueditor.all.js"> </script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="../../../static/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
    <style>
        .admin-main{
            height: 900px;
        }
        .mainLeft{
            float: left;
        }
        .mainRight{
            float: left;
        }
    </style>

</head>
<body>
<div class="admin-main">
    <div class="mainLeft">
    <form id="articleForm" method="post" class="layui-form" action="">
           <input id="article_pk" name="article_pk" type="hidden" />

           <div class="layui-form-item" style="margin-top:2%;">
               <label class="layui-form-label">标题</label>
               <div class="layui-input-inline">
                   <input id="article_title" name="article_title"  lay-verify="required"  autocomplete="off" placeholder="请输入标题" class="layui-input" type="text" />
               </div>

               <label class="layui-form-label">图片</label>
               <div class="layui-input-inline">
                   <img id="images" src="" width="190px" height="45px" title="">
               </div>

               <label class="layui-form-label">图片</label>
               <div class="layui-input-inline">
                   <input id="article_titleimg" name="article_titleimg"  autocomplete="off"  class="layui-input" type="hidden"/>
                   <button type="button" class="layui-btn" id="file">
                       <i class="layui-icon">&#xe67c;</i>上传图片
                   </button>
               </div>

           </div>

            <div class="layui-form-item">

                <label class="layui-form-label">链接</label>
                <div class="layui-input-inline">
                    <input id="article_url" name="article_url"  lay-verify="required"  autocomplete="off" placeholder="请输入链接" class="layui-input" type="text" />
                </div>

                <label class="layui-form-label">发文日期</label>
                <div class="layui-input-inline">
                    <input value="" id="article_sendtime" name="article_sendtime" class="layui-input" >
                </div>

            </div>
            <div align="center">
                <textarea id="editor" name="editor" style="margin-top:2%;padding:0;width:890px;height:650px;"></textarea>
            </div>

    </form>
</div>
    <%--树形菜单--%>
<div class="mainRight">
    <div align="center" class="layui-input-block" style="margin: 5% auto">
        <button class="layui-btn layui-btn-small" align="center" id="edit">保存</button>
        <%--<button class="layui-btn layui-btn-small" align="center" id="send">发布</button>--%>
    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>菜单</legend>
    </fieldset>
    <ul id="ztree" class="ztree" style="display: inline-block; width: 170px; height: 750px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
    </ul>
</div>
</div>
</body>

<script>
    /**
     * 初始化百度编辑器
     *
     * */
    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 '<%=path%>/ueditor/upimage';
        }else if (action == 'uploadvideo')
        {
            return '<%=path%>/ueditor/upvideo';
        }
        else if (action == 'uploadfile')
        {
            return '<%=path%>/ueditor/upfile';
        }
        else {
            return this._bkGetActionUrl.call(this, action);
        }
    };
</script>

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

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

© 著作权归作者所有

共有 人打赏支持
风灬云
粉丝 18
博文 91
码字总数 30310
作品 0
西宁
技术主管
加载中

评论(2)

风灬云
风灬云

引用来自“JFinal”的评论

jfinal 整合 ueditor 最好的方案,可以将 ueditor 原有的 jar 包、JSP 之类的服务端的东东全部去掉,感谢分享
好的波总,我再整理一下。
JFinal
JFinal
jfinal 整合 ueditor 最好的方案,可以将 ueditor 原有的 jar 包、JSP 之类的服务端的东东全部去掉,感谢分享
JFinal整合CKFinder

使用JFinal对之前的系统进行重构,老系统使用了CKEditor+CKFinder编辑器,发现在web.xml中配置ConnectorServlet会被JFinalFilter过滤处理,而且使用JFinal之后也不想在web.xml中增加额外的配...

pandyyan
2013/05/13
0
0
JFinal-Beetl-Shiro(JdbcRealm)-例子

JFinal-Shiro-JDBC-Demo http://git.oschina.net/yinjun622/JFinal-Shiro-JDBC-Demo 简单实现@JFinal与Shiro整合例子 1、工程通过Eclipse直接导入,部署到tomcat中; 2、新建jfinalshiro数据......

leon_rock
2014/02/27
0
12
JFinal针对ORACLE的timestamp字段解决办法

JFinal是个比较不错的的框架,但JFinal起源时使用mysql数据库,因此在对数据库支持方面还没有达到完美。 本人使用JFinal有一段时间的,由于项目的数据库普遍采用oracle,在使用oracle过程中遇...

真的农夫三拳
2013/06/23
0
6
最近在做的一件事件编写JFinal教程《Jfinal极速开发实战》

从8月1号开始,整整一个月,初稿完成,朋友帮我第一次文字校对完成,现在正在根据波总的意见修改一些jfinal的设计原则说明 Jfinal、JfinalUIB学习交流QQ群:309647612 已经完成,前四章免费阅...

littleant
2015/08/20
0
12
基于JFinal实现的权限管理系统 JFinalUIB

项目用到了众多的开源组件,还有一些是网络分享的学习示例代码片段,感谢他们!!! JFinal高级学习交流QQ群:309647612 代码库地址:http://git.oschina.net/dongcb678/JfinalUIB.git 项目背景...

littleant
2014/06/03
0
35
JFinal 整合Quartz

项目中要加入调度和计划任务等功能,所以选择Quartz调度插件,原先都是在S2SH上整合的。现在项目用JFinal框架,不得不说JFinal框架的定制性真好,可以自己根据项目要求进行修改,并且很节省时...

超级大富
2014/03/09
0
20
JFinal极速开发实战教程新鲜出炉~

JFinal极速开发实战教程新鲜出炉~ [持续更新中...] JFinal框架让 IT 工程师发挥更大的潜能,实现更大价值,同时也希望 JFinal 工具力量能帮助正在创业的朋友们提升效率、降低成本从而实现创业...

山东-小木
2015/01/07
0
13
JFBlog 1.0 maven版本开源

JFBlog-maven 此项目是JFBlog的Maven版本。 1、源码支持 JFBlog源码 http://git.oschina.net/realfighter/JFBlog JFBlog-maven源码 https://git.oschina.net/realfighter/JFBlog-maven Worka......

Realfighter
2015/04/11
0
4
OSC上关于Jfinal的提问整理(一)

看见Jfinal很火,就手痒痒了,想学一下,无奈入门较慢,没有找到比较全的文档。于是就经常看讨论区大家的提问与解答。后来就忽然萌生了整理下来的想法。其中的问题如果是@Jfinal 回答的,那我...

木川瓦兹
2013/04/23
0
21
jfinal框架增加微信jsapi支持

部分手机在图片上传的时候,调取不到sd卡相册或其他图片,为了解决这个兼容性问题,同一个页面使用了两种图片上传方案。 html5 :图片编码成base64 ,发送到后台,解码存储。这种方法用于解决...

YangTao
2015/05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
12分钟前
0
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
19分钟前
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
24分钟前
0
0
Java IO类库之BufferedInputStream

一、BufferedInputStream介绍 /** * A <code>BufferedInputStream</code> adds * functionality to another input stream-namely, * the ability to buffer the input and to * sup......

老韭菜
26分钟前
0
0
STM 32 窗口看门狗

http://bbs.elecfans.com/jishu_805708_1_1.html https://blog.csdn.net/a1985831055/article/details/77404131...

whoisliang
昨天
0
0
Dubbo解析(六)-服务调用

当dubbo消费方和提供方都发布和引用完成后,第四步就是消费方调用提供方。 还是以dubbo的DemoService举例 -- 提供方<dubbo:application name="demo-provider"/><dubbo:registry address="z...

青离
昨天
1
0
iptables规则备份和恢复、firewalld的9个zone以及操作和service的操作

保存以及备份iptalbes规则 设定了的防火墙规则要进行保存,否则系统重启后这些规则就没有了,使用命令 ”service iptables save ” 会把设定好的防火墙规则保存到文件/etc/sysconfig/iptabl...

黄昏残影
昨天
0
0
k8s image

k8s.gcr.io/kube-apiserver-amd64:v1.11.0k8s.gcr.io/kube-controller-manager-amd64:v1.11.0k8s.gcr.io/kube-scheduler-amd64:v1.11.0k8s.gcr.io/kube-proxy-amd64:v1.11.0k8s.gcr.......

分秒
昨天
0
0
数据结构--排序

这篇博客包含了数据结构中多种的排序算法: (1)简单选择:第一趟在A[0]~A[n-1]之间找到最小的,与A[0]进行交换,之后在A[1]~A[n-1]之间进行。。。第i趟在A[i-1]~A[n-1]之间找到最小的,最后...

wangxuwei
昨天
1
0
一名3年工作经验的java程序员应该具备的职业技能

一名3年工作经验的Java程序员应该具备的技能,这可能是Java程序员们比较关心的内容。我这里要说明一下,以下列举的内容不是都要会的东西—-但是如果你掌握得越多,最终能得到的评价、拿到的薪...

老道士
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部