由于工作需要必須將word文檔內容粘貼到編輯器中使用

但發現word中的圖片粘貼后變成了file:///xxxx.jpg這種內容，如果上傳到服務器后其他人也訪問不了，網上找了很多編輯器發現沒有一個能直接解決這個問題

考慮到自己除了工作其他時間基本上不使用windows，因此打算使用nodejs來解決這一問題

發現不管什么編輯器只要將圖片轉換成base64后就可以直接使用（IE8及一下可能不支持），由于編輯器中添加word文檔功能也只是自己用，因此可以忽略這種瀏覽器了

找了很久，試用了很多編輯器，發現只有ckeditor的功能還算符合我的需求（支持自定義HTML屬性）

然后我寫了一個監聽粘貼事件的操作，用來獲取粘貼之后的file:///xxxx.jpg這種路徑

<script>

????var?service = {

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){

????????var?result = {status: 1, info:?'success'};

????????result = JSON.stringify(result);

????????if(typeof?query.callback ==?'string'){

????????????result = query.callback +?'('?+ result +?')';

????????}

????????res.end(result);

????},

????word :?function(res, query){

????????var?_this = service;

????????var?result = {status: 0, info:?'error'};

????????if(typeof?query.file ==?'string'){

????????????var?img = query.file.match(/file:\/\/+(localhost)?(\S+\.(png|jpg|jpeg|gif|bmp))/i);

????????????console.log(img);

????????????if(img){

????????????????var?base64 = _this.base64_encode(img[2]);

????????????????result.status = 1;

????????????????result.info =?'data:image/'?+ img[3] +?';base64,'?+ base64;

????????????}

????????}

????????result = JSON.stringify(result);

????????if(typeof?query.callback ==?'string'){

????????????result = query.callback +?'('?+ result +?')';

????????}

????????res.end(result);

????}

},

start :?function(){

????var?_this??=?this;

????var?Server = _this.http.createServer(function?(req, res) {

????????var?URL = _this.url.parse(req.url);

????????var?receive = [];

????????var?router =?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){

????var?bitmap =?this.fs.readFileSync(file);

????return?new?Buffer(bitmap).toString('base64');

}

};

service.start();

</script>

將以上代碼保存為一個word.js文件

然后執行 node word.js就會自動創建一個http服務了

這個時候我們在編輯器中使用jsonp獲取到處理完的圖片數據替換原來的file:///xxxxxx.jpg路徑就搞定了

處理word圖片批量上傳的代碼

其它的業務邏輯參數代碼

當然也可以將以上代碼打包成一個本地執行文件去給不懂電腦的人使用就行了（具體方法我這里就不說了）

前臺引用的代碼

下面是實現后的效果，能夠自動上傳Word中的所有圖片，并且有進度條顯示

所有圖片都能夠保存在服務器中，而且支持分布式圖片存儲

編輯器中的圖片地址已經全部替換成了服務器的圖片地址，其它的用戶也能夠正常訪問

詳細內容可以參考這篇文章：http://blog.ncmem.com/wordpress/2019/07/30/ckeditor%e7%b2%98%e8%b4%b4word/

討論群：223813913

總結

以上是生活随笔為你收集整理的ueditor编辑器复制粘贴图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。