自動上傳本地圖檔和word圖檔(word圖檔需使用從word粘貼功能)
在之前在工作中遇到在富文本編輯器中粘貼圖檔不能展示的問題，于是各種網上扒拉，終于找到解決方案，在這裡感謝一下知乎中衆大神以及TheViper。
通過知乎提供的思路找到粘貼的原理，通過TheViper找到粘貼圖檔的方法。
其原理為一下步驟：
監聽粘貼事件；【用于插入圖檔】
擷取光标位置；【記錄圖檔插入位置】
擷取剪切闆内容；【主要是擷取檔案】
上傳剪切闆圖檔；
在指定光标位置插入圖檔。
以下是代碼部分：
1.擷取光标代碼部分，大部分都是直接利用TheViper的代碼，隻是做了簡單的修改，在擷取光标的位置添加了插件子集document對象，因為直接使用document對象擷取不到光标位置
var isSupportRange = typeof document.createRange == \'function\';
var currentRange,
_parentElement;
// 擷取目前光标多在位置
function getCurrentRange(target) {
var selection,
range;
if (isSupportRange) {
selection = target.getSelection();
if (selection.getRangeAt && selection.rangeCount) {
range = selection.getRangeAt(0);
_parentElement = range.commonAncestorContainer;
}
} else {
range = target.selection.createRange();
_parentElement = range.parentElement();
}
return range;
}
function saveSelection(target) {
currentRange = getCurrentRange(target);
}
function _restoreSelection() {
if (!currentRange) {
return;
}
var selection,
range;
if (isSupportRange) {
selection = document.getSelection();
selection.removeAllRanges();
selection.addRange(currentRange);
} else {
range = document.selection.createRange();
range.setEndPoint(\'EndToEnd\', currentRange);
if (currentRange.text.length === 0) {
range.collapse(false);
} else {
range.setEndPoint(\'StartToStart\', currentRange);
}
range.select();
}
}
function insertImage(html,target) {
if (document.selection)
currentRange.pasteHTML(html);
else
target.execCommand("insertImage", false, html);
saveSelection();
}
2.監聽粘貼事件、擷取上傳圖檔、上傳至伺服器并添加至編輯器
CKEDITOR.instances[\'document-info\'].on(\'instanceReady\', function(e) {
this.document.on(\'paste\', function(event) {
var target = event.sender.$;
saveSelection(target);
var items = event.data.$.clipboardData.items;
if (!items) {
return;
}
for (var i = items.length - 1; i >= 0; i--) {
if (items[i].kind == \'file\' && items[i].type.indexOf(\'image/\') !== -1) {
var file = items[i].getAsFile();
if (file) {
if (file.size === 0) {
return;
}
var formData = new FormData();
formData.append("file", file);
$.ajax({
method: \'POST\',
url: url,
data: formData,
processData: false,
contentType: false,
success: function(response) {
var _img_html = response.url;
insertImage(_img_html,target);
}
});
}
}
}
});
});
優化後的代碼變得更加精簡
//手動粘貼
this.PasteManual = function ()
{
if (!this.setuped)
{
this.setup_tip(); return;
}
if (!this.chrome45 && !_this.edge)
{
this.app.paste();
}
else if (this.chrome45)
{
this.app.paste();
}
else if(this.edge)
{
this.app.paste();
}
};
前台的引用也非常的簡單：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>WordPaster-jsp-ueditor-1.2.6.0</title>
<script type="text/javascript" src="ueditor.config.js" charset="utf-8"></script>
<script type="text/javascript" src="ueditor.all.min.js" charset="utf-8"></script>
<link type="text/css" rel="Stylesheet" href="WordPaster/css/WordPaster.css"/>
<link type="text/css" rel="Stylesheet" href="WordPaster/js/skygqbox.css" />
<script type="text/javascript" src="WordPaster/js/json2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="WordPaster/js/jquery-1.4.min.js" charset="utf-8"></script>
<script type="text/javascript" src="WordPaster/js/w.edge.js" charset="utf-8"></script>
<script type="text/javascript" src="WordPaster/js/w.app.js" charset="utf-8"></script>
<script type="text/javascript" src="WordPaster/js/w.file.js" charset="utf-8"></script>
<script type="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>
<script type="text/javascript" src="WordPaster/js/WordPaster.js" charset="utf-8"></script>
</head>
<body>
<textarea name="背景取值的key" id="myEditor">這裡寫你的初始化内容</textarea>
<script type="text/javascript">
var pasterMgr = new WordPasterManager();
pasterMgr.Config["PostUrl"] = "http://localhost:8080/WordPaster2UEditor1.4x/upload.jsp"
pasterMgr.Load();//加載控件
var ue = UE.getEditor(\'myEditor\');
ue.ready(function() {
//設定編輯器的内容
ue.setContent(\'hello\');
//擷取html内容，傳回: <p>hello</p>
var html = ue.getContent();
//擷取純文字内容，傳回: hello
var txt = ue.getContentTxt();
pasterMgr.SetEditor(ue);
});
</script>
</body>
</html>
資料送出部分需要注意
processData: false,
contentType: false,
這兩項需要設定，否則檔案不能正常上傳
該問題沒有完美的解決，存在以下疑問，如有想法，請告知。
1.從word中複制圖檔為rtf格式，不能被儲存，并解析圖檔，有待解決；
2.隻能單個檔案複制，多個檔案複制存在問題。這個問題使用WordPaster插件解決掉了，能夠批量上傳Word中的所有圖檔，并且保留Word樣式，效果如下：
伺服器能夠接收到圖檔，并進行儲存
編輯器中的圖檔位址已經全部被替換成了伺服器的圖檔位址，其它的使用者也能夠正常通路
在接觸該問題前期，錯誤的解決思路：
1.通過input控件上傳，因浏覽器安全設定原因，不允許input:file指派；
2.使用convas将圖檔轉換為base64存儲，該處也有問題，傳喚base64時，存在跨域問題。
經過這些處理基本上實作了一個完整的Word圖檔上傳插件（WordPaster），能夠自動上傳剪切闆中的圖檔，能夠自動上傳Word中的所有圖檔，使用起來非常的友善，有需要的朋友可以直接下載下傳使用：http://blog.ncmem.com/wordpress/2019/08/07/ckeditor從word粘貼圖檔/