2. 程式人生 > 實用技巧 >jfinal 整合百度編輯器ueditor

jfinal 整合百度編輯器ueditor

阿新 • • 發佈：2020-10-19

>>> hot3.png

先來張效果圖

一，準備工作搭建好的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

轉載於:https://my.oschina.net/mayude/blog/1796637

相關推薦

jfinal 整合百度編輯器ueditor

>>> 先來張效果圖 一，準備工作搭建好的jfinal 專案，百度編輯器官網下載ueditor和相應的java包

百度編輯器(UEditor)上傳圖片word

​ Chrome+IE預設支援貼上剪下板中的圖片，但是我要釋出的文章存在word裡面，圖片多達數十張，我總不能一張一張複製吧？

百度編輯器的使用

技術標籤：phpthinkphp 拿自己需要的程式碼即可， {extend name="public/public"}

從word中複製內容包含圖片到百度編輯器中

​ 由於工作需要必須將word文件內容貼上到編輯器中使用 但發現word中的圖片粘貼後變成了file:///xxxx.jpg這種內容，如果上傳到伺服器後其他人也訪問不了，網上找了很多編輯器發現沒有一個能直接解決這個問題

從word中複製圖片到百度編輯器中

​ 圖片的複製無非有兩種方法，一種是圖片直接上傳到伺服器，另外一種轉換成二進位制流的base64碼

百度編輯器實現WORD貼上公式自動上傳

​ 由於工作需要必須將word文件內容貼上到編輯器中使用 但發現word中的圖片粘貼後變成了file:///xxxx.jpg這種內容，如果上傳到伺服器後其他人也訪問不了，網上找了很多編輯器發現沒有一個能直接解決這個問題

如何複製word的圖文到百度編輯器中自動上傳

​ 圖片的複製無非有兩種方法，一種是圖片直接上傳到伺服器，另外一種轉換成二進位制流的base64碼

百度編輯器在編輯視訊時src丟失的問題

這個問題困擾很久 ，上網查詢 發現也有遇到這一同一問題 ueditor 上傳成功 預覽成功 檢視html 程式碼如下：

百度編輯器可以如何直接複製word的圖文內容到編輯器中?

​ 圖片的複製無非有兩種方法，一種是圖片直接上傳到伺服器，另外一種轉換成二進位制流的base64碼

百度編輯器 圖片貼上上傳，實現圖文貼上，圖片自動上傳

​ 由於工作需要必須將word文件內容貼上到編輯器中使用 但發現word中的圖片粘貼後變成了file:///xxxx.jpg這種內容，如果上傳到伺服器後其他人也訪問不了，網上找了很多編輯器發現沒有一個能直接解決這個問題

word文件的圖片怎麼儲存到百度編輯器上

​ 這種方法是servlet，編寫好在web.xml裡配置servlet-class和servlet-mapping即可使用 後臺（服務端）java服務程式碼：（上傳至ROOT/lqxcPics資料夾下）

百度編輯器在https中插入地圖不顯示的解決方法

1.將引入的介面更改為： 更改之前： <script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?v=1.1&services=true\"></script>

百度編輯器貼上圖片自動上傳到伺服器(Java版)

​ 1.4.2之後官方並沒有做功能的改動，1.4.2在word複製這塊沒有bug，其他版本會出現手動無法轉存的情況

thinkphp5.1中適配百度富文字編輯器ueditor

百度富文字編輯器ueditor雖然很老，但是功能齊全，我近期需要能批量貼上圖片的功能，但是找不到，很無奈。然後現在就分享一下如何把ueditor適配到thinkphp5.1，有知道如何批量上傳圖片的艾特我啊，謝謝分享

vue專案中使用百度富文字編輯器ueditor

第一步，安裝依賴，並且把ueditor整個資料夾放入public裡邊 第二步，在你需要編輯的地方引入，或者main.js中全域性引入

如何解決SpringBoot整合百度UEditor圖片上傳後直接訪問404

SpringBoot專案上傳圖片一般是上傳至遠端伺服器儲存，開發過程中可能會上傳至當前專案的某個靜態目錄中，此時就會遇到這個問題，檔案在上傳之後直接訪問並不能被訪問到，必須重新載入專案。

Spring+SpringMVC+MyBatis+easyUI整合優化篇（六）easyUI與富文字編輯器UEditor整合

前言 本來這一篇和接下來的幾篇是打算講一下JDBC和資料庫優化的，但是最近很多朋友加我好友也討論了一些問題，我發現大家似乎都是拿這個專案作為練手專案，作為腳手架來用的，因此呢，改變了一下思路，JDBC和資料庫優

Angular5整合富文字編輯器TinyMCE的方法(漢化+上傳)

1. TinyMCE簡介 TinyMCE是一個輕量級的富文字編輯器，相對於CK編輯器更加精簡，但必須滿足絕大部分場景的需要。

vue整合SimpleMDE做編輯器

1、安裝simplemde npm install simplemde --save//markdown編輯器 npm install font-awesome --save//FontAwesome字型圖示

AEAI Portal中整合百度地圖

2019獨角獸企業重金招聘Python工程師標準>>> 概述 很多網站上都會有聯絡方式和地址，為了能更直觀的顯示出地址的具體位置，很多網站都在地址下面新增百度地圖，下面就為大家介紹在AEAI Portal