因为博客发布文章需要个富文本编辑器,所见即所得,排版什么的还是很重要的。百了很多最后还是决定用ueditor 虽然已经被百度放弃了(不再更新)但是功能齐全插件多还是很好用的 第一次使用也是照着别人的教程写的 下载最新的ueditor-jsp版(根据自己的需求下载)http://ueditor.baidu.com/website/download.html 然后把下载好的内容放到web项目的webapp下,然后导包,我是直接把jar复制到web-inf的lib下然后build path,虽然这样会感觉好像太原始了。。,直接用maven导入会有问题,好像是因为ueditor不存在远程和本地仓库,不过可以在pom.xml中导入然后再把jar包复制到本地仓库,或者自己创建个私服然后把jar包放进去。。 修改config.json,
代码语言:javascript复制"imageUrlPrefix": "http://www.zjhuiwan.cn/****", /* 图片访问路径前缀项目根路径
-这里写的是Tomcat配置的虚拟目录*/
"physicsPath":"/**/***/***", /*F:/zjblogImg/upload上传到本地必填,
非本地为空即可*/
"imagePathFormat": "/ueditorImage/{yyyy}{mm}{dd}/{time}{ss}{rand:6}",
/* 上传保存路径,可以自定义保存路径和文件名格式 */
最后页面引入这几个js
代码语言:javascript复制<script type="text/javascript" charset="utf-8"
src="ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="ueditor/lang/zh-cn/zh-cn.js"></script>
[然后这样引入ueditor
代码语言:javascript复制<textarea name="articleDetail" id="articleDetail" style="width: 800px;
height: 550px;overflow: auto; margin: 0 auto;"></textarea>
<script type="text/javascript">
var ue = UE.getEditor("articleDetail");
</script>
后台直接根据form中的name接收即可,保存的是HTML代码。这样就可以排版了。
运行发现出来了
注意springmvc要配置放行
代码语言:javascript复制 <!-- 3.配置jsp 显示ViewResolver -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view
.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
但是使用的时候还是发现问题,上传成功后,重启Tomcat会删掉图片,因为我们是上传到了Tomcat下的webapp目录下的项目中,而我们MyEclipse中的项目和Tomcat下的项目实际是两个,重启Tomcat时会重新部署项目,也就是把原来的xm覆盖掉了,图片也就被删了。 为了解决这个问题我们应该把上传的图片放到专门的位置,一般项目静态资源回放独立的服务器,这里我就直接是放跟项目同级的Tomcat根目录下。当然也可以放硬盘其他地方,比如D:/img/upload
图片上传代码:
代码语言:javascript复制/**
* @Description:文件上传
* @param file
* @return
*/
public static String saveFile(MultipartFile file, HttpServletRequest request) {
// 判断文件是否为空
if (!file.isEmpty()) {
try {
// 获取3位的随机数
int num = (int)(100 Math.random() * (999 - 1 1));
// 设置日期格式
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmsss");
String dateTime = df.format(new Date());
// 取文件格式后缀名
String type = file.getOriginalFilename().substring(file.
getOriginalFilename().indexOf("."));
// 上传文件名
String fileName = dateTime num type;// 取当前时间戳作为文件名
// 上传文件路径(保存项目根路径)
// String path = request.getSession().getServletContext().
getRealPath("/upload/otherImg");
// 保存本地
String path = "/usr/zjblogImg/upload/otherImg";
// String path = "F:/zjblogImg/upload/otherImg";
// 判断路径是否存在,如果不存在就创建一个
File filePath = new File(path, fileName);
if (!filePath.getParentFile().exists()) {
filePath.getParentFile().mkdirs();
}
// 转存文件
file.transferTo(new File(path File.separator fileName));
return fileName;
} catch (IOException e) {
e.printStackTrace();
}
}
return " ";
}