百度Ueditor富文字編輯器基礎使用配置以及怎樣儲存圖片到磁碟
1.下載ueditor,地址:http://ueditor.baidu.com/website/download.html
2.我下載的是jsp版本的
3.下載解壓後,把整個資料夾下面的東西全部放到一個目錄下,我放在了ueditor資料夾下。
4.之後會報錯,因為沒有相應的jar包。開啟jsp資料夾,會有一個lib資料夾,把整個lib資料夾複製到WEB-INF下,然後builepath一下,注意,應該放到WEB-INF下,否則可能會出錯。
5.下面我們來測試一下,在jsp中加入相應的js檔案,ueditor自帶的。
6.成功
7.更改ueditor.config.js檔案
8.配置config.json,主要是配置圖片上傳儲存路徑,下面我會教大家如何把圖片儲存到磁碟中。
9.顯然,僅僅這樣是不行的,圖片只能儲存到伺服器中,所以下面我們要修改jar包,配置ueditor儲存圖片路徑,將圖片儲存到專案之外的磁碟當中。
10.下載ueditor的原始碼,地址https://github.com/fex-team/ueditor。
11.下載好之後解壓
12.開啟開發工具,貼上到src下,
13.
14.編寫配置檔案
15.編寫讀取配置檔案的工具類。
16
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.Properties;
/**
* 用於讀取配置檔案
* @author LingDu
*/
public class ConfigUtil {
private static Properties pro;
static{
pro=new Properties();
//預設從類的所在包目錄開始查詢資原始檔
//如果要classpath的根目錄開始找,必須加上/
/*InputStream input=PropertiesUtil.class.
getResourceAsStream("/config.properties");*/
//預設從classspath的根目錄開始查詢資原始檔
InputStream input=ConfigUtil.class
.getClassLoader()
.getResourceAsStream("application.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));
}
}
17.
18.
19.好了,現在我們的原始碼就改寫好了,下面配置伺服器的虛擬路徑。
20.開啟tomcat所在目錄
21
22.好了,下面我們來試一下
23.需要注意的是,如果開發時候用的是eclipse的話,你修改tomcat的虛擬路徑可能會沒有用,因為當你把專案放在eclipse中執行的時候,eclipse還有一份server.xml檔案,會將tomcat中的server.xml檔案給改回來,這時候我們需要修改的就是eclipse的server.xml檔案。以我的STS為例:
24.現在基本上就可以使用了,但在使用的時候也許會遇到一些問題,比如ueditor文字編輯器的字數限制以及隱藏元素路徑,我們可以在配置檔案
wordCount:true, //是否開啟字數統計
maximumWords:10000, //允許的最大字元數
25.隱藏元素路徑,開啟ueditor.config.js。
26.後面要說的是,在我們把圖片存到伺服器後,要怎麼刪除上傳的圖片呢?假如前後端分離的話,我們存在資料庫中的資源地址就是
27.我們在刪除內容的時候這樣寫,現在博主只能想到這個辦法了。
import java.io.File;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import com.qjzx.qjzxadmin.utils.ConfigUtil;
public class DeleteContent {
protected void deleteContent(String content) {
//圖片路徑表示式
String regex ="src=\"(.*?)\"";
Pattern pa = Pattern.compile(regex,Pattern.DOTALL);
Matcher ma = pa.matcher(content);
String savePath = ConfigUtil.get("savepath");
while(ma.find()) {
String temp = ma.group();
//去掉src和雙引號,獲取圖片路徑
temp = temp.replaceAll("src=","" );
temp = temp.replace("\"", "");
File uFile = new File(savePath+File.separator+temp);
if(uFile.isFile()&&uFile.exists()) {
uFile.delete();
}
}
}
}
28.參考文獻
https://blog.csdn.net/gfd54gd5f46/article/details/69348716?locationNum=7&fps=1
http://blog.sina.com.cn/s/blog_13c6397540102wzkj.html
29.最大的受益人是博主自己,感謝那些熱愛分享的人。