减轻服务器压力：如何为 CKEditor 4 实现阿里云 OSS 前端直传

原创

于 2025-10-14 10:19:05 发布 · 318 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#服务器 #阿里云 #前端

html5video_v1插件介绍

项目介绍

最近用到ckeditor的视频上传插件 html5video，默认是通过配置一个上传地址来上传视频文件，不够灵活，且没有汉化。
这个项目基于插件html5video（原插件链接），通过部分修改实现了上传的自由定制，以及汉化处理

软件架构

1.默认选中自适应宽度，隐藏高宽设置，以及高级设置

图片信息，默认选中自适应宽度，隐藏高宽设置，以及高级设置

2.上传界面

上传界面

安装教程

复制html5video_v1文件夹到{ckeditor_home}/plugins 文件夹下

使用说明

{ckeditor_home}/config.js 添加 config.extraPlugins = 'html5video_v1'，config.toolbar 里边添加 “Html5video_v1”
页面初始化editor，调用replace方法时：

CKEDITOR.replace( 'editor',{
    html5video_v1UploadFn:function(file,callback){
            uploadFile(file,callback);
        }
});

上传逻辑

引用上传组件

    <script src='https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js'></script>

前端上传到 oss

    function uploadFile(file, callback) {
        const ext = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
        console.log(file.name, ext, file)

        // 限制文件大小 视频
        if (ext === 'mp4') {
            if (file.size > 1024 * 1024 * 200) {
                alert('文件过大