1. 程式人生 > >百度Ueditor富文字編輯器基礎使用配置以及怎樣儲存圖片到磁碟

百度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文字編輯器的字數限制以及隱藏元素路徑,我們可以在配置檔案

editor.config.js裡把這兩個的註釋開啟,不要忘了還有逗號,把10000修改為你想要的值,資料庫中text型別,用utf-8字符集的話能存21000個字左右,大於這個資料庫就會報錯了,當然也可以選用更大的型別,比如mediumtext,可以存500萬字左右,(以utf-8計算)

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.最大的受益人是博主自己,感謝那些熱愛分享的人。