富⽂本编辑器：⾃⼰实现图⽚上传功能和图⽚粘贴上传
（kindeditor）
在需要编写并保存带有各种格式，图⽚的⽂章内容时，往往需要⽤到富⽂本编辑器，这次使⽤到的富⽂本编辑器是kindeditor，使⽤下来功能基本⾜够，在这⾥记录下在使⽤时⾃⼰添加的功能。
kindeditor⾃带有图⽚上传功能，由于⼏个原因我需要⾃⼰实现⼀下。
（⼀）⽤的vue,⾃然是写⼀个<kindeditor>组件和<uploadImg>组件；
（1）<uploadImg>：因为有⽤iview作为基础ui组件，所以上传⽤的也是iview的Upload组件，:action为服务器的图⽚上传地址，在这⾥:on-success⾥的⽅法imgUploadSuccess，在图⽚上传服务器 成功后，向uploadImg的⽗组件传递服务器回传的图⽚地址（这边我是再上传阿⾥云）。
<uploadImg>组件
（2）在kindeditor组件中加⼊⾃⼰写的图⽚上传组件：<Uploadimg @getOssImg='addImgToKindeditor' :uploadByPaste='pasteData'> </Uploadimg>
引⼊npm install下来的内容，并添加textarea标签：
<textarea class="form-control" id='kindeditor' ref="kindeditor" v-model="localValue" name="content" v-loaded-
callback='initKindeditor'></textarea>
initKindeditor函数是对kindeditor的初始化，
appendHtml⽅法追加内容，addImgToKindeditor (data) { this.appendHtml('<img src='+data+' >')  }实现将uploadImg返回的图⽚地址拼接后，追加到编辑器内容后⾯；
《图：kindeditor组件》
（⼆）图⽚粘贴上传
粘贴功能通过监听“paste”事件，获取clipboardData对象，取得剪贴板的内容。在这⾥将监听写在initKindeditor初始化⽅法的options 中，options有个afterCreate，定义创建后执⾏的内容，如图:
代码段：
this.edit.doc.body.addEventListener("paste", function (e) {
let cbd = e.clipboardData;
let ua = window.navigator.userAgent;
// 如果是 Safari 直接 return
if ( !(e.clipboardData && e.clipboardData.items) ) {
return;
}
// Mac平台下Chrome49版本以下 复制Finder中的⽂件的Bug Hack掉
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&                    pes && pes.length === 2 && pes[0] === "text/plain" && pes[1] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
return;
}
if(cbd.items.length == 0){
优秀的富文本编辑器
_this.$Message.warning('本地图⽚请使⽤图⽚上传功能！');
}
for(let i = 0; i < cbd.items.length; i++) {
let item = cbd.items[i];
if(item.kind == "file"){  //循环获得kind为file的，并⽤getASFile转化赋值给blob
let blob = AsFile();
if (blob.size === 0) {
return;
}
//console.log(blob)// blob 就是从剪切板获得的⽂件 可以进⾏上传或其他操作
_this.pasteData = blob;
}
}
e.preventDefault();  //阻⽌默认动作
}, false);
在我的代码中，最后将图⽚对象赋值给⼀个pasteData，作为Uploadimg的prop参数，监听到pasteData的变化后，发起图⽚上传
uploadImg组件中：
watch: {
uploadByPaste () { //监听粘贴内容
this.$refs.upload.post(this.uploadByPaste);  //发送表单
}
}
注意：粘贴功能的图⽚来源只能是⾮本地图⽚，现在试过截图，⽂档中图⽚单独复制，⽹页图⽚复制都可以实现复制粘贴的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。