如何複製word的圖文到TinyMCE中自動上傳
由於工作需要必須將word文件內容貼上到編輯器中使用
但發現word中的圖片粘貼後變成了file:///xxxx.jpg這種內容，如果上傳到伺服器後其他人也訪問不了，網上找了很多編輯器發現沒有一個能直接解決這個問題
考慮到自己除了工作其他時間基本上不使用windows，因此打算使用nodejs來解決這一問題
發現不管什麼編輯器只要將圖片轉換成base64後就可以直接使用（IE8及一下可能不支援），由於編輯器中新增word文件功能也只是自己用，因此可以忽略這種瀏覽器了
找了很久，試用了很多編輯器，發現只有ckeditor的功能還算符合我的需求（支援自定義HTML屬性）
然後我寫了一個監聽貼上事件的操作，用來獲取貼上之後的file:///xxxx.jpg這種路徑
<script>
varservice = {
http: require('http'),
url: require('url'),
querystring : require('querystring'),
fs: require('fs'),
config: {
timeout : 60000,
charset :'utf8',
port: 10101,
host:'127.0.0.1'
},
router : {
index :function(res, query){
res.end('Server is running!');
},
check :function(res, query){
varresult = {status: 1, info:'success'};
result = JSON.stringify(result);
if(typeofquery.callback =='string'){
result = query.callback +'('+ result +')';
}
res.end(result);
},
word :function(res, query){
var_this = service;
varresult = {status: 0, info:'error'};
if(typeofquery.file =='string'){
varimg = query.file.match(/file:\/\/+(localhost)?(\S+\.(png|jpg|jpeg|gif|bmp))/i);
console.log(img);
if(img){
varbase64 = _this.base64_encode(img[2]);
result.status = 1;
result.info ='data:image/'+ img[3] +';base64,'+ base64;
}
}
result = JSON.stringify(result);
if(typeofquery.callback =='string'){
result = query.callback +'('+ result +')';
}
res.end(result);
}
},
start :function(){
var_this=this;
varServer = _this.http.createServer(function(req, res) {
varURL = _this.url.parse(req.url);
varreceive = [];
varrouter =null;
switch(URL.pathname){
case'/word':
router = _this.router.word;
break;
case'/check':
router = _this.router.check;
break;
default:
router = _this.router.index;
}
req.setEncoding(_this.config.charset);
req.addListener('data',function(data) {
receive.push(data);
});
res.writeHead(200, {'Content-Type':'text/plain'});
res.on("close",function(){
console.log("res closed");
});
req.on("close",function(){
console.log("req closed");
});
req.addListener('end',function() {
router(res, _this.querystring.parse(URL.query));
});
});
Server.listen(_this.config.port, _this.config.host, 1024);
Server.setTimeout(_this.config.timeout,function(cli){
cli.end('timeout\n');
});
console.log('Server running at http://'+ _this.config.host +':'+ _this.config.port);
},
//base64
base64_encode :function(file){
varbitmap =this.fs.readFileSync(file);
returnnewBuffer(bitmap).toString('base64');
}
};
service.start();
</script>
將以上程式碼儲存為一個word.js檔案
然後執行 node word.js就會自動建立一個http服務了
這個時候我們在編輯器中使用jsonp獲取到處理完的圖片資料替換原來的file:///xxxxxx.jpg路徑就搞定了
處理word圖片批量上傳的程式碼
其它的業務邏輯引數程式碼
當然也可以將以上程式碼打包成一個本地執行檔案去給不懂電腦的人使用就行了（具體方法我這裡就不說了）
前臺引用的程式碼
下面是實現後的效果，能夠自動上傳Word中的所有圖片，並且有進度條顯示
所有圖片都能夠儲存在伺服器中，而且支援分散式圖片儲存
編輯器中的圖片地址已經全部替換成了伺服器的圖片地址，其它的使用者也能夠正常訪問
詳細內容可以參考這篇文章：
討論群：223813913