vue中使用ckeditor,支持wps,word,网页粘贴
由于工作需要必须将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\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中的所有图片,并且有进度条显示
所有图片都能够保存在服务器中,而且支持分布式图片存储
编辑器中的图片地址已经全部替换成了服务器的图片地址,其它的用户也能够正常访问
详细内容可以参考这篇文章:http://blog.ncmem.com/wordpress/2019/07/30/ckeditor%e7%b2%98%e8%b4%b4word/
vue中使用ckeditor,支持wps,word,网页粘贴的更多相关文章
- vue中使用ckeditor
1.第一步首先去ckeditor官网去下载editor文件,这里以ckeditor4为例 首先在index.html里引入js代码 <script type="text/javascr ...
- 在VUE中,关于CKEditor使用
官方文档 语言配置 代码如下 ClassicEditor .create( document.querySelector( '#editor' ), { language: 'de' // 配置语言 ...
- 在Vue中用富文本编辑器(可以ctrl+c粘贴)
我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...
- 富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件wordpaster
tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...
- 在 Word 中的受支持的区域设置标识符的列表
这篇文章包含当前可用的区域设置 ID (LCID) 语言代码的列表. 概要 这篇文章包含当前可用的区域设置 ID (LCID) 语言代码的列表. 区域设置 ID (LCID): 由 Microso ...
- 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法
如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...
- vue中显示原网页代码--codemirror
在项目中遇到了一个需求,后台返回string类型的html源码,要求前端这边按照codeview这种类型把这个源码展示出来.现总结如下 1.如果没啥样式的需求,只是要求该缩进缩进的话,可以直接使用in ...
- vue中如何使用mockjs摸拟接口的各种数据
mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
随机推荐
- Python习题003
作业一:将字符串”k:1/k1:2/k2:3/k3:4”处理成字典(比较难) 方法一 list = 'k:1/k1:2/k2:3/k3:4' new_list = list.split("/ ...
- 应用人员反馈报错,ORA-03137: TTC protocol internal error : [12333]
一.报错现象 应用人员反馈连接不上数据库,连接报错. 我们使用PLSQL发现可以连接数据库,但是数据库DB Alert存在如下报错信息 DB AlertFri Oct :: Errors ): ORA ...
- 配置vue 多页面
安装vue 1. 全局安装 vue-cli环境 npm install --global vue-cli 2. 创建一个基于webpack模板的新项目 vue init webpack my-proj ...
- K2 BPM_万翼科技携手上海斯歌,全面启动K2平台升级项目_十年专注业务流程管理系统
2019年7月25日,万翼科技和上海斯歌在深圳召开了“2019年K2平台升级项目启动会”.万翼科技核心合伙人何建春.管金华,协同管理支撑组负责人贾磊,K2平台产品负责人黄平显,上海斯歌总裁李明,技术研 ...
- 阿里P7告诉你什么是java并发包、线程池、锁
并发包 java.util.concurrent从jdk1.5开始新加入的一个包,致力于解决并发编程的线程安全问题,使用户能够更为快捷方便的编写多线程情况下的并发程序. 同步容器 同步容器只有包括Ve ...
- 8.vue-resource 数据请求基本实现
1.vue-resource 实现 get, post, jsonp请求:https://github.com/pagekit/vue-resource 注意: 除了 vue-resource 实现数 ...
- ubuntu python3虚拟环境
mkvirtualenv flow_chart -p /usr/bin/python3.6 # 命令 环境名 -p python所在路径 pip install -r request ...
- Linux下文档与目录结构
目录分类 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到某一个目录下,用户通过操作目录来实现磁盘读写. ...
- 使用fastjson统一序列化响应格式
摘要:其实很简单的处理方式,只不够优雅,或者说没有找到fastjson为其提供便捷的处理方式.因此记录下处理该问题的过程. 目标:将所有api请求,即响应为APPLICATION_JSON的内容做统一 ...
- 系统---添加一个相机的IP实现opencv读取rstp视频流
系统---添加一个相机的IP实现opencv读取视频流 这里: 第一步,添加一个6段的相机IP地址:先ping 一个IP地址,ping通的是再用的IP,不可添加:ping不通的,添加IP到网络. 第二 ...