vue中使用ckeditor,支持wps,word,网页粘贴

图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码
目前限chrome浏览器使用
首先以um-editor的二进制流保存为例：
打开umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉其中的代码。
加入下面的代码：

//判断剪贴板的内容是否包含文本

//首先解释一下为什么要判断文本是不是为空

//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

//为了兼容4种格式的情况，做了如下的判断

//如下代码：e.originalEvent.clipboardData.items获得剪贴板的内容

//当粘贴了文本之后text是不为空的，同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理，如果只粘贴图片的话文本一定是空的，包括复制的桌面图片或者截图的图片

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

var items=e.originalEvent.clipboardData.items;

for (var i = 0, len = items.length; i < len; i++) {

var item = items[i];

if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

var blob = item.getAsFile();

getBase64(blob, function( base64 ) {

//sendAndInsertImage(base64,me); 上传到服务器

setBase64Image(base64,me);

});

//阻止默认事件, 避免重复添加;

e.originalEvent.preventDefault();

};

}

两个方法：

//执行插入图片的操作

function setBase64Image(base64,editor){

editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获得base64

function getBase64(blob, callback) {

var a = new FileReader();

a.onload = function(e) {callback(e.target.result);};

a.readAsDataURL(blob);

};

效果展示：

详细内容可参考这篇文章：http://blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/

讨论群：223813913

vue中使用ckeditor,支持wps,word,网页粘贴相关推荐

vue 调取本地wps_vue中使用ckeditor,支持wps,word,网页粘贴
ckeditor5官网目前不支持wps的图片粘贴,但可以通过修改源码实现. This is the initial editor content. const ZZ_HTTP = process.en ...
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste
公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...
八、Vue中使用 html2canvas 和 canvas2image 实现网页截屏
一.html转为canvas 1.安装 html2canvas cnpm install html2canvas --save 2.引入 html2canvas // 引入 import html2c ...
去掉Word2007中的软回车（从网页粘贴文字的一些编辑）
一删除 Word2007中向下箭头的符号(软回车符号 shift+enter) 1.软回车替换成硬回车:点击菜单栏中的"开始"→"替换"(F5) ...
Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...
Vue 自定义富文本编辑器 tinymce 支持导入 word 模板
自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目前端前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: t ...
POI-TL导出Word文档（支持WPS查看）
需求:公司原来已有导出word,实现方式是poi:实现复杂且不支持wps,现要求支持wps查看. poi导出excel比较方便导出word文档使用POI-TL poi-tl是一种 "log ...
[vue] vue2.0不再支持v-html中使用过滤器了怎么办？
[vue] vue2.0不再支持v-html中使用过滤器了怎么办? 在method中定义方法 htmlFilter(htmlString){ return htmlString.replace(/+s ...
wps word中如何快速到目录页面
wps word中如何快速到目录页面

vue中使用ckeditor,支持wps,word,网页粘贴

vue中使用ckeditor,支持wps,word,网页粘贴相关推荐

最新文章

热门文章