ckeditor的word图片转存

在线演示：FCKEditor2x示例,CKEditor3x示例,CKEditor4x示例,KindEditor3x示例,KindEditor4x示例,UEditor1x示例,tinymce3x示例,tinymce4x示例,xheditor1x示例,

配置教程：增加自定义参数,自定义文件字段名称,配置上传地址,授权码配置,文件名称生成规则,提取图片地址,图片地址增加域名,设置缩略图,图片格式和质量,控件监听端口,自定义头(Headers)，图片数量限制，间距优化,

整合教程：FCKEditor 2.x,CKEditor3.x,CKEditor4.x,KindEditor3.x,KindEditor4.x,UMEditor1.x,UEditor 1.x,UEditor 1.4x,UEditor 1.5x,wangEditor3,tinymce4x,eWebEditor 9x,eWebEditor 12.x,neditor,tinymce 3x,HDwik 5.0, Drupal 7.34-ckeditor4.x,Joomla-3.4.7-tinymce 4.x,Joomla3x-ckeditor4.x,WordPress,FoonSunCMS,KesionCMS V8,KesionCMS V9,帝国CMS 7.2,emlog,PHPCMS V9,Z-Blog,Z-Blog-php-ueditor,动易SiteFactory 4.7,动易SiteFactory5.6,动易SiteFactory6.2,dedecms 5.7,dedecms 5.7-ckeditor3x,dedecms 5.7-ueditor,vue-cli-ckeditor5x,vue-cli-ueditor,vue-cli-wangEditor,vue-cli-tinymce5,vue-cli-quill,YouDianCMS 9.4.0,DokuWiki,PHPMyWind-5.6,PbootCMS,question2answer

控件包：cab安装包(x86),cab安装包(x64),crx安装包(45-),xpi安装包,exe安装包,pkg安装包,linux-x86-deb,linux-x86-uos,linux-x86-rpm,linux-arm-deb,linux-arm-uos,linux-arm-rpm,linux-mips-deb,linux-mips-uos,linux-mips-rpm,linux-mips-银河麒麟,数字证书根证书,MathType6.5,

ASP示例：FCKEditor 2x,CKEditor 3x,CKEditor 4x,CuteEditor 6x,KindEditor 3x,KindEditor 4x,TinyMCE 3x,TinyMCE 4x,TinyMCE 5x,UEditor1.4x,UEditor 1.5x,UMEditor 1x,xhEditor 1x,eWebEditor 9x,wangEditor,NEditor,Summernote

ASP.NET示例：FCKEditor2x,FCKEditor2x-ext,CKEditor3x,CKEditor3x-ext,CKEditor4x,CuteEditor 6x,KindEditor 3x,KindEditor 4x,TinyMCE 3x,TinyMCE 4x,TinyMCE 5x,UEditor1.4x,,UEditor1.5x,UMEditor1x,xhEditor1x,eWebEditor9x,wangEditor,NEditor,Summernote,SiteFactory 5.2,SiteFactory 5.6

JSP示例：FCKEditor2x,CKEditor3x,CKEditor4x,CuteEditor6x,KindEditor3x,KindEditor4x,TinyMCE3x,TinyMCE4x,TinyMCE5x,UEditor1.4x,UEditor1.5x,UMEditor1x,xhEditor1x,eWebEditor9x,wangEditor,NEditor,Summernote

PHP示例：FCKEditor2x,CKEditor3x,CKEditor4x,CuteEditor6x,KindEditor3x,KindEditor4x,TinyMCE3x,TinyMCE4x,TinyMCE5x,UEditor1.4x,UEditor1.5x,UMEditor1x,xhEditor1x,wangEditor,NEditor,Summernote,HKwik5.0,WordPress,3.7.1,WordPress插件包,Joomla,3.4.7,Drupal,7.34,帝国CMS,7.x插件包,PHPCMS,v9插件包,dedecms,v5.7插件包,dedecms,v5.7-ueditor插件包,DokuWiki插件包,PHPMyWind,5.6插件包,Z-Blog,1.7x插件包,PbootCMS,3.x插件包

vue-cli示例：vue2-cli-CKEditor5,vue2-cli-UEditor1.4x,vue2-cli-UEditor1.5x,vue2-cli-TinyMCE5,vue2-cli-wangEditor,vue2-cli-KindEditor,vue2-cli-Quill vue3-cli-UEditor1.4x,vue3-cli-UEditor1.5x,vue3-cli-TinyMCE5,vue3-cli-wangEditor

互联网应用：Word内容一键发布,如何转载到新浪博客,如何转载到网易LOFTER，如何转载到CSDN博客，如何发布到媒介盒子，如何发布到365编辑器，转载微信公众号图文，如何发布到博客园

联系信箱：1085617561@qq.com

联系QQ：1085617561
产品交流群：
扫码加群：

由于工作需要必须将word文档内容粘贴到编辑器中使用

但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题

考虑到自己除了工作其他时间基本上不使用windows，因此打算使用nodejs来解决这一问题

发现不管什么编辑器只要将图片转换成base64后就可以直接使用（IE8及一下可能不支持），由于编辑器中添加word文档功能也只是自己用，因此可以忽略这种浏览器了

找了很久，试用了很多编辑器，发现只有ckeditor的功能还算符合我的需求（支持自定义HTML属性）

然后我写了一个监听粘贴事件的操作，用来获取粘贴之后的file:///xxxx.jpg这种路径

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中的所有图片，并且有进度条显示

所有图片都能够保存在服务器中，而且支持分布式图片存储

编辑器中的图片地址已经全部替换成了服务器的图片地址，其它的用户也能够正常访问

讨论群：223813913

admin

7440