UMEditor 圖檔粘貼上傳，實作圖文粘貼，圖檔自動上傳

由于工作需要必須将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;

            }

    }

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;

            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中的所有圖檔，并且有進度條顯示

所有圖檔都能夠儲存在伺服器中，而且支援分布式圖檔存儲