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中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
随机推荐
- oj上的测试点信息
Accepted 通过!(AC) Wrong Answer 答案错.(WA) Runtime Error ...
- 通过命令行新建qt项目,并编译打包
ref: https://blog.csdn.net/weixin_42837024/article/details/81945656 平台 :Ubuntu 18.04 QT版本 :5.9.1 ( ...
- CentOS7/RHEL6下,如何查看目录与子目录大小
原文:CentOS7/RHEL6下,如何查看目录与子目录大小 通过强大的[du]命令,可以帮助我们快捷的查看目录的大小,非常实用. du命令用来查看目录或文件所占用磁盘空间的大小.常用选项组合为:du ...
- C#如何调用C++(基础篇)
闲暇之余,记一下笔记!记录一下c#如何调用C++的动态库(dll). 步骤: 一.创建一个C++类,例如: AddOperate.h extern _declspec(dllexport) int S ...
- luogu题解 P3950部落冲突--树链剖分
题目链接 https://www.luogu.org/problemnew/show/P3950 分析 大佬都用LCT,我太弱只会树链剖分 一个很裸的维护边权树链剖分题.按照套路,对于一条边\(< ...
- springboot启动流程(九)ioc依赖注入
所有文章 https://www.cnblogs.com/lay2017/p/11478237.html 正文 在前面的几篇文章中,我们多次提到这么一个转化过程: Bean配置 --> Bean ...
- GIL锁、进程池与线程池、同步异步
GIL锁定义 GIL锁:Global Interpreter Lock 全局解释器 本质上是一把互斥锁 官方解释: 在CPython中,这个全局解释器锁,也称为GIL,是一个互斥锁,防止多个线程在同 ...
- angular轮播图
还是直接上代码比较好 <!doctype html><html lang="en"><head> <meta charset=" ...
- Python模拟登陆某网教师教育网
本文转载自看雪论坛[作者]rdsnow 不得不说,最近的 Python 蛮火的,我也稍稍了解了下,并试着用 Python 爬取网站上的数据 不过有些数据是要登陆后才能获取的,我们每年都要到某教师教育网 ...
- Windows下计算md5值
目录 Windows下计算md5值 1.linux 下计算md5值 2.Windows下计算md5值 Windows下计算md5值 1.linux 下计算md5值 [root@master yl]# ...