html5編輯器本地保存圖片不顯示怎么解決

這篇文章主要介紹“html5編輯器本地保存圖片不顯示怎么解決”，在日常操作中，相信很多人在html5編輯器本地保存圖片不顯示怎么解決問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”html5編輯器本地保存圖片不顯示怎么解決”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

　　用Eclipse開(kāi)發(fā)WEB項(xiàng)目的時(shí)候，使用到了Ueditor上傳圖片的功能，插件會(huì)自動(dòng)將上傳的圖片保存在Eclipse工作目錄下，這種保存的方式非常不利于后續(xù)對(duì)圖片的操作(管理)，這時(shí)我們就要修改Ueditor的源碼，解決上傳圖片時(shí)的路徑問(wèn)題。

　　1、下載ueditor源碼并引用到工程

　　將jsp/src/目錄下的所有文件拷貝到你的工程下

　　目錄視圖

　　將ueditor-1.1.2.jar刪除，只引用前四個(gè)jar包

　　2、修改Tomcat服務(wù)器配置，添加圖片映射路徑

　　在tomcat中添加圖片的絕對(duì)路徑和圖片訪問(wèn)虛擬路徑

　　修改config.json配置文件，訪問(wèn)路徑填寫剛配置的虛擬目錄

　　3、創(chuàng)建配置文件(可省略)

　　在src目錄下創(chuàng)建config.properties ，存放圖片路徑

　　讀配置文件的目的是為了動(dòng)態(tài)修改保存路徑，可以更方便的管理圖片

　　創(chuàng)建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();

　　//默認(rèn)從類的所在包目錄開(kāi)始查找資源文件

　　//如果要classpath的根目錄開(kāi)始找，必須加上/

　　//默認(rèn)從classspath的根目錄開(kāi)始查找資源文件

　　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、修改源碼(修改圖片保存路徑)

　　選中項(xiàng)目，使用Eclipse文件搜索功能

　　搜索 physicalPath

　　找到在3個(gè)類中使用到了 physicalPath

　　這里有3個(gè)類的是要修改源碼的

　　//注釋掉原來(lái)的路徑代碼

　　//String physicalPath = this.rootPath + savePath;

　　使用自定義的路徑(這個(gè)路徑是通過(guò)配置文件讀取的,相當(dāng)于取代源碼中的this.savePath)

　　注意：ConfigUtil.get("savepath") ，字段名必須一樣，否則讀取不了

　　ImageHunter.java

　　Base64Uploader.java

　　BinaryUploader.java

　　5、測(cè)試：

　　往編輯器添加一張圖片

　　再來(lái)看看圖片保存目錄

　　通過(guò)改源碼的方式就能成功對(duì)圖片進(jìn)行統(tǒng)一管理了。

　　6、在strtus中使用Ueditor編輯器需要注意

　　如果配置文件中配置了過(guò)濾所有的請(qǐng)求，需要將其設(shè)置成只過(guò)濾.action的請(qǐng)求，否則導(dǎo)致文件保存不成功的情況。

到此，關(guān)于“html5編輯器本地保存圖片不顯示怎么解決”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！