文档章节

jfinal 整合百度编辑器ueditor

风灬云
 风灬云
发布于 04/17 11:19
字数 1510
阅读 84
收藏 1

先来张效果图

一,准备工作搭建好的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
作品 1
西宁
技术主管
私信 提问
加载中

评论(2)

风灬云
风灬云

引用来自“JFinal”的评论

jfinal 整合 ueditor 最好的方案,可以将 ueditor 原有的 jar 包、JSP 之类的服务端的东东全部去掉,感谢分享
好的波总,我再整理一下。
JFinal
JFinal
jfinal 整合 ueditor 最好的方案,可以将 ueditor 原有的 jar 包、JSP 之类的服务端的东东全部去掉,感谢分享
基于 jfinal 的内容发布系统 - wxcms

项目介绍 wxcms 是一个内容发布系统。 一,使用的相关技术 (1)jfinal作为核心框架,感谢波总开源如此好用的框架 (2)使用shiro作权限控制 (3)整合了百度编辑器ueditor (4)使用mysql数...

风灬云
09/19
0
0
关于JFinal与UEditor整合问题(FreeMarker)

@JFinal 你好,请问一下,JFinal跟UEditor如何整合呢? 例如下面是一段在Html页面中创建UEditor的代码,如何把UEditor里的值传到后台呢? 这样的写法对吗?...

大王叫我来巡山
2014/04/07
1K
4
jfinal cms v4.6.0 发布,站点逻辑重构

jfinal cms v4.6.0 发布了,该版本进行了大量细节优化和完善,并对站点处理逻辑进行了重构; 该版本优化: 重构站点逻辑代码,让后台站点配置与前台站点配置分离; delete、insert、update默...

Fly的狐狸
2017/05/27
1K
4
请教一下jfinal后端接收值问题

@jfinal 我使用的百度的ueditor,在插入图片的时候再加入大量文字后端就会报错,但是我插入图片和一部分文字就完成正常,这是因为什么啊 这是报错,值都进来为什么会报这个错 这是正常,图片...

豆浆逗
07/25
204
2
JFinal社区 v1.4.1 更新,手机端适配完成,可以手机端发布话题了

JFinal社区 v1.4.1 更新,手机端适配完成,可以手机端发布话题了。 手机端适配 支持手机端发布话题了 支持手机端修改话题 手机端支持登录注册了 手机端可以查看个人中心了 手机端去掉了edito...

朋也
2015/10/10
2.9K
7

没有更多内容

加载失败,请刷新页面

加载更多

寻找数学的广度——《这才是数学》读书笔记2700字

寻找数学的广度——《这才是数学》读书笔记2700字: 文|程哲。数学学习方式之广:国内外数学教育方面的专家,进行了很多种不同的数学学习方式尝试,如数学绘本、数学游戏、数学实验、数学步道...

原创小博客
18分钟前
3
0
vimrc

set rtp+=/usr/local/lib/python3.7/site-packages/powerline/bindings/vim/set laststatus=2set t_Co=256set cursorlinehi cursorline cterm=none term=nonehighlight CursorLine gui......

kut
20分钟前
1
0
ubuntu常用操作

显卡GPU 查看显卡信息sudo lshw -numeric -class video# 查看显卡型号lspci | grep -i nvidia# 查看驱动版本sudo dpkg --list | grep nvidia-*或者 ubuntu-drivers devices#查看显卡...

hc321
昨天
2
0
mysql密码重置

方法一: 在my.ini的[mysqld]字段加入: skip-grant-tables 重启mysql服务,这时的mysql不需要密码即可登录数据库 然后进入mysql mysql>use mysql; mysql>更新 update user set password=pas...

architect刘源源
昨天
7
1
SpringBoot + Mybatis 配置多数据源(Srping boot 二)

前置条件,你已经配置好spring boot+mybatis,可以参考之前的博客 实现逻辑通过注解+aop切面编程来动态更新datasource 第一步,配置多个DataSource server: port: 8080freezing: ...

小海bug
昨天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部