本地圖文直接複製到線上編輯器中
1.4.2之後官方並沒有做功能的改動,1.4.2在word複製這塊沒有bug,其他版本會出現手動無法轉存的情況
本文使用的後臺是Java。前端為Jsp(前端都一樣,後臺如果語言不通得自己做 Base64編碼解碼)
因為公司業務需要支援IE8 ,網上其實有很多富文字框,效果都很好。
例如www.wangEditor.com 但試了一圈都不支援IE8 。
所以回到Ueditor,由於官方沒有維護,新的neuditor 也不知道什麼時候能支援word自動轉存,只能自己想辦法。
如果沒有必要,不建議使用ueditor。我也是沒有辦法。
改動過後的外掛只適合IE8。
這裡要說明的一點是百度官方的編輯器不支援word圖片批量轉存,貼上word後需要手動選擇圖片再進行上傳一次操作。網上找到的大部分的示例都是這個操作。如果需要自動批量上傳word圖片的話可以使用WordPaster這個控制元件。
1.IE設定
在受信任站點裡新增信任網站。
這裡本機測試使用的直接是 http://localhost
因為需要讀取客戶端的檔案,所以需要設定允許訪問資料來源。
ActiveXObject設定可以去網上參考,這裡不列舉了。
前面的
到這裡 IE 的準備工作完成了。
修改ueditor.all.js關鍵程式碼
14006行附近,如果是其他版本的ueditor,在功能正常的情況下,可以拷貝下面程式碼。
var imgPath = attrs.src;
var imgUrl = attrs.src;
if (navigator.appName === 'Microsoft Internet Explorer') { //判斷是否是IE瀏覽器
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { //判斷瀏覽器核心是否為Trident核心IE8.0
var realPath = imgPath.substring(8, imgPath.length);
var filename = imgPath.substring(imgPath.lastIndexOf('/') + 1, imgPath.length);
var result = UploadForIE.saveAttachment(filename, realPath);
if (result) {
var json = eval('(' + result + ')');
imgUrl = json.url;
}
}
}
img.setAttr({
width: attrs.width,
height: attrs.height,
alt: attrs.alt,
word_img: attrs.src,
src: imgUrl,
'style': 'background:url(' + (flag ? opt.themePath + opt.theme + '/images/word.gif': opt.langPath + opt.lang + '/images/localimage.png') + ') no-repeat center center;border:1px solid #ddd'
})
uploadForIE.js。
var UploadForIE = {
// 儲存到xml附件,並且通過ajax 上傳
saveAttachment: function(upload_filename, localFilePath) {
//後臺接受圖片儲存的方法。
var upload_target_url = "uploadImg";
var strTempFile = localFilePath;
// 建立XML物件,組合XML文件資料
var xml_dom = UploadForIE.createDocument();
xml_dom.loadXML('<?xml version="1.0" encoding="GBK" ?> <root/>');
// 建立ADODB.Stream物件
var ado_stream = new ActiveXObject("adodb.stream");
// 設定流資料型別為二進位制型別
ado_stream.Type = 1; // adTypeBinary
// 開啟ADODB.Stream物件
ado_stream.Open();
// 將本地檔案裝載到ADODB.Stream物件中
ado_stream.LoadFromFile(strTempFile);
// 獲取檔案大小(以位元組為單位)
var byte_size = ado_stream.Size;
// 設定資料傳輸單元大小為1KB
var byte_unit = 1024;
// 獲取檔案分割資料單元的數量
var read_count = parseInt((byte_size / byte_unit).toString()) + parseInt(((byte_size % byte_unit) == 0) ? 0 : 1);
// 建立XML元素節點,儲存上傳檔名稱
var node = xml_dom.createElement("uploadFilename");
node.text = upload_filename.toString();
var root = xml_dom.documentElement;
root.appendChild(node);
// 建立XML元素節點,儲存上傳檔案大小
var node = xml_dom.createElement("uploadFileSize");
node.text = byte_size.toString();
root.appendChild(node);
// 建立XML元素節點,儲存上傳檔案內容
for (var i = 0; i < read_count; i++) {
var node = xml_dom.createElement("uploadContent");
// 檔案內容編碼方式為Base64
node.dataType = "bin.base64";
// 判斷當前儲存的資料節點大小,根據條件進行分類操作
if ((parseInt(byte_size % byte_unit) != 0) && (i == parseInt(read_count - 1))) {
// 當資料包大小不是資料單元的整數倍時,讀取最後剩餘的小於資料單元的所有資料
node.nodeTypedValue = ado_stream.Read();
} else {
// 讀取一個完整資料單元的資料
node.nodeTypedValue = ado_stream.Read(byte_unit);
}
root.appendChild(node);
}
// 關閉ADODB.Stream物件
ado_stream.Close();
delete ado_stream;
// 建立Microsoft.XMLHTTP物件
// var xmlhttp = new ActiveXObject("microsoft.xmlhttp");
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
// 開啟Microsoft.XMLHTP物件
xmlhttp.open("post", upload_target_url, false);
// 使用Microsoft.XMLHTP物件上傳檔案
xmlhttp.send(xml_dom);
var state = xmlhttp.readyState;
var success_state = true;
if (state != 4) {
success_state = false;
}
var result = xmlhttp.responseText;
delete xmlhttp;
return result;
},
// 建立DOMdocuemnt
createDocument: function() {
var xmldom;
var versions = ["MSXML2.DOMDocument.6.0", "MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument"],
i,
len;
for (i = 0, len = versions.length; i < len; i++) {
try {
xmldom = new ActiveXObject(versions[i]);
if (xmldom != null) break;
} catch(ex) {
//跳過
alert("建立document物件失敗!");
}
}
return xmldom;
}
}
UEditorAction儲存圖片方法
@RequestMapping("/uploadImg")
public void uploadADO(HttpServletRequest request, HttpServletResponse response) {
String path1 = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() +path1;
String rootPath = request.getServletContext().getRealPath("/");
// 設定資料傳輸單元大小為1KB
int unit_size = 1024;
// 初始化xml檔案大小(以位元組為單位)
int xmlFileSize = 0;
// 初始化上傳檔名稱(完整檔名)
String xmlFilename = "";
// 初始化上傳檔案儲存路徑(絕對物理路徑)
String xmlFilepath = "";
// 宣告檔案儲存位元組陣列
byte[] xmlFileBytes = null;
try {
// 初始化 SAX 序列xml檔案解析器
SAXBuilder builder = new SAXBuilder();
Document doc = builder.build(request.getInputStream());
Element eRoot = doc.getRootElement();
// 獲取上傳檔案的完整名稱
Iterator it_name = eRoot.getChildren("uploadFilename").iterator();
if (it_name.hasNext()) {
xmlFilename = ((Element) it_name.next()).getText();
}
//存放的相對路徑目錄
String relativePath = "/temp/"+EditorUtil.getToday()+"/";
xmlFilepath = rootPath+ relativePath;
// 獲取上傳檔案的大小
Iterator it_size = eRoot.getChildren("uploadFileSize").iterator();
if (it_size.hasNext()) {
xmlFileSize = Integer.parseInt(((Element) it_size.next())
.getText());
if (xmlFileSize > 0) {
int unit_count = 0;
// 為儲存檔案內容的位元組陣列分配儲存空間
xmlFileBytes = new byte[xmlFileSize];
// 迴圈讀取檔案內容,並儲存到位元組陣列中
Iterator it_content = eRoot.getChildren("uploadContent")
.iterator();
while (it_content.hasNext()) {
// 初始化Base64編碼解碼器
BASE64Decoder base64 = new BASE64Decoder();
byte[] xmlNodeByteArray = base64
.decodeBuffer(((Element) it_content.next())
.getText());
if (xmlNodeByteArray.length >= unit_size) {
// 讀取一個完整資料單元的資料
System.arraycopy(xmlNodeByteArray, 0, xmlFileBytes,
unit_count * unit_size, unit_size);
} else {
// 讀取小於一個資料單元的所有資料
System.arraycopy(xmlNodeByteArray, 0, xmlFileBytes,
unit_count * unit_size, xmlFileSize
% unit_size);
}
// 繼續向下讀取檔案內容
unit_count++;
}
}
}
// 儲存路徑
File path = new File(xmlFilepath);
if(!path.exists()){
path.mkdirs();
}
// 儲存檔案 word貼上圖片的名稱
File file = new File(path,xmlFilename);
// 建立檔案輸入輸出流
FileOutputStream fos = new FileOutputStream(file);
// 寫入檔案內容
fos.write(xmlFileBytes);
fos.flush();
// 關閉檔案輸入輸出流
fos.close();
ReturnUploadImage rui = new ReturnUploadImage();
rui.setTitle(xmlFilename);//這裡需要設定檔名稱如:xxx.jpg
rui.setOriginal(xmlFilename);//這裡需要設定檔名稱如:xxx.jpg
rui.setState("SUCCESS");
rui.setUrl(basePath +relativePath+xmlFilename);
JSONObject json = new JSONObject(rui);
String result = json.toString();//這邊就是為了返回給UEditor做的格式轉換
response.getWriter().write(result);
} catch (Exception e) {
e.printStackTrace();
}
}
優化後的程式碼:
upload.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page contentType="text/html;charset=utf-8"%>
<%@ page import = "Xproer.*" %>
<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%out.clear();
/*
更新記錄:
2013-01-25 取消對SmartUpload的使用,改用commons-fileupload元件。因為測試發現SmartUpload有記憶體洩露的問題。
*/
//String path = request.getContextPath();
//String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String uname = "";// = request.getParameter("uid");
String upass = "";// = request.getParameter("fid");
// Check that we have a file upload request
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
//upload.setSizeMax(262144);//256KB
List files = null;
try
{
files = upload.parseRequest(request);
}
catch (FileUploadException e)
{// 處理檔案尺寸過大異常
out.println("上傳檔案異常:"+e.toString());
return;
}
FileItem imgFile = null;
// 得到所有上傳的檔案
Iterator fileItr = files.iterator();
// 迴圈處理所有檔案
while (fileItr.hasNext())
{
// 得到當前檔案
imgFile = (FileItem) fileItr.next();
// 忽略簡單form欄位而不是上傳域的檔案域(<input type="text" />等)
if(imgFile.isFormField())
{
String fn = imgFile.getFieldName();
String fv = imgFile.getString();
if(fn.equals("uname")) uname = fv;
if(fn.equals("upass")) upass = fv;
}
else
{
break;
}
}
Uploader up = new Uploader(pageContext,request);
up.SaveFile(imgFile);
String url = up.GetFilePathRel();
out.write(url);
response.setHeader("Content-Length",url.length()+"");//返回Content-length標記,以便控制元件正確讀取返回地址。
%>
剩下的後臺功能和js參考下載檔案中的UEditorAction 和 uploadForIE.js。
下面是我安裝的依賴pom結構,可以根據自己的進行調整。
<dependency>
<groupId>com.baidu</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.0</version>
</dependency>
基於springboot 和idea ,這裡只提取了自動轉存功能出來,功能還沒測試,git程式碼沒做公開,等後續測試好了再公開。
可以先使用csdn下載檢視程式碼。
pom裡引用了ueditor.jar
需要根據各自情況安裝jar包
1.4.2中的jar包版本是1.1.0
mvn install:install-file -DgroupId=com.baidu -DartifactId=ueditor -Dversion=1.1.0 -Dpackaging=jar -Dfile=\ueditor\jsp\lib\ueditor-1.1.0.jar
執行
UeditorApplication的main方法
然後訪問http://localhost:8088/ueditor/ 就可以測試了。
完成後的效果:
圖片自動批量上傳,不需要手動一張張選擇圖片上傳,使用者體驗比百度ueditor自帶的更好,傳圖效率更高。
上傳成功後,圖片地址自動替換成伺服器地址
圖片自動儲存在伺服器中
詳細資料可以參考這篇文章:
討論群:223813913
相關文章
- 本地圖文直接複製到HTML編輯器中地圖HTML
- markdown編輯器typora本地圖片上傳到自己的伺服器地圖伺服器
- 分享一款可編輯本地電腦檔案的線上編輯器
- HTML線上編輯器HTML
- word圖文混排複製到KindEditor圖片不顯示
- word圖文混排複製到CuteEditor圖片不顯示
- Html 文件線上編輯器HTML
- 線上富文字編輯器初探
- 線上HTML編輯器推薦HTML
- wemall軟體交易平臺微信圖文編輯器
- 從ASM磁碟中複製檔案到本地檔案系統ASM
- 解決Kali LinuxVI編輯器無法複製問題Linux
- 線上程式碼編輯器選型
- 地圖編輯器開發中的心得地圖
- 教你如何完美儲存Html編輯器編輯過的文字到Word中HTML
- aix掛載光碟機並把內容複製到本地硬碟中AI硬碟
- 程式碼線上編譯器(上)- 編輯及編譯編譯
- 使用vi文字編輯器及Linux複製貼上小技巧Linux
- canvas圖形編輯器Canvas
- PostgreSQL邏輯複製資料同步到kafkaSQLKafka
- 10個線上HTML程式碼編輯器HTML
- Android原生簡易圖文編輯器和展示實現Android
- Typora for Mac(Markdown文字編輯器) 1.7.6中文版Mac
- Typora for Mac(Markdown文字編輯器) 1.7.5中文版Mac
- Draw.ioMac/Win:支援線上編輯和匯出的流程圖繪製神器Mac流程圖
- 15個線上多媒體(圖片、音訊、視訊)編輯器音訊
- 微信小程式圖文編輯元件開發(偽富文字編輯)微信小程式元件
- 直接從chrome中複製的body到postman中希望能自動識別去除空格ChromePostman
- Posterino for Mac圖片編輯器Mac
- 遊戲地圖編輯器 (轉)遊戲地圖
- 如何在macOS Big Sur中編輯、複製或刪除Memoji表情Mac
- web 應用線上編輯器 glitch 簡介Web
- Markdown線上、離線編輯器與使用教程
- 開源線上視覺化流程編輯器視覺化
- 快速開發,7個 Bootstrap 線上編輯器boot
- 線上編輯器KindEditor看樣子不錯
- 本地組策略編輯器怎麼開啟win10 W10本地組策略編輯器怎麼開啟Win10
- PlistEdit Pro for Mac(Plist編輯器) 1.9.7中文直裝版Mac