下載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.getActionUrlUE.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的專用格式Photoshoppublic 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);elseg.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;} }復制代碼

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包添加到項目依賴中

總結

以上是生活随笔為你收集整理的富文本编译器UEditor+SSM的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。