ueditor上傳圖片設置的簡單實例

時間 2019-11-22

標籤 ueditor 上傳圖片設置簡單實例简体版

原文原文鏈接

0.前言：我用過ckeditor,kingeditor仍是感受ueditor最好用，功能強大，常常更新。以前由於升級了struts2到2.5的了，本來的kingeditor已經不能共存，因而找到了uditor。開始比較迷茫的使用，各類百度，沒有我滿意的答案，明明能夠很簡單的使用，非要搞得別人看不懂！！！接下來看個人操做，儘可能知足簡單明瞭。javascript

1.首先進入ueditor官網下載，這個很簡單吧！這裏能夠下載： http://ueditor.baidu.com/website/download.html 由於我用的javaweb，因此用的jsp，html

2.添加必要的配置。下載後解壓出來的文件夾的名字是 ueditor1_4_3_3-utf8-jsp 這裏面有個子文件夾叫 utf8-jsp 。java

a.新建一個文件夾名字ueditor,而後把utf8-jsp文件裏的所用東西複製到ueditor，而後把ueditor放到你的項目裏。web

b.固然了，要把ueditor > jsp > lib下的jar包複製到WEB-INF > lib裏，首先看看jar包有沒有自動引入到項目庫中，若是沒有就Build Path一下。apache

3.頁面引入Ueditor,引用兩個必須的Js文件：ueditor.config.js，ueditor.all.js，和實例化ueditor。json

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> 
<script type="text/javascript"src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script> 
</head>
<body>
<h1>UEditor簡單功能</h1>

<!--style給定寬度能夠影響編輯器的最終寬度-->
<script type="text/plain" id="myEditor">
<p>這裏我能夠寫一些輸入提示</p>
</script>
<script type="text/javascript">
// UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

UE.getEditor('myEditor',{
//這裏能夠選擇本身須要的工具按鈕名稱,此處僅選擇以下五個
//toolbars:[['FullScreen','simpleupload','Source', 'Undo', 'Redo','Bold','test']],
//focus時自動清空初始化時的內容
autoClearinitialContent:true,
//關閉字數統計
wordCount:false,
//關閉elementPath
elementPathEnabled:false,
//默認的編輯區域高度
initialFrameHeight:300
//更多其餘參數，請參考ueditor.config.js中的配置項
});
/* UE.Editor.prototype.getActionUrl = function(action) {
//這裏很重要，很重要，很重要，要和配置中的imageActionName值同樣
if (action == 'fileUploadServlet') {
//這裏調用後端咱們寫的圖片上傳接口
return 'http://localhost:8081/Test/fileUploadServlet';
}else{
return this._bkGetActionUrl.call(this, action);
}
} */


</script>

</body>

</html>

4.這是最容易報錯的一步，請你首先找到 ueditor > jsp > controller.jsp，在controller.jsp添加一句後端

觀察控制檯輸出了什麼，我控制太輸出的是：D:\java\workSpace\.metadata\.plugins\org.eclipse.wst.server.core\tmp5\wtpwebapps\WebDemo\session

說明了圖上保存的路徑在這裏，再看看 ueditor > jsp > config.json，app

imageUrlPrefix這個就是訪問你項目的跟路徑名，好比個人是：http://localhost:8080/WebDemo/ueditor.jsp，那麼imageUrlPrefix的值就是WebDemo了，而後找到控制檯輸出的框架

D:\java\workSpace\.metadata\.plugins\org.eclipse.wst.server.core\tmp5\wtpwebapps\WebDemo\裏面看看有沒有userImages文件夾，若是有就找到對應日期下的文件夾，那麼你的圖片就插入成功了。可是顯示不必定成功。

5.顯示異常的解決。

a.若是是下面這種狀況，說明你的imageUrlPrefix寫錯了，看清個人配置 "imageUrlPrefix": "/WebDemo", /* 圖片訪問路徑前綴 */ 項目名稱WebDemo前面是有 / 的。若是你不知道你的項目路徑，能夠對着項目右擊，點擊Properties ，下右圖所示，紅色表示你的項目跟路徑訪問地址

b.若是顯示爲未找到上傳數據

ueditor是一個功能十分強大的在線文本編輯器，可是在ssh框架中，確切的說實在struts2中因爲其攔截器須要對request，session對象進行從新封裝，這個過程當中會把request對象中保存的一些內容清空，因此會致使ueditor的上傳功能獲取不到須要上傳的內容致使「未找到上傳文件」的錯誤！以前你的web.xml裏struts2配置多是

<filter>
　　<filter-name>struts2</filter-name>
　　<filter-class>
　　org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter
　　</filter-class>
</filter>

<filter-mapping>
　　<filter-name>struts2</filter-name>
　　<url-pattern>/*</url-pattern>
</filter-mapping>

就是由於這個/*攔截了controller.jsp 我作的修改是

<filter-mapping>
　　<filter-name>struts2</filter-name>
　　<url-pattern>*.do</url-pattern>

　　<url-pattern>*.action</url-pattern>
</filter-mapping>

固然還有別的辦法，本身去百度或者谷歌一下。其實最好的辦法是這篇文章闡述的方法 http://blog.sina.com.cn/s/blog_63b470180102ux4a.html

我固然親自斷點測試了一下，很好！！佩服牛人提供的好的方法！！！

6.作完這些工做，那麼恭喜你ueditor就能夠正常使用和上傳圖片了。