1、解决ctrl + v 粘贴图片到富文本编辑器ueditor中无法显示（转Base64存储）

最新推荐文章于 2023-11-07 11:57:26 发布

不快乐的樂

最新推荐文章于 2023-11-07 11:57:26 发布

阅读量2.6k

点赞数

分类专栏：杂七杂八文章标签： javascript

本文链接：https://blog.csdn.net/junle_carpediem/article/details/123875943

版权

杂七杂八专栏收录该内容

1 篇文章 0 订阅

订阅专栏

官方API文档

http://fex.baidu.com/ueditor/#start-start

基本使用

参考官网API文档使用即可，这里不讲如何基本使用

前置步骤使用

1、html页面定义一个容器
在这里插入图片描述
2、引入相关的js文件

3、初始化富文本编辑器

解决ctrl + v 粘贴图片到富文本编辑器中无法显示

背景：

由于目前的项目的实际情况是，使用ctrl + v 粘贴图片到富文本编辑器中（不上传到图片服务器中），因此，需要将图片转为Base64显示。
但由于ueditor因为安全的问题，屏蔽了图片的Base64显示。
目前的解决思路是：针对ueditor的dom对象，监听粘贴事件，将图片转为Base64，然后再删掉ueditor.js屏蔽图片base64显示的代码
以下代码可直接抄：
在初始化富文本编辑器下面新增事件（其实就是通过js实现ctrl + v 粘贴图片转Base64显示，只是现在的这个对象是富文本编辑器的document对象）

	/**
     * 当富文本编辑器加载成功后，针对它的dom对象，重写粘贴事件,只处理图片
     * 解决粘贴图片转为Base64显示
     * ue 是你初始化富文本编辑器的对象
     */
    this.editor.on('ready', function (e) {
        let that = this;
        // 重写复制
        $(this.document).on("paste", function (e) {
            var items = e.originalEvent.clipboardData.items;
            console.log("富文本复制 items", items);
            for (var i = 0; i < items.length; ++i) {
                var item = items[i];
                console.log("富文本复制 item", item);
                if (items.length < 2 && item.kind == 'file' && (item.type == 'image/png' || item.type == 'image/jpeg' || item.type == 'image/jpg')) {
                    var imgFile = item.getAsFile();
                    if (!imgFile) {
                        return true;
                    }
                    // 大小不能超过2m
                    if (imgFile.size > 2 * 1024 * 1024) {
                        vm.$message.error('图片大小为:' + (imgFile.size / 1024 / 1024).toFixed(2) + 'M,超过2M不能粘贴!');
                        return false;
                    }
                    var reader = new FileReader();
                    reader.readAsDataURL(imgFile);
                    reader.onload = function (e) {
                        // 显示文件
                        that.execCommand('inserthtml', '<img src="' + this.result + '" alt="" />');
                    }
                    return false;
                }
            }
        });
    });