ckeditor 学习笔记【3】粘贴事件/截图粘贴

最新推荐文章于 2024-04-03 11:14:33 发布

殷长庆

最新推荐文章于 2024-04-03 11:14:33 发布

阅读量1.7k

点赞数 1

文章标签： ckeditor

本文链接：https://blog.csdn.net/anshichuxuezhe/article/details/75647721

版权

ckeditor 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初始化ckeditor之后添加如下代码

editor 为ckeditor的id

//监听富文本粘贴事件
CKEDITOR.instances['editor'].on('paste', function(e) {
	alert('粘贴时触发');
	var content = e.data.dataValue;// 粘贴的内容（字符串）
	e.editor.document;// 获取富文本内容
});

//监听富文本粘贴完成事件
CKEDITOR.instances['editor'].on('afterPaste', function(e) {
	alert('粘贴完成触发');
});

// 截图粘贴
CKEDITOR.instances["editor"].on('instanceReady', function(e) {
    this.document.on("paste", function(e) {
        var items = e.data.$.clipboardData.items;
        for(var i = 0; i < items.length; ++i) {
            var item = items[i];
            if(item.kind == 'file' && item.type == 'image/png') {
                var imgFile = item.getAsFile();
                if(!imgFile) {
                    return true;
                }
                var reader = new FileReader();
                reader.readAsDataURL(imgFile);
                reader.onload = function(e) {
                    //显示文件  
                    CKEDITOR.instances["editor"].insertHtml('<img src="' + this.result + '" alt="" />');
                }
                return false;
            }
        }
    });
});