關於百度編輯器上傳圖片和視訊的具體步驟（絕對能用）
過年之後來到公司的第一件事就是整後臺的上傳圖片和視訊到圖片伺服器，也就是到指定的路勁，這個功能很實用。以前用的ckeditor，現在我給整成了百度編輯器，以下是使用方法。親測可用
我也是在網上找了好幾天的資料，說實話，好多人出現的問題都不一樣，所以導致現在網上的眾說紛紜也只能解決當下的部分問題，最終還是讓我找到了一個版本，而且我也把原始碼研究了一下，真的舒服。現在對我來說，已經很簡單了，下面的東西直接就可以用了。話不多說，上程式碼：
參考：https://blog.csdn.net/littlebirdofjava/article/details/53945416
首先是一個工具類，我把它放在工具類了，其實是自己重寫的原始碼中的ActionEnter，這個也需要在controller.jsp中修改一下
package com.piesat.util;
import com.baidu.ueditor.ActionEnter;
import com.baidu.ueditor.ConfigManager;
import com.baidu.ueditor.define.ActionMap;
import com.baidu.ueditor.define.BaseState;
import com.baidu.ueditor.define.State;
import com.baidu.ueditor.hunter.FileManager;
import com.baidu.ueditor.hunter.ImageHunter;
import com.baidu.ueditor.upload.Uploader;
import javax.servlet.http.HttpServletRequest;
import java.util.Map;
/**
* 2018.2.8 13:52
* @author yw
*
*/
public class UeditorActionEnter extends ActionEnter {
private HttpServletRequest request = null;
private String rootPath = null;
private String contextPath = null;
private String actionType = null;
private ConfigManager configManager = null;
public UeditorActionEnter(HttpServletRequest request, String rootPath) {
super(request, rootPath);
this.request = request;
this.rootPath = rootPath;
this.actionType = request.getParameter("action");
this.contextPath = request.getContextPath();
this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath, request.getRequestURI());
}
@Override
public String invoke() {
if (this.actionType != null && ActionMap.mapping.containsKey(this.actionType)) {
if (this.configManager != null && this.configManager.valid()) {
State state = null;
int actionCode = ActionMap.getType(this.actionType);
Map<String, Object> conf = null;
switch (actionCode) {
case 0:
return this.configManager.getAllConfig().toString();
case 1:
case 2:
case 3:
case 4:
conf = this.configManager.getConfig(actionCode);
//注意再這裡修改rootPath和savePath，上傳的實際路徑為rootPath＋savePath
conf.put("rootPath", "/mnt/data16/apache-tomcat-7.0.64-file/webapps/ROOT"
conf.put("savePath", "/upload" + conf.get("savePath"));
state = (new Uploader(this.request, conf)).doExec();
break;
case 5:
conf = this.configManager.getConfig(actionCode);
//注意再這裡修改rootPath和savePath，上傳的實際路徑為rootPath＋savePath
conf.put("rootPath", "/mnt/data16/apache-tomcat-7.0.64-file/webapps/ROOT"
conf.put("savePath", "/upload" + conf.get("savePath"));
String[] list = this.request.getParameterValues((String) conf.get("fieldName"));
state = (new ImageHunter(conf)).capture(list);
break;
case 6:
case 7:
conf = this.configManager.getConfig(actionCode);
//注意再這裡修改rootPath和savePath，上傳的實際路徑為rootPath＋savePath
conf.put("rootPath", "/mnt/data16/apache-tomcat-7.0.64-file/webapps/ROOT");
conf.put("savePath", "/upload" + conf.get("savePath"));
conf.put("dir", "/upload" + conf.get("dir"));
int start = this.getStartIndex();
state = (new FileManager(conf)).listFile(start);
}
return state.toJSONString();
} else {
return (new BaseState(false, 102)).toJSONString();
}
} else {
return (new BaseState(false, 101)).toJSONString();
}
}
}
下面這個是controller.jsp的修改，我只是把原始碼註釋了。
<%-- <%@ page language="java" contentType="text/html; charset=UTF-8"
import="com.baidu.ueditor.ActionEnter"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");
String rootPath = application.getRealPath( "/" );
System.out.println("&&&&&&&&&&&&&&"+rootPath);
out.write( new ActionEnter( request, rootPath ).exec() );
%> --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
import="com.piesat.util.UeditorActionEnter" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");
String rootPath = application.getRealPath( "/" );
out.write( new UeditorActionEnter( request, rootPath ).exec() );
%>
圖片是config.json的配置，如果還有視訊上傳記得要改一下視訊上傳的訪問路徑
在ueditor.config.js中搜索whitList找到
把_url加在圖片中的位置。
然後再最後面加上
source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']
在ueditor.all.js中需要修改幾個地方
搜尋me.commands["insertvideo"]可以檢視修改地方
後面的和這個一樣，我也不帶寫了，就到這裡吧
另外由於插入的程式碼不是視訊，那麼首先要找到插入編輯器程式碼的程式碼，位置在ueditor.all.js裡，如果引用的是uedior.min.js就需要在這裡找，找到以下程式碼:
改完這裡後會發現插入視訊地址後，雖然編輯器可以看到視訊了，但是插入視訊的視窗不能關閉了
之所以會出現這個問題是因為改動embed後，下面紅框的程式碼無法正常找到image標籤及其裡面的屬性導致的，這裡只要註釋紅框的內容就可以解決插入視訊框無法自動關閉的問題。
接著往下看，除開這個bug外，還有新的問題，下面我們來看看點選原始碼再回到編輯器預覽裡會發生什麼。
從上面的圖上可以看出，去原始碼裡已經視訊程式碼不會被過濾了，但是回到編輯器卻是一片空白，這是怎麼回事呢？
問題出在紅框裡的這段程式碼裡：type="application/x-shockwave-flash" class="edui-faked-video" pluginspage="http://www.macromedia.com/go/getflashplayer"
type規定了flash格式，我插入的是flash所以沒問題，pluginspage是提供使用者flash下載地址的（有些使用者沒有安裝flash外掛或者沒有及時更新），那麼問題是在class裡了，因為ediu-faked-video會告訴編輯器這不是一個視訊，因此會刪除embed裡的src的連結，因此回到編輯器預覽會出現白板。
網上其他的答案是把ediu-faked-video改成ediu-video，但我不建議，因為只能解決部分問題而已，還有其他的bug，例如如果上傳的視訊是mp4格式怎麼辦，另外改動的地方不止樣一處，還是有問題，因此我建議改動ueditor.all.js裡的下圖紅框部分：
這裡是判斷如果點選視訊上傳需要匯入的是embed程式碼的情況，之前是image，我們改成了embed，因此這裡switch得到的是embed的程式碼模板，在這裡我們去掉
- type="application/x-shockwave-flash"class="' + classname + '"pluginspage="http://www.macromedia.com/go/getflashplayer"' +'
更改好後，重新整理一下，我們再來看看插入視訊後進入原始碼然後再回到編輯器預覽狀態下已經沒有問題了，可以正常預覽，紅框裡的程式碼的src內容已經不會被過濾了：
另外上傳視訊也可以正常運作，如果是按照網上改edui-faked那種，這裡如果傳的是MP4等其他格式的就會出問題。