富文本編譯器UEditor+SSM的使用
下載ueditor-jsp版的資源包，解壓並放到webapp目錄下 在要引入的jsp頁面引入js文件
注*：不用引入css文件javascript
<script src="<c:url value="/model/ueditor/ueditor.config.js"></script>
<script src="<c:url value="/model/ueditor/ueditor.all.min.js"></script>
<script src="<c:url value="/model/ueditor/lang/zh-cn/zh-cn.js"></script>
複製代碼
ueditor.config.js中要作些經常使用的配置css
// ueditor目錄所在項目下的絕對路徑，不配置的話，jsp頁面會引入不到ueditor編輯器
var URL = window.UEDITOR_HOME_URL || "/model/ueditor/";
// 編輯器的寬高設置
initialFrameWidth:'80%' //初始化編輯器寬度,默認1000
initialFrameHeight:400 //初始化編輯器高度,默認320
複製代碼
在form表單中加入textarea標籤html
<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>
複製代碼
後臺文件上傳的接口java
@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代碼web
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;
}
}
複製代碼
以上代碼專門用於文件上傳，表單提交和之前同樣，沒什麼變化
- 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… 提取碼: rfixjson
若是出現錯誤：請求後臺配置項http錯誤，上傳功能將不能正常使用！
請將ueditor下lib文件夾的全部jar包添加到項目依賴中tomcat
相關文章
- 1. 富文本編譯器初使用
- 2. 常用的富文本編譯器
- 3. 富文本編輯器 KindEditor的使用
- 4. 富文本編輯器的使用
- 5. 富文本編輯器ckeditor的使用
- 6. 富文本編輯器CKEditor的使用
- 7. bootstrap富文本編輯器的使用
- 8. summernote富文本編輯器的使用
- 9. 富文本編輯器Quill的使用
- 10. VueQuillEditor富文本編輯器的使用
- 更多相關文章...
- • Kotlin 使用命令行編譯 - Kotlin 教程
- • Eclipse 編譯項目 - Eclipse 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 富文本編譯器初使用
- 2. 常用的富文本編譯器
- 3. 富文本編輯器 KindEditor的使用
- 4. 富文本編輯器的使用
- 5. 富文本編輯器ckeditor的使用
- 6. 富文本編輯器CKEditor的使用
- 7. bootstrap富文本編輯器的使用
- 8. summernote富文本編輯器的使用
- 9. 富文本編輯器Quill的使用
- 10. VueQuillEditor富文本編輯器的使用