Z-Blog支援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中的所有圖片，使用起來非常的方便，有需要的朋友可以直接下載使用：