文档章节

jfinal 整合百度编辑器ueditor

风灬云
 风灬云
发布于 04/17 11:19
字数 1510
阅读 53
收藏 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整合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后端接收值问题

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

豆浆逗
07/25
0
0
JFinal针对ORACLE的timestamp字段解决办法

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

真的农夫三拳
2013/06/23
0
6

没有更多内容

加载失败,请刷新页面

加载更多

Coding and Paper Letter(二十四)

资源整理。这一次内容有点多,拆为两篇,这一篇主要针对Coding。 Coding: 1.R语言包geex,用于估计参数的框架和来自R中的一组无偏估计方程(即M-估计)的经验夹层协方差矩阵。 geex 2.R语言...

胖胖雕
18分钟前
0
0
Python中使用SQLite

SQLite: SQLite是一种数据库,Python中集成了SQLite3,所以在Python中使用SQLite,可以直接导入SQLite包,不需要做额外的配置。 更多的SQLite简介和相关知识可以查看专门的教程:http://ww...

akane_oimo
20分钟前
0
0
05《Java核心技术36讲》之几种字符串类有什么区别?

一、提出问题 今天,我们来聊聊日常使用的字符串,别看它似乎很简单,但其实字符串几乎在所有编程语言里都是个特殊的存在,因为不管是数量还是体积,字符串都是大多数应用中的重要组成。 今天...

飞鱼说编程
38分钟前
0
0
Univalsal_ImageLoader源码结构与创建者模式 初步小结

最近在回归看Univalsal_ImageLoader源码,本想自己也实现试试写一个,看源码是为了学习看能否使用,助于自己可以写出有自己逻辑结构的代码。 首先我们初始化ImageLoader的配置初始化的时候,...

DannyCoder
今天
0
0
计算卷积神经网络浮点数运算量

前言 本文主要是介绍了,给定一个卷积神经网络的配置之后,如何大概估算它的浮点数运算量。 相关代码:CalFlops,基于MXNet框架的 Scala 接口实现的一个计算MXNet网络模型运算量的demo。 正文...

Ldpe2G
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部