富文字編譯器UEditor+SSM的使用

會Coding的猴子發表於2018-12-19

下載ueditor-jsp版的資源包,解壓並放到webapp目錄下 在要引入的jsp頁面引入js檔案
注*:不用引入css檔案

<script src="<c:url value="/model/ueditor/ueditor.config.js"></c:url>"></script>
<script src="<c:url value="/model/ueditor/ueditor.all.min.js"></c:url>"></script>
<script src="<c:url value="/model/ueditor/lang/zh-cn/zh-cn.js"></c:url>"></script>
複製程式碼

ueditor.config.js中要做些常用的配置

// ueditor目錄所在專案下的絕對路徑,不配置的話,jsp頁面會引入不到ueditor編輯器
var URL = window.UEDITOR_HOME_URL || "/model/ueditor/"; 
// 編輯器的寬高設定
initialFrameWidth:'80%'  //初始化編輯器寬度,預設1000
initialFrameHeight:400  //初始化編輯器高度,預設320
複製程式碼

在form表單中加入textarea標籤

<textarea type="text" name="reportContent" id="reportContent"></textarea>
<script type="text/javascript">
    UE.getEditor('reportContent')
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl
    UE.Editor.prototype.getActionUrl = function (action) {
        if (action === 'uploadimage' || action === 'uploadscrawl'
            || action === 'catchimage' || action === 'uploadfile') {
            // 非同步檔案上傳路徑
            return '${pageContext.request.contextPath}/report/user/upload';
        } else {
            return this._bkGetActionUrl.call(this, action)
        }
    }
</script>
複製程式碼

後臺檔案上傳的介面

@RequestMapping("/upload")
public void upload(HttpServletRequest request, HttpServletResponse response) throws Exception {
    JSONObject jsonObject = new JSONObject();
    jsonObject.put("code", 1);
    String path = "";
    String path1 = "";
    String path2 = "";
    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
    // 從session中獲取當前使用者資訊
    User user = (User) request.getSession().getAttribute("user");
    if (multipartResolver.isMultipart(request)) {
//            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
        // 以上方法出現型別轉換異常時用如下方法代替
        MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        MultipartHttpServletRequest multiRequest = resolver.resolveMultipart(request);
        /////////////////////////////////////////////////
        Iterator<?> iter = multiRequest.getFileNames();
        while (iter.hasNext()) {
            MultipartFile file = multiRequest.getFile(iter.next().toString());
            if (file != null) {
                // 檔名
                String fileName = file.getOriginalFilename();
                // 使用者名稱
                String userName = user.getName();
                // 判斷字尾
                if (!(fileName.endsWith(".jpg") || fileName.endsWith(".png") || fileName.endsWith(".gif") || fileName.endsWith(".bmp") || fileName.endsWith(".jpeg")
                        || fileName.endsWith(".JPG") || fileName.endsWith(".PNG") || fileName.endsWith(".GIF") || fileName.endsWith(".BMP") || fileName.endsWith(".JPEG"))) {
                    String uuid = UUID.randomUUID().toString().replaceAll("-", "");
                    String fileType = "jpg";
                    if (fileName.indexOf(".") > -1) {
                        fileType = fileName.substring(fileName.lastIndexOf("."));
                    }
                    // 檔案上傳本地路徑
                    path = "D://shihe/ICMS/user/" + userName + "/notice/file/" + uuid + fileType;
                    // tomcat對映的虛擬路徑
                    path2 = "/ICMS/user/" + userName + "/notice/file/" + uuid + fileType;
                    File newFile = new File(path);
                    if (!newFile.getParentFile().exists()) {
                        // 如果目標檔案所在的目錄不存在,則建立父目錄
                        newFile.getParentFile().mkdirs();
                    }
                    file.transferTo(new File(path));
                    jsonObject.put("state", "SUCCESS");
                    jsonObject.put("title", " ");
                    jsonObject.put("original", uuid + fileType);
                    jsonObject.put("url", path2);
                } else {
                    String uuid = UUID.randomUUID().toString().replaceAll("-", "");
                    String fileType = "jpg";
                    if (fileName.indexOf(".") > -1) {
                        fileType = fileName.substring(fileName.lastIndexOf("."));
                    }
                    // 檔案上傳本地路徑,原圖
                    path = "D://shihe/ICMS/user/" + userName + "/notice/image/" + fileName;
                    // 壓縮後的圖片,檔名為uuid,和原圖在同一目錄下
                    path1 = "D://shihe/ICMS/user/" + userName + "/notice/image/" + uuid + fileType;
                    // tomcat虛擬路徑,與本地圖片路徑對映
                    path2 = "/ICMS/user/" + userName + "/notice/image/" + uuid + fileType;
                    File newFile = new File(path);
                    if (!newFile.getParentFile().exists()) {
                        // 如果目標檔案所在的目錄不存在,則建立父目錄
                        newFile.getParentFile().mkdirs();
                    }
                    file.transferTo(new File(path));
                    ImageUtils.scale2(path, path1, 200, 300, true);
                    // 返回狀態
                    jsonObject.put("state", "SUCCESS");
                    jsonObject.put("title", " ");
                    jsonObject.put("original", uuid + fileType);
                    jsonObject.put("url", path2);
                }
            }
        }
    }
    response.setContentType("text/html;charset=utf-8");//設定頁面的字元編碼,解決介面顯示中文亂碼的問題;
    response.setHeader("Content-Type", "text/html");
    response.getWriter().write(jsonObject.toString());
}
複製程式碼

ImageUtils.java程式碼

package com.shihe.ImageCenter.dmc.util.commons;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.color.ColorSpace;
import java.awt.geom.AffineTransform;
import java.awt.image.*;
import java.io.File;
import java.io.IOException;

public class ImageUtils {

    public static String IMAGE_TYPE_GIF = "gif";// 圖形交換格式
    public static String IMAGE_TYPE_JPG = "jpg";// 聯合照片專家組
    public static String IMAGE_TYPE_JPEG = "jpeg";// 聯合照片專家組
    public static String IMAGE_TYPE_BMP = "bmp";// 英文Bitmap(點陣圖)的簡寫,它是Windows作業系統中的標準影象檔案格式
    public static String IMAGE_TYPE_PNG = "png";// 可移植網路圖形
    public static String IMAGE_TYPE_PSD = "psd";// Photoshop的專用格式Photoshop



    public static void main(String[] args) {
        // 1-縮放影象:
        // 方法一:按比例縮放
        ImageUtils.scale("d:/file/醫院排班表/醫院排班表_1.png", "d:/file/醫院排班表/111.png", 5, false);//測試OK
        // 方法二:按高度和寬度縮放
       /* ImageUtils.scale2("d:/1.jpg", "d:/2_scale2.jpg", 200, 300, true);//測試OK


        // 2-切割影象:
        // 方法一:按指定起點座標和寬高切割
        ImageUtils.cut("e:/abc.jpg", "e:/abc_cut.jpg", 0, 0, 400, 400 );//測試OK
        // 方法二:指定切片的行數和列數
        ImageUtils.cut2("e:/abc.jpg", "e:/", 2, 2 );//測試OK
        // 方法三:指定切片的寬度和高度
        ImageUtils.cut3("e:/abc.jpg", "e:/", 300, 300 );//測試OK


        // 3-影象型別轉換:
        ImageUtils.convert("e:/abc.jpg", "GIF", "e:/abc_convert.gif");//測試OK


        // 4-彩色轉黑白:
        ImageUtils.gray("e:/abc.jpg", "e:/abc_gray.jpg");//測試OK


        // 5-給圖片新增文字水印:
        // 方法一:
        ImageUtils.pressText("我是水印文字","e:/abc.jpg","e:/abc_pressText.jpg","宋體",Font.BOLD,Color.white,80, 0, 0, 0.5f);//測試OK
        // 方法二:
        ImageUtils.pressText2("我也是水印文字", "e:/abc.jpg","e:/abc_pressText2.jpg", "黑體", 36, Color.white, 80, 0, 0, 0.5f);//測試OK

        // 6-給圖片新增圖片水印:
        ImageUtils.pressImage("e:/abc2.jpg", "e:/abc.jpg","e:/abc_pressImage.jpg", 0, 0, 0.5f);//測試OK
*/    }



    public final static void scale(String srcImageFile, String result,
                                   int scale, boolean flag) {
        try {
            BufferedImage src = ImageIO.read(new File(srcImageFile)); // 讀入檔案
            int width = src.getWidth(); // 得到源圖寬
            int height = src.getHeight(); // 得到源圖長
            if (flag) {// 放大
                width = width * scale;
                height = height * scale;
            } else {// 縮小
                width = width / scale;
                height = height / scale;
            }
            Image image = src.getScaledInstance(width, height,
                    Image.SCALE_DEFAULT);
            BufferedImage tag = new BufferedImage(width, height,
                    BufferedImage.TYPE_INT_RGB);
            Graphics g = tag.getGraphics();
            g.drawImage(image, 0, 0, null); // 繪製縮小後的圖
            g.dispose();
            ImageIO.write(tag, "JPEG", new File(result));// 輸出到檔案流
        } catch (IOException e) {
            e.printStackTrace();
        }
    }



    @SuppressWarnings("static-access")
    public final static void scale2(String srcImageFile, String result, int height, int width, boolean bb) {
        try {
            double ratio = 0.0; // 縮放比例
            File f = new File(srcImageFile);
            BufferedImage bi = ImageIO.read(f);
            Image itemp = bi.getScaledInstance(width, height, bi.SCALE_SMOOTH);
            // 計算比例
            if ((bi.getHeight() > height) || (bi.getWidth() > width)) {
                if (bi.getHeight() > bi.getWidth()) {
                    ratio = (new Integer(height)).doubleValue()
                            / bi.getHeight();
                } else {
                    ratio = (new Integer(width)).doubleValue() / bi.getWidth();
                }
                AffineTransformOp op = new AffineTransformOp(AffineTransform
                        .getScaleInstance(ratio, ratio), null);
                itemp = op.filter(bi, null);
            }
            if (bb) {//補白
                BufferedImage image = new BufferedImage(width, height,
                        BufferedImage.TYPE_INT_RGB);
                Graphics2D g = image.createGraphics();
                g.setColor(Color.white);
                g.fillRect(0, 0, width, height);
                if (width == itemp.getWidth(null))
                    g.drawImage(itemp, 0, (height - itemp.getHeight(null)) / 2,
                            itemp.getWidth(null), itemp.getHeight(null),
                            Color.white, null);
                else
                    g.drawImage(itemp, (width - itemp.getWidth(null)) / 2, 0,
                            itemp.getWidth(null), itemp.getHeight(null),
                            Color.white, null);
                g.dispose();
                itemp = image;
            }
            ImageIO.write((BufferedImage) itemp, "JPEG", new File(result));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }


    public final static void cut(String srcImageFile, String result,
                                 int x, int y, int width, int height) {
        try {
            // 讀取源影象
            BufferedImage bi = ImageIO.read(new File(srcImageFile));
            int srcWidth = bi.getHeight(); // 源圖寬度
            int srcHeight = bi.getWidth(); // 源圖高度
            if (srcWidth > 0 && srcHeight > 0) {
                Image image = bi.getScaledInstance(srcWidth, srcHeight,
                        Image.SCALE_DEFAULT);
                // 四個引數分別為影象起點座標和寬高
                // 即: CropImageFilter(int x,int y,int width,int height)
                ImageFilter cropFilter = new CropImageFilter(x, y, width, height);
                Image img = Toolkit.getDefaultToolkit().createImage(
                        new FilteredImageSource(image.getSource(),
                                cropFilter));
                BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
                Graphics g = tag.getGraphics();
                g.drawImage(img, 0, 0, width, height, null); // 繪製切割後的圖
                g.dispose();
                // 輸出為檔案
                ImageIO.write(tag, "JPEG", new File(result));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


    public final static void cut2(String srcImageFile, String descDir,
                                  int rows, int cols) {
        try {
            if(rows<=0||rows>20) rows = 2; // 切片行數
            if(cols<=0||cols>20) cols = 2; // 切片列數
            // 讀取源影象
            BufferedImage bi = ImageIO.read(new File(srcImageFile));
            int srcWidth = bi.getHeight(); // 源圖寬度
            int srcHeight = bi.getWidth(); // 源圖高度
            if (srcWidth > 0 && srcHeight > 0) {
                Image img;
                ImageFilter cropFilter;
                Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);
                int destWidth = srcWidth; // 每張切片的寬度
                int destHeight = srcHeight; // 每張切片的高度
                // 計算切片的寬度和高度
                if (srcWidth % cols == 0) {
                    destWidth = srcWidth / cols;
                } else {
                    destWidth = (int) Math.floor(srcWidth / cols) + 1;
                }
                if (srcHeight % rows == 0) {
                    destHeight = srcHeight / rows;
                } else {
                    destHeight = (int) Math.floor(srcWidth / rows) + 1;
                }
                // 迴圈建立切片
                // 改進的想法:是否可用多執行緒加快切割速度
                for (int i = 0; i < rows; i++) {
                    for (int j = 0; j < cols; j++) {
                        // 四個引數分別為影象起點座標和寬高
                        // 即: CropImageFilter(int x,int y,int width,int height)
                        cropFilter = new CropImageFilter(j * destWidth, i * destHeight,
                                destWidth, destHeight);
                        img = Toolkit.getDefaultToolkit().createImage(
                                new FilteredImageSource(image.getSource(),
                                        cropFilter));
                        BufferedImage tag = new BufferedImage(destWidth,
                                destHeight, BufferedImage.TYPE_INT_RGB);
                        Graphics g = tag.getGraphics();
                        g.drawImage(img, 0, 0, null); // 繪製縮小後的圖
                        g.dispose();
                        // 輸出為檔案
                        ImageIO.write(tag, "JPEG", new File(descDir
                                + "_r" + i + "_c" + j + ".jpg"));
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }



    public final static void cut3(String srcImageFile, String descDir,
                                  int destWidth, int destHeight) {
        try {
            if(destWidth<=0) destWidth = 200; // 切片寬度
            if(destHeight<=0) destHeight = 150; // 切片高度
            // 讀取源影象
            BufferedImage bi = ImageIO.read(new File(srcImageFile));
            int srcWidth = bi.getHeight(); // 源圖寬度
            int srcHeight = bi.getWidth(); // 源圖高度
            if (srcWidth > destWidth && srcHeight > destHeight) {
                Image img;
                ImageFilter cropFilter;
                Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);
                int cols = 0; // 切片橫向數量
                int rows = 0; // 切片縱向數量
                // 計算切片的橫向和縱向數量
                if (srcWidth % destWidth == 0) {
                    cols = srcWidth / destWidth;
                } else {
                    cols = (int) Math.floor(srcWidth / destWidth) + 1;
                }
                if (srcHeight % destHeight == 0) {
                    rows = srcHeight / destHeight;
                } else {
                    rows = (int) Math.floor(srcHeight / destHeight) + 1;
                }
                // 迴圈建立切片
                // 改進的想法:是否可用多執行緒加快切割速度
                for (int i = 0; i < rows; i++) {
                    for (int j = 0; j < cols; j++) {
                        // 四個引數分別為影象起點座標和寬高
                        // 即: CropImageFilter(int x,int y,int width,int height)
                        cropFilter = new CropImageFilter(j * destWidth, i * destHeight,
                                destWidth, destHeight);
                        img = Toolkit.getDefaultToolkit().createImage(
                                new FilteredImageSource(image.getSource(),
                                        cropFilter));
                        BufferedImage tag = new BufferedImage(destWidth,
                                destHeight, BufferedImage.TYPE_INT_RGB);
                        Graphics g = tag.getGraphics();
                        g.drawImage(img, 0, 0, null); // 繪製縮小後的圖
                        g.dispose();
                        // 輸出為檔案
                        ImageIO.write(tag, "JPEG", new File(descDir
                                + "_r" + i + "_c" + j + ".jpg"));
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }



    public final static void convert(String srcImageFile, String formatName, String destImageFile) {
        try {
            File f = new File(srcImageFile);
            f.canRead();
            f.canWrite();
            BufferedImage src = ImageIO.read(f);
            ImageIO.write(src, formatName, new File(destImageFile));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }



    public final static void gray(String srcImageFile, String destImageFile) {
        try {
            BufferedImage src = ImageIO.read(new File(srcImageFile));
            ColorSpace cs = ColorSpace.getInstance(ColorSpace.CS_GRAY);
            ColorConvertOp op = new ColorConvertOp(cs, null);
            src = op.filter(src, null);
            ImageIO.write(src, "JPEG", new File(destImageFile));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }



    public final static void pressText(String pressText,
                                       String srcImageFile, String destImageFile, String fontName,
                                       int fontStyle, Color color, int fontSize,int x,
                                       int y, float alpha) {
        try {
            File img = new File(srcImageFile);
            Image src = ImageIO.read(img);
            int width = src.getWidth(null);
            int height = src.getHeight(null);
            BufferedImage image = new BufferedImage(width, height,
                    BufferedImage.TYPE_INT_RGB);
            Graphics2D g = image.createGraphics();
            g.drawImage(src, 0, 0, width, height, null);
            g.setColor(color);
            g.setFont(new Font(fontName, fontStyle, fontSize));
            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
                    alpha));
            // 在指定座標繪製水印文字
            g.drawString(pressText, (width - (getLength(pressText) * fontSize))
                    / 2 + x, (height - fontSize) / 2 + y);
            g.dispose();
            ImageIO.write((BufferedImage) image, "JPEG", new File(destImageFile));// 輸出到檔案流
        } catch (Exception e) {
            e.printStackTrace();
        }
    }



    public final static void pressText2(String pressText, String srcImageFile,String destImageFile,
                                        String fontName, int fontStyle, Color color, int fontSize, int x,
                                        int y, float alpha) {
        try {
            File img = new File(srcImageFile);
            Image src = ImageIO.read(img);
            int width = src.getWidth(null);
            int height = src.getHeight(null);
            BufferedImage image = new BufferedImage(width, height,
                    BufferedImage.TYPE_INT_RGB);
            Graphics2D g = image.createGraphics();
            g.drawImage(src, 0, 0, width, height, null);
            g.setColor(color);
            g.setFont(new Font(fontName, fontStyle, fontSize));
            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
                    alpha));
            // 在指定座標繪製水印文字
            g.drawString(pressText, (width - (getLength(pressText) * fontSize))
                    / 2 + x, (height - fontSize) / 2 + y);
            g.dispose();
            ImageIO.write((BufferedImage) image, "JPEG", new File(destImageFile));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }



    public final static void pressImage(String pressImg, String srcImageFile,String destImageFile,
                                        int x, int y, float alpha) {
        try {
            File img = new File(srcImageFile);
            Image src = ImageIO.read(img);
            int wideth = src.getWidth(null);
            int height = src.getHeight(null);
            BufferedImage image = new BufferedImage(wideth, height,
                    BufferedImage.TYPE_INT_RGB);
            Graphics2D g = image.createGraphics();
            g.drawImage(src, 0, 0, wideth, height, null);
            // 水印檔案
            Image src_biao = ImageIO.read(new File(pressImg));
            int wideth_biao = src_biao.getWidth(null);
            int height_biao = src_biao.getHeight(null);
            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
                    alpha));
            g.drawImage(src_biao, (wideth - wideth_biao) / 2,
                    (height - height_biao) / 2, wideth_biao, height_biao, null);
            // 水印檔案結束
            g.dispose();
            ImageIO.write((BufferedImage) image,  "JPEG", new File(destImageFile));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }



    public final static int getLength(String text) {
        int length = 0;
        for (int i = 0; i < text.length(); i++) {
            if (new String(text.charAt(i) + "").getBytes().length > 1) {
                length += 2;
            } else {
                length += 1;
            }
        }
        return length / 2;
    }
}

複製程式碼

富文字編譯器UEditor+SSM的使用
IDEA中需要配置單獨的虛擬路徑對映,如果直接修改tomcat中的server.xml配置,配置不會生效
以上程式碼專門用於檔案上傳,表單提交和以前一樣,沒什麼變化

  • tomcat執行配置 -> edit configurations.. -> Deployment -> 新增External Source -> 選擇本地資料夾 -> Application context(配置tomcat對映資料夾)
  • 如果將專案部署到tomcat中去的話,就要配置server.xml了,在Host標籤下配置
<!-- path為專案訪問的虛擬路勁 : docBase為本地路徑 -->
<Context path="/ICMS" docBase="D:\upFiles" reloadable="true" />  
複製程式碼

富文字編譯器如果其中加入輸入法的表情符號,資料庫如果不是utf8mb4編碼則會報錯
解決辦法:
note.youdao.com/noteshare?i…

附上ueditor-jsp穩定版:
連結: pan.baidu.com/s/1jWZ3fY3N… 提取碼: rfix

如果出現錯誤:請求後臺配置項http錯誤,上傳功能將不能正常使用!
請將ueditor下lib資料夾的所有jar包新增到專案依賴中

相關文章