PHPcms編輯器如何粘貼帶格式的word文檔

時間 2019-11-10

標籤 phpcms 編輯器如何粘貼格式 word 文檔欄目 CMS 简体版

原文原文鏈接

在以前在工做中遇到在富文本編輯器中粘貼圖片不能展現的問題，因而各類網上扒拉，終於找到解決方案，在這裏感謝一下知乎中衆大神以及TheViper。javascript

經過知乎提供的思路找到粘貼的原理，經過TheViper找到粘貼圖片的方法。php

其原理爲一下步驟：css

監聽粘貼事件；【用於插入圖片】html

獲取光標位置；【記錄圖片插入位置】java

獲取剪切板內容；【主要是獲取文件】jquery

上傳剪切板圖片；ajax

在指定光標位置插入圖片。chrome

如下是代碼部分：json

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();

}

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">

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/10/19/phpcms%e7%bc%96%e8%be%91%e5%99%a8%e5%a6%82%e4%bd%95%e7%b2%98%e8%b4%b4%e5%b8%a6%e6%a0%bc%e5%bc%8f%e7%9a%84word%e6%96%87%e6%a1%a3/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。