Due to work needs, the content of the word document must be pasted into the editor for use
But I found that the picture in the word became file:///xxxx.jpg after being pasted. If other people can't access it after uploading to the server, I found many editors online and found that none of them can directly solve this problem.
Considering that I basically don’t use windows except for work, I plan to use nodejs to solve this problem.
I found that no matter what editor the picture is converted to base64, it can be used directly (IE8 and below may not support it). Since the word document function added in the editor is only for your own use, you can ignore this browser.
After searching for a long time, I tried many editors, and found that only the function of ckeditor still meets my needs (supports custom HTML attributes)
Then I wrote an operation to monitor the paste event to get the path of file:///xxxx.jpg after pasting
<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>
Save the above code as a word.js file
Then execute node word.js to automatically create an http service
At this time, we use jsonp in the editor to obtain the processed image data and replace the original file:///xxxxxx.jpg path.
Code for processing word image batch upload
Other business logic parameter codes
Of course, the above code can also be packaged into a local executable file to be used by people who do not understand computers (I will not talk about the specific method here)
The code referenced by the foreground
The following is the effect after the implementation, can automatically upload all the pictures in Word, and there is a progress bar display
All pictures can be saved in the server, and support distributed picture storage
The picture addresses in the editor have all been replaced with the picture addresses of the server, and other users can also access normally
For details, please refer to this article: http://blog.ncmem.com/wordpress/2019/07/30/ckeditor%e7%b2%98%e8%b4%b4word/
Discussion group: 223813913