由于工作需要必须将 Word 文档内容粘贴到编辑器中使用
但发现 Word 中的图片粘贴后变成了 file:///xxxx.jpg 这种内容, 如果上传到服务器后其他人也访问不了, 网上找了很多编辑器发现没有一个能直接解决这个问题
考虑到自己除了工作其他时间基本上不使用 Windows, 因此打算使用 Node.JS 来解决这一问题
发现不管什么编辑器只要将图片转换成 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);
- return newBuffer(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粘贴word/
来源: http://www.bubuko.com/infodetail-3298589.html