关键词：
由于工作需要必须将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 ‘);
);
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
kindeditor
1、进入官网 KindEditor是一种在线HTML编辑器插件，能实现的效果就是我们平时发表文章以及评论的时候可以对文本进行样式的编辑，以及上传图片、插入代码等。类似的编辑器插件还有：TinyEditor、UEEditor、CkEditor等。2、下载官... 查看详情
asp.net在线网页编辑器kindeditor怎么上传图片
...感兴趣的一块交流提高。QQ：421001179参考技术A官方下载的kindeditor包里有asp.net示例，包括上传和显示图片的，认真分析下示例代码就明白了参考资料：http://www.kindsoft.net/down.php 参考技术B路径变为：KindEditor/asp.net/文件名 查看详情
kindeditor编辑器的使用
KindEditor是一款用Javascript编写的开源在线HTML编辑器，主要用户是让用户在网站上获得可见即可得的编辑效果，开发人员可以用KindEditor把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。你可以在其官网了解更多... 查看详情
在线html文档编辑器使用入门之图片上传与图片管理的实现
...用入门之图片上传与图片管理的实现：2官方网址：http://kindeditor.net/demo.php3开发步骤：41.开发中只需要导入选中的文件（通常在webapp下，建立editor文件夹）5导入：lang、plugins、themes、kindeditor.js/kindeditor-min.js-->放在editor文件夹下... 查看详情
在线编辑器kindeditor的使用
...联文件attached├──examplesHTML示例├──jspjava示例├──kindeditor-all-min.js全部JS（压缩）├──kindeditor-all.js全部JS（未压缩）├──kindeditor-min.js仅KindEdito 查看详情
在线编辑器kindeditor的使用
...联文件attached├──examplesHTML示例├──jspjava示例├──kindeditor-all-min.js全部JS（压缩）├──kindeditor-all.js全部JS（未压缩）├──kindeditor-min.js仅KindEdito 查看详情
kindeditor的使用(代码片段)
KindEditor是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用KindEditor把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。KindEditor使用JavaScript编写，可以无缝地与Java、.NET... 查看详情
在线html编辑器kindeditor-4.1.10上传图片文件应用指南
1、在ASPX页面中对应的head、body添加相应的红色部分2、引用kindeditor-4.1.10中的litjosn.dll3、在写入数据库时要替换相应的路径和IP4、kindeditor-4.1.10下载地址 http://kindeditor.net/demo.php<html><headrunat="server"><metacharset="u 查看详情
kindeditor是免费的吗
这位网友你好，是免费的，你只要下载到本地就可以使用了。参考技术AKindEditor是一套开源的在线HTML编辑器，其官方网站上暂时没有提出收费。目前是免费的。 查看详情
在线word文档编辑都有哪些
...档腾讯文档是一款支持随时随地创建、编辑的多人协作式在线文档工具，拥有一键翻译、实时股票函数和浏览权限安全可控等功能，以及打通QQ、微信等多个平台编辑和分享的能力。3、企业网盘企业网盘是一个企事业单位私有的... 查看详情
在线文本的编辑框——kindeditor富文本编辑的使用(代码片段)
...似于MicrosoftWord的编辑功能。常用的富文本编辑器： KindEditor http://kindeditor.net/ UEditor http://ueditor.baidu.com/website/ CKEdirot http://ckeditor.com/这里介绍使用KindEditor的使用。2.下载 进入官网：http://kindeditor.n... 查看详情
如何实现在线编辑word文档
...WORD文档也是可以进入到编辑模式的。5、进入WordOnline在线编辑器中，点击【编辑文档】---【在WordOnline中编辑】6、编辑的方法和WORD是一样的，根据自己的需要更改WORD文档中的排版设置，排版搞好以后直接关闭这个窗口就可以了... 查看详情
kindeditor使用入门-张国红
kindeditor是在线编辑器，比较好用，以下是使用这个插件的步骤。下载kindeditor-4.1.10.zip解压 asp，asp.net,php对于jsp开发没有用，可以删除新建web工程，拷贝文件在WebRoot目录下新建一个文件夹 这个文件夹是将来上传图片时用... 查看详情
完成后台管理系统功能kindeditor富文本编辑器的使用以及商品添加的实现
1.有关项目中KindEditor富文本编辑器的使用。 我们是在商品描述的时候用的富文本编辑器，需要添加<textarea>组件来初始化我们的编辑器页面，可以看到它是个隐藏域，它的作用有两个，第一个是当在富文本编辑器编辑完... 查看详情
nopcommerce3.80框架研究替换tinymce为kindeditor
...mce 功能不是很全。所以尝试将其替换为功能更强大的KindEditor并替实现文件上传和在线浏览功能 首先下载 并解压到如下位置请注意这里是部署在Nop.Web站点下，前后台分离部署的情况请另作调整 部署时记得删除Kind... 查看详情
怎么多人在线编辑excel表格？
...息填写完成后就可以将表格完整地导出。参考技术A腾讯在线文档就可以呀，还可以指定用户编辑／查看权限。 参考技术B微信中使用腾讯文档文档小程序，可以创建需要类型的文档或表格 参考技术C你可以创建在线文档 参考技术... 查看详情
访问页面kindeditor在线编辑器刚开始为隐藏，点击下一步。显示编辑器，但是编辑器显示不出来
如果使用编辑器刚开始为显示的话，是正常的隐藏后（style="display:none;"）再显示：参考技术A因为那个图片的input是要获取父节点宽度来设置自身宽度的，隐藏了宽度为0.在源码里改一下它的宽度就好了 参考技术BJS页面没... 查看详情
kindeditor，kindeditor编辑内容无法保存，并且无法上传图片或者文件
我在kindeditor官网上下载了源码，然后按照官网的使用教程在我的ASP的页面上插入了编辑器。可是问题来了，首先我保存编辑的信息后提示保存成功，再打开发现刚才在编辑器里面编辑的信息没有。第二，我上传图片时,点击浏览... 查看详情