当前位置: 首页 > news >正文

django-ckeditor配置html5video实现视频上传与播放

1. 手动下载插件

html5video的插件:https://github.com/bahriddin/ckeditor-html5-video
解压插件,将html5video放到ckeditor/ckeditor/plugins的目录里。

2. 修改ckeditor源码

1. 通过使用ckeditor->config.js->extraPlugins配置启用html5video插件

添加:

config.extraPlugins = 'html5video';

CKEDITOR.editorConfig = function( config ) {// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';config.allowedContent = true;config.extraPlugins = 'html5video';};

2. 将html5video加到CKEDITOR_CONFIGS里

CKEDITOR_CONFIGS = {'default': {'toolbar': 'Custom',  # 工具条功能'height': 600,  # 编辑器高度'width': 800,  # 编辑器宽'toolbar_Custom':[['Bold', 'Italic', 'Underline'],  # 粗体、斜体、下划线['Link', 'Unlink'],  # 链接、取消链接['NumberedList', 'BulletedList'],  # 有序、无序列表['Format'],  # 格式(如标题、段落)['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],  # 左对齐、居中、右对齐、两端对齐['Image', 'Html5video', 'Table', 'HorizontalRule'],  # 图片、表格、分割线['Undo', 'Redo'],  # 撤销、重做['Source'],  # 源代码模式],'stylesSet': [{'name': '1.5 倍行距', 'element': 'p', 'attributes': {'style': 'line-height: 1.5;'}}],'extraPlugins': ['html5video', 'widget', 'widgetselection', 'clipboard', 'lineutils'],},
}

 3. 前台渲染页面,video标签有播放控件

由于ckeditor渲染到页面上的代码是:

<div class="ckeditor-html5-video" style="text-align: center;">
       <video controlslist="nodownload" src="/media/upload/2025/07/08/ljzy_03.mp4">&nbsp;                 </video>
</div>

发现controlslist="nodownload"属性没有播放按钮,需要改成controls属性。

所以在渲染页面需要使用js进行修改:

<script>document.addEventListener('DOMContentLoaded', () => {const fixVideos = () => {try {const videos = document.querySelectorAll('.ckeditor-html5-video video');if (!videos.length) {console.warn('No videos found in .ckeditor-html5-video.');return;}videos.forEach((video, index) => {video.controls = true; // 添加 controlsvideo.removeAttribute('controlslist'); // 移除 controlslistconsole.log(`Fixed video ${index + 1}: Added controls, removed controlslist.`);});} catch (error) {console.error('Error fixing video controls:', error);}};// 初始修复fixVideos();// CKEditor 异步加载if (window.CKEDITOR) {CKEDITOR.on('instanceReady', fixVideos);CKEDITOR.on('change', () => setTimeout(fixVideos, 100));}// 动态内容监听const observer = new MutationObserver(fixVideos);observer.observe(document.body, { childList: true, subtree: true });});
</script>

参考文献:

django-ckeditor配置html5video上传视频 - SonnyZhang - 博客园

http://www.lryc.cn/news/582442.html

相关文章:

  • word中的单位详解
  • 算法化资本——智能投顾技术重构金融生态的深度解析
  • 使用阿里云/腾讯云安装完成mysql使用不了
  • 分库分表之实战-sharding-JDBC广播表
  • JavaScript基础篇——第二章 类型转换与常见错误解析
  • 《UE5_C++多人TPS完整教程》学习笔记42 ——《P43 瞄准(Aiming)》
  • 250708-Svelte项目从Debian迁移到无法联网的RHEL全流程指南
  • 计算机网络:(八)网络层(中)IP层转发分组的过程与网际控制报文协议 ICMP
  • [论文阅读] 软件工程 | 自适应CPS中的人机协作与伦理
  • 自动驾驶感知系统
  • 分水岭算法:图像分割的浸水原理
  • 【王树森推荐系统】召回12:曝光过滤 Bloom Filter
  • 大数据在UI前端的应用创新:基于社交网络的用户影响力分析
  • 深度学习——神经网络1
  • 基于物联网的智能交通灯控制系统设计
  • three案例 Three.js波纹效果演示
  • 【操作系统】进程(二)内存管理、通信
  • MySQL Galera Cluster部署
  • 如何利用AI大模型对已有创意进行评估,打造杀手级的广告创意
  • 算法学习笔记:11.冒泡排序——从原理到实战,涵盖 LeetCode 与考研 408 例题
  • 【计算机网络】王道考研笔记整理(1)计算机网络体系结构
  • 高效学习之一篇搞定分布式管理系统Git !
  • 【字节跳动】数据挖掘面试题0013:怎么做男女二分类问题, 从抖音 app 提供的内容中。
  • 视频号账号矩阵运营中定制开发开源 AI 智能名片 S2B2C 商城小程序的赋能研究
  • main(int argc,char **agrv)的含义
  • 第0章:开篇词 - 嘿,别怕,AI应用开发没那么神!
  • Nat.C|RiNALMo:通用 RNA 语言模型新突破,3600 万序列预训练,跨家族结构预测、剪接识别与功能注释全能泛化
  • 【Note】《Kafka: The Definitive Guide》 第8章: Cross-Cluster Data Mirroring
  • 安卓10.0系统修改定制化____如何修改ROM 实现开机自动开启开发者选项与隐藏开发者选项
  • 【Python进阶篇 面向对象程序设计(3) 继承】