使用 ElementUI image 处理富文本中的图片显示

使用 ElementUI image 处理富文本中的图片显示

效果

需求分析

• 由于富文本有 v-html 加载的，无法使用 el-image，但是我们又需要用到 el-image 组件
• 需要预览视频富文本中的视频

图片解决办法

imageUrl: '',
imageUrls: []

> el-image 占用
<div class="elImage" style="display: none" v-if="imageUrl">
    <el-image ref="imageUrl" style="width: 100px; height: 100px;" :src="imageUrl" :preview-src-list="imageUrls"> </el-image>
</div>

bindImagesLayer() {
        let that = this;
        that.imageUrls = [];
        $('.content img').map(function(item) {
            that.imageUrls.push($(this).attr('src'));
        });
        $('body').on('click', '.content img', function() {
            let url = $(this).attr('src');
            if (!that.imageUrls.includes(url)) {
                that.imageUrls.push(url);
            }
            that.imageUrl = url;
            setTimeout(() => {
                $('.elImage img').click();
            }, 100);
        });
    }
    
async created() {
    await this.bindImagesLayer();
}

.content 为文章内容的 class，获取到其中所有的图片然后再填充到占用的 el-image 中，再手动触发 el-image 的点击事件

视频解决办法

我们首先创建一个弹框组件，用于处理视频的预览

> 下面的这些变量自己data中注册一下

<el-dialog title="" :visible.sync="videoVisible" :append-to-body="true">
        <div class="videodDialog" v-if="videoVisible">
            <video :src="videoUrl" autoplay controls="controls"></video>
        </div>
</el-dialog>

我们来处理视频的预览显示，先展示预览图再显示代码

video 的html结构如下

<div class="video">
            <video controls="controls" width="600" height="150" data-mce-fragment="1">
                <source src="https://baidu.com.com/uploads/20201028/a7c8a18563a1b577537bef7fc25c3de2.mp4" type="video/mp4">
            </video>
            <div class="video-mask">
                <span class="video-icon"></span>
            </div>
        </div>
        

已知html结构，我们来创建一下css

>video.scss
video {
max-width: 100%;
margin: 0px auto;
cursor: pointer;

}

.video {
    position: relative;
    width: 320px;

    .video-mask {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;

        .video-icon {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            display: block;
            transform: translate(-50%, -50%) scale(1.5);
            opacity: 1;
            transition: all 0.2s;
            padding: 14px;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 20px;
            background-image: url(data:image/png;base64,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);
            /* 你的图片*/
            background-size: 40px;
            z-index: 999;
            background-repeat: no-repeat;
            background-position: center center;
            cursor: pointer;
        }
    }

    .video-mask:hover {
        .video-icon {
            opacity: 1;
            transform: translate(-50%, -50%) scale(2.2);
        }
    }
}
.layui-layer-content {
    video {
        width: 100%;
        height: 95%;
    }
}

上述代码中，我们的icon是base64转码的

再之需要使用动态js来控制，video的展示

export default function videoContro(video, callback) {
    let videoContainer = video.parentNode;
    console.log(video);

    // 设置poster属性：（非本地视频资源会有跨域截图问题）
    video.addEventListener('loadeddata', function(e) {
        video.removeAttribute('controls');
    });

    let videoMask = document.createElement('div');
    videoMask.setAttribute('class', 'video-mask');

    let videoIcon = document.createElement('span');
    videoIcon.setAttribute('class', 'video-icon');
    videoMask.appendChild(videoIcon);

    videoContainer.appendChild(videoMask);

    /**
     * 设置播放状态
     */
    function vidplaySate(e) {
        let src = $(video)
            .children('source')
            .attr('src');

        callback(src);
    }
    videoMask.addEventListener('click', vidplaySate, false);
}

vue 调用控制方式

async created() {
    await this.bindImagesLayer();
    setTimeout(() => {
        this.initVideo();
    }, 1000);
}

method() {
    ...
    /**
    * 初始化播放器的一些配置
    */
    initVideo() {
        let videos = document.querySelectorAll('.docHtml video');
        let callback = this.videoCallback;
        videos.forEach(video => {
            videoContro(video, callback);
        });
    },

    videoCallback(src) {
        this.videoUrl = src;
        this.videoVisible = true;
    }
}