【亲测有效】百度Ueditor富文本编辑器添加插入视频、视频不显示、和插入视频后二次编辑视频标签不显示,显示成img标签,二次保存视频被替换问题,解决方案
【亲测有效】项目使用百度Ueditor富文本编辑器上传视频相关操作问题
1.百度Ueditor富文本编辑器添加插入视频、视频不显示
2.百度Ueditor富文本编辑器插入视频后二次编辑视频标签不显示,在编辑器内显示成img标签,二次保存视频被替换问题
问题1:添加插入视频、视频不显示。效果图

解决方案
1.打开ueditor目录下ueditor.all.js文件
2.搜索me.commands["insertvideo"]
3.将17770行代码中的image修改成video

修改前代码
me.commands["insertvideo"] = {execCommand: function (cmd, videoObjs, type){videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];var html = [],id = 'tmpVedio', cl;for(var i=0,vi,len = videoObjs.length;i<len;i++){vi = videoObjs[i];cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));}me.execCommand("inserthtml",html.join(""),true);var rng = this.selection.getRange();for(var i= 0,len=videoObjs.length;i<len;i++){var img = this.document.getElementById('tmpVedio'+i);domUtils.removeAttributes(img,'id');rng.selectNode(img).select();me.execCommand('imagefloat',videoObjs[i].align)}},queryCommandState : function(){var img = me.selection.getRange().getClosedNode(),flag = img && (img.className == "edui-faked-video" || img.className.indexOf("edui-upload-video")!=-1);return flag ? 1 : 0;}};
修改后代码
me.commands["insertvideo"] = {execCommand: function (cmd, videoObjs, type){videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];var html = [],id = 'tmpVedio', cl;for(var i=0,vi,len = videoObjs.length;i<len;i++){vi = videoObjs[i];cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video'));}me.execCommand("inserthtml",html.join(""),true);var rng = this.selection.getRange();for(var i= 0,len=videoObjs.length;i<len;i++){var img = this.document.getElementById('tmpVedio'+i);domUtils.removeAttributes(img,'id');rng.selectNode(img).select();me.execCommand('imagefloat',videoObjs[i].align)}},queryCommandState : function(){var img = me.selection.getRange().getClosedNode(),flag = img && (img.className == "edui-faked-video" || img.className.indexOf("edui-upload-video")!=-1);return flag ? 1 : 0;}};
解决后上传视频在百度Ueditor富文本编辑器内展示效果图

PS:要是修改后没有效果请清理浏览器缓存
问题2:插入视频后二次编辑视频标签不显示,在编辑器内显示成img标签,二次保存视频被替换问题。效果图

解决方案
1.打开ueditor目录下ueditor.all.js文件
2.搜索function switchImgAndVideo(root,img2video){
3.将17684行代码中的image修改成video

修改前代码
function switchImgAndVideo(root,img2video){utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video'),function(node){var className = node.getAttr('class');if(className && className.indexOf('edui-faked-video') != -1){var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'embed':'image');node.parentNode.replaceChild(UE.uNode.createElement(html),node);}if(className && className.indexOf('edui-upload-video') != -1){var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'video':'image');node.parentNode.replaceChild(UE.uNode.createElement(html),node);}})}
修改后代码
function switchImgAndVideo(root,img2video){utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video'),function(node){var className = node.getAttr('class');if(className && className.indexOf('edui-faked-video') != -1){var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'embed':'image');node.parentNode.replaceChild(UE.uNode.createElement(html),node);}if(className && className.indexOf('edui-upload-video') != -1){var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'video':'video');node.parentNode.replaceChild(UE.uNode.createElement(html),node);}})}
解决后二次编辑视频标签在百度Ueditor富文本编辑器内展示效果图

PS:要是修改后没有效果请清理浏览器缓存
本文的重中之重:因为修改的是js文件默认浏览器是有进行缓存的,修改后没有效果请清理浏览器缓存
相关文章:
【亲测有效】百度Ueditor富文本编辑器添加插入视频、视频不显示、和插入视频后二次编辑视频标签不显示,显示成img标签,二次保存视频被替换问题,解决方案
【亲测有效】项目使用百度Ueditor富文本编辑器上传视频相关操作问题 1.百度Ueditor富文本编辑器添加插入视频、视频不显示 2.百度Ueditor富文本编辑器插入视频后二次编辑视频标签不显示,在编辑器内显示成img标签,二次保存视频被替换问题 问题1࿱…...
ubuntu windows双系统踩坑
我有个台式机,先安装的ubuntu,本来想专门用来做开发,后面儿子长大了,给他看了一下星际争霸、魔兽争霸,立马就迷上了。还有一台windows的笔记本,想着可以和他联局域网一起玩,在ubuntu上用wine跑魔…...
嵌入式八股文(五)硬件电路篇
一、名词概念 1. 整流和逆变 (1)整流:整流是将交流电(AC)转变为直流电(DC)。常见的整流电路包括单向整流(二极管)、桥式整流等。 半波整流:只使用交流电的正…...
flink使用demo
1、添加不同数据源 package com.baidu.keyue.deepsight.memory.test;import com.baidu.keyue.deepsight.memory.WordCount; import com.baidu.keyue.deepsight.memory.WordCountData; import org.apache.flink.api.common.RuntimeExecutionMode; import org.apache.flink.api.…...
OpenCV(8):图像直方图
在图像处理中,直方图是一种非常重要的工具,它可以帮助我们了解图像的像素分布情况。通过分析图像的直方图,我们可以进行图像增强、对比度调整、图像分割等操作。 1 什么是图像直方图? 图像直方图是图像像素强度分布的图形表示&am…...
力扣LeetCode:1656 设计有序流
题目: 有 n 个 (id, value) 对,其中 id 是 1 到 n 之间的一个整数,value 是一个字符串。不存在 id 相同的两个 (id, value) 对。 设计一个流,以 任意 顺序获取 n 个 (id, value) 对,并在多次调用时 按 id 递增的顺序…...
NGINX配置TCP负载均衡
前言 之前本人做项目需要用到nginx的tcp负载均衡,这里是当时配置做的笔记;欢迎收藏 关注,本人将会持续更新 文章目录 配置Nginx的负载均衡 配置Nginx的负载均衡 nginx编译安装需要先安装pcre、openssl、zlib等库,也可以直接编译…...
vm和centos
安装 VMware Workstation Pro 1. 下载 VMware Workstation Pro 访问 VMware 官方网站(https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html ),在该页面中点击 “立即下载” 按钮,选择适合你操作…...
c#丰田PLC ToyoPuc TCP协议快速读写 to c# Toyota PLC ToyoPuc读写
源代码下载 <------下载地址 历史背景与发展 TOYOPUC协议源于丰田工机(TOYODA)的自动化技术积累。丰田工机成立于1941年,最初是丰田汽车的机床部门,后独立为专注于工业机械与控制系统的公司。2006年与光洋精工(Ko…...
量子计算的数学基础:复数、矩阵和线性代数
量子计算是基于量子力学原理的一种新型计算模式,它与经典计算机在信息处理的方式上有着根本性的区别。在量子计算中,信息的最小单位是量子比特(qubit),而不是传统计算中的比特。量子比特的状态是通过量子力学中的数学工具来描述的,因此,理解量子计算的数学基础对于深入学…...
【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter22-处理 XML
二十二、处理 XML 处理 XML XML 曾一度是在互联网上存储和传输结构化数据的标准。XML 的发展反映了 Web 的发展,因为DOM 标准不仅是为了在浏览器中使用,而且还为了在桌面和服务器应用程序中处理 XML 数据结构。在没有 DOM 标准的时候,很多开发…...
一个不错的API测试框架——Karate
Karate 是一款开源的 API 测试工具,基于 BDD(行为驱动开发)框架 Cucumber 构建,但无需编写 Java 或 JavaScript 代码即可直接编写测试用例。它结合了 API 测试、模拟(Mocking)和性能测试功能,支持 HTTP、GraphQL 和 WebSocket 等协议,语法简洁易读。 Karate详细介绍 K…...
文字语音相互转换
目录 1.介绍 2.思路 3.安装python包 3.程序: 4.运行结果 1.介绍 当我们使用一些本地部署的语言模型的时候,往往只能进行文字对话,这一片博客教大家如何实现语音转文字和文字转语音,之后接入ollama的模型就能进行语音对话了。…...
DeepSeek-R1:通过强化学习激发大语言模型的推理能力
注:此文章内容均节选自充电了么创始人,CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》(人工智能科学与技术丛书)【陈敬雷编著】【清华大学出版社】 文章目录 DeepSeek大模型技术系列三DeepSeek大模型技术系列三》DeepSeek-…...
MATLAB中fft函数用法
目录 语法 说明 示例 含噪信号 高斯脉冲 余弦波 正弦波的相位 FFT 的插值 fft函数的功能是对数据进行快速傅里叶变换。 语法 Y fft(X) Y fft(X,n) Y fft(X,n,dim) 说明 Y fft(X) 用快速傅里叶变换 (FFT) 算法计算 X 的离散傅里叶变换 (DFT)。 如果 X 是向量&…...
【SpringBoot】【JWT】使用JWT的claims()方法存入Integer类型数据自动转为Double类型
生成令牌时使用Map存入Integer类型数据,将map使用claims方法放入JWT令牌后,取出时变成Double类型,强转报错: 解决: 将Integer转为String后存入JWT令牌,不会被自动转为其他类型,取出后转为Integ…...
Crack SmartGit
感谢大佬提供的资源 一、正常安装SmartGit 二、下载crackSmartGit crackSmartGit 发行版 - Gitee.com 三、使用crackSmartGit 1. 打开用户目录:C:\Users%用户名%\AppData\Roaming\syntevo\SmartGit。将crackSmartGit.jar和license.zip拷贝至 用户目录。 2. 用户…...
【备赛】在keil5里面创建新文件的方法+添加lcd驱动
一、先创建出文件夹和相应的.c和.h文件 因为在软件里面创建出的是在MDk文件那里面的,实际上是不存在你的新文件夹里的。 二、在keil5软件里面操作 1)添加文件夹 -*---------------------------------------------------------- 这里最好加上相对路径&…...
Rk3568驱动开发_驱动实现流程以及本质_3
1设备号: cat /proc/devices 编写驱动模块需要要想加载到内核并与设备正常通信,那就需要申请一个设备号,用cat /proc/devices可以查看已经被占用的设备号 设备号有什么用?不同设备其驱动实现不同用设备号去区分,例如字…...
【学习笔记】LLM+RL
文章目录 1 合成数据与模型坍缩(model collapse),1.1 递归生成数据与模型坍缩1.2 三种错误1.3 理论直觉1.4 PPL指标 2 基于开源 LLM 实现 O1-like step by step 慢思考(slow thinking),ollama,streamlit2.1…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象: android studio报错: [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决: 不要动CMakeLists.…...
如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...
Appium下载安装配置保姆教程(图文详解)
目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...
【Java多线程从青铜到王者】单例设计模式(八)
wait和sleep的区别 我们的wait也是提供了一个还有超时时间的版本,sleep也是可以指定时间的,也就是说时间一到就会解除阻塞,继续执行 wait和sleep都能被提前唤醒(虽然时间还没有到也可以提前唤醒),wait能被notify提前唤醒…...
