富文本编译器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. 富文本编译器初使用
- 2. 常用的富文本编译器
- 3. 富文本编辑器 KindEditor的使用
- 4. 富文本编辑器的使用
- 5. 富文本编辑器ckeditor的使用
- 6. 富文本编辑器CKEditor的使用
- 7. bootstrap富文本编辑器的使用
- 8. summernote富文本编辑器的使用
- 9. 富文本编辑器Quill的使用
- 10. VueQuillEditor富文本编辑器的使用