支援複製貼上word圖片的富文字編輯器
在之前在工作中遇到在富文字編輯器中貼上圖片不能展示的問題，於是各種網上扒拉，終於找到解決方案，在這裡感謝一下知乎中眾大神以及TheViper。
通過知乎提供的思路找到貼上的原理，通過TheViper找到貼上圖片的方法。
其原理為一下步驟：
監聽貼上事件；【用於插入圖片】
獲取游標位置；【記錄圖片插入位置】
獲取剪下板內容；【主要是獲取檔案】
上傳剪下板圖片；
在指定游標位置插入圖片。
以下是程式碼部分：
1.獲取游標程式碼部分，大部分都是直接利用TheViper的程式碼，只是做了簡單的修改，在獲取游標的位置添加了外掛子集document物件，因為直接使用document物件獲取不到游標位置
varisSupportRange =typeofdocument.createRange == 'function';
varcurrentRange,
_parentElement;
//獲取當前游標多在位置
functiongetCurrentRange(target) {
varselection,
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();
}
returnrange;
}
functionsaveSelection(target) {
currentRange = getCurrentRange(target);
}
function_restoreSelection() {
if(!currentRange) {
return;
}
varselection,
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();
}
}
functioninsertImage(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) {
vartarget = event.sender.$;
saveSelection(target);
varitems = event.data.$.clipboardData.items;
if(!items) {
return;
}
for(vari = items.length - 1; i >= 0; i--) {
if(items[i].kind == 'file' && items[i].type.indexOf('image/') !== -1) {
varfile = items[i].getAsFile();
if(file) {
if(file.size === 0) {
return;
}
varformData =newFormData();
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();
}
elseif(this.chrome45)
{
this.app.paste();
}
elseif(this.edge)
{
this.app.paste();
}
};
前臺的引用也非常的簡單：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>WordPaster-jsp-ueditor-1.2.6.0</title>
<scripttype="text/javascript"src="ueditor.config.js"charset="utf-8"></script>
<scripttype="text/javascript"src="ueditor.all.min.js"charset="utf-8"></script>
<linktype="text/css"rel="Stylesheet"href="WordPaster/css/WordPaster.css"/>
<linktype="text/css"rel="Stylesheet"href="WordPaster/js/skygqbox.css"/>
<scripttype="text/javascript"src="WordPaster/js/json2.min.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/jquery-1.4.min.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/w.edge.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/w.app.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/w.file.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/skygqbox.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/WordPaster.js"charset="utf-8"></script>
</head>
<body>
<textareaname="後臺取值的key"id="myEditor">這裡寫你的初始化內容</textarea>
<scripttype="text/javascript">
varpasterMgr =newWordPasterManager();
pasterMgr.Config["PostUrl"] ="http://localhost:8080/WordPaster2UEditor1.4x/upload.jsp"
pasterMgr.Load();//載入控制元件
varue = UE.getEditor('myEditor');
ue.ready(function() {
//設定編輯器的內容
ue.setContent('hello');
//獲取html內容，返回: <p>hello</p>
varhtml = ue.getContent();
//獲取純文字內容，返回: hello
vartxt = 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中的所有圖片，使用起來非常的方便，有需要的朋友可以直接下載使用：