html5编辑器本地保存图片不显示怎么解决
html5编辑器本地保存图片不显示怎么解决
这篇文章主要介绍“html5编辑器本地保存图片不显示怎么解决”,在日常操作中,相信很多人在html5编辑器本地保存图片不显示怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html5编辑器本地保存图片不显示怎么解决”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
用Eclipse开发WEB项目的时候,使用到了Ueditor上传图片的功能,插件会自动将上传的图片保存在Eclipse工作目录下,这种保存的方式非常不利于后续对图片的操作(管理),这时我们就要修改Ueditor的源码,解决上传图片时的路径问题。
1、下载ueditor源码并引用到工程
将jsp/src/目录下的所有文件拷贝到你的工程下
目录视图
将ueditor-1.1.2.jar删除,只引用前四个jar包
2、修改Tomcat服务器配置,添加图片映射路径
在tomcat中添加图片的绝对路径和图片访问虚拟路径
修改config.json配置文件,访问路径填写刚配置的虚拟目录
3、创建配置文件(可省略)
在src目录下创建config.properties ,存放图片路径
读配置文件的目的是为了动态修改保存路径,可以更方便的管理图片
创建ConfigUtil.java类,用于读取配置文件
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.Properties;
public class ConfigUtil {
private static Properties pro;
static{
pro=new Properties();
//默认从类的所在包目录开始查找资源文件
//如果要classpath的根目录开始找,必须加上/
//默认从classspath的根目录开始查找资源文件
InputStream input=ConfigUtil.class
.getClassLoader()
.getResourceAsStream("config.properties");
try {
pro.load(new InputStreamReader(input,
"UTF-8"));
} catch (IOException e) {
e.printStackTrace();
}finally{
if(input!=null){
try {
input.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
public static String get(String key){
return pro.getProperty(key);
}
public static int getInt(String key){
return Integer.parseInt(pro.getProperty(key));
}
}
4、修改源码(修改图片保存路径)
选中项目,使用Eclipse文件搜索功能
搜索 physicalPath
找到在3个类中使用到了 physicalPath
这里有3个类的是要修改源码的
//注释掉原来的路径代码
//String physicalPath = this.rootPath + savePath;
使用自定义的路径(这个路径是通过配置文件读取的,相当于取代源码中的this.savePath)
注意:ConfigUtil.get("savepath") ,字段名必须一样,否则读取不了
ImageHunter.java
Base64Uploader.java
BinaryUploader.java
5、测试:
往编辑器添加一张图片
再来看看图片保存目录
通过改源码的方式就能成功对图片进行统一管理了。
6、在strtus中使用Ueditor编辑器需要注意
如果配置文件中配置了过滤所有的请求,需要将其设置成只过滤.action的请求,否则导致文件保存不成功的情况。
到此,关于“html5编辑器本地保存图片不显示怎么解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注恰卡编程网网站,小编会继续努力为大家带来更多实用的文章!
推荐阅读
-
html5中video不支持的格式是什么
-
html5会不会被淘汰
html5会不会被淘汰这篇文章主要介绍“html5会不会被淘汰”的...
-
IE开始支持HTML5的版本是什么
-
youtube html5播放失败如何解决
-
html5 input禁止输入如何实现
html5input禁止输入如何实现这篇“html5input...
-
html5中的base怎么使用
html5中的base怎么使用这篇文章主要介绍“html5中的ba...
-
html5 date样式如何修改
-
html5的含义是什么
html5的含义是什么这篇文章主要介绍“html5的含义是什么”的...
-
HTML5如何实现禁止android视频另存为
-
html5如何实现隐藏剩余显示内容