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

【亲测有效】百度Ueditor富文本编辑器添加插入视频、视频不显示、和插入视频后二次编辑视频标签不显示,显示成img标签,二次保存视频被替换问题,解决方案

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

问题1:添加插入视频、视频不显示。效果图

问题1配图:

解决方案

1.打开ueditor目录下ueditor.all.js文件
2.搜索me.commands["insertvideo"]
3.将17770行代码中的image修改成video
将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标签,二次保存视频被替换问题。效果图

插入视频后二次编辑视频标签不显示,在编辑器内显示成img标签,二次保存视频被替换问题。效果图

解决方案

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

将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富文本编辑器插入视频后二次编辑视频标签不显示&#xff0c;在编辑器内显示成img标签&#xff0c;二次保存视频被替换问题 问题1&#xff1…...

ubuntu windows双系统踩坑

我有个台式机&#xff0c;先安装的ubuntu&#xff0c;本来想专门用来做开发&#xff0c;后面儿子长大了&#xff0c;给他看了一下星际争霸、魔兽争霸&#xff0c;立马就迷上了。还有一台windows的笔记本&#xff0c;想着可以和他联局域网一起玩&#xff0c;在ubuntu上用wine跑魔…...

嵌入式八股文(五)硬件电路篇

一、名词概念 1. 整流和逆变 &#xff08;1&#xff09;整流&#xff1a;整流是将交流电&#xff08;AC&#xff09;转变为直流电&#xff08;DC&#xff09;。常见的整流电路包括单向整流&#xff08;二极管&#xff09;、桥式整流等。 半波整流&#xff1a;只使用交流电的正…...

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):图像直方图

在图像处理中&#xff0c;直方图是一种非常重要的工具&#xff0c;它可以帮助我们了解图像的像素分布情况。通过分析图像的直方图&#xff0c;我们可以进行图像增强、对比度调整、图像分割等操作。 1 什么是图像直方图&#xff1f; 图像直方图是图像像素强度分布的图形表示&am…...

力扣LeetCode:1656 设计有序流

题目&#xff1a; 有 n 个 (id, value) 对&#xff0c;其中 id 是 1 到 n 之间的一个整数&#xff0c;value 是一个字符串。不存在 id 相同的两个 (id, value) 对。 设计一个流&#xff0c;以 任意 顺序获取 n 个 (id, value) 对&#xff0c;并在多次调用时 按 id 递增的顺序…...

NGINX配置TCP负载均衡

前言 之前本人做项目需要用到nginx的tcp负载均衡&#xff0c;这里是当时配置做的笔记&#xff1b;欢迎收藏 关注&#xff0c;本人将会持续更新 文章目录 配置Nginx的负载均衡 配置Nginx的负载均衡 nginx编译安装需要先安装pcre、openssl、zlib等库&#xff0c;也可以直接编译…...

vm和centos

安装 VMware Workstation Pro 1. 下载 VMware Workstation Pro 访问 VMware 官方网站&#xff08;https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html &#xff09;&#xff0c;在该页面中点击 “立即下载” 按钮&#xff0c;选择适合你操作…...

c#丰田PLC ToyoPuc TCP协议快速读写 to c# Toyota PLC ToyoPuc读写

源代码下载 <------下载地址 历史背景与发展 TOYOPUC协议源于丰田工机&#xff08;TOYODA&#xff09;的自动化技术积累。丰田工机成立于1941年&#xff0c;最初是丰田汽车的机床部门&#xff0c;后独立为专注于工业机械与控制系统的公司。2006年与光洋精工&#xff08;Ko…...

量子计算的数学基础:复数、矩阵和线性代数

量子计算是基于量子力学原理的一种新型计算模式,它与经典计算机在信息处理的方式上有着根本性的区别。在量子计算中,信息的最小单位是量子比特(qubit),而不是传统计算中的比特。量子比特的状态是通过量子力学中的数学工具来描述的,因此,理解量子计算的数学基础对于深入学…...

【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter22-处理 XML

二十二、处理 XML 处理 XML XML 曾一度是在互联网上存储和传输结构化数据的标准。XML 的发展反映了 Web 的发展&#xff0c;因为DOM 标准不仅是为了在浏览器中使用&#xff0c;而且还为了在桌面和服务器应用程序中处理 XML 数据结构。在没有 DOM 标准的时候&#xff0c;很多开发…...

一个不错的API测试框架——Karate

Karate 是一款开源的 API 测试工具,基于 BDD(行为驱动开发)框架 Cucumber 构建,但无需编写 Java 或 JavaScript 代码即可直接编写测试用例。它结合了 API 测试、模拟(Mocking)和性能测试功能,支持 HTTP、GraphQL 和 WebSocket 等协议,语法简洁易读。 Karate详细介绍 K…...

文字语音相互转换

目录 1.介绍 2.思路 3.安装python包 3.程序&#xff1a; 4.运行结果 1.介绍 当我们使用一些本地部署的语言模型的时候&#xff0c;往往只能进行文字对话&#xff0c;这一片博客教大家如何实现语音转文字和文字转语音&#xff0c;之后接入ollama的模型就能进行语音对话了。…...

DeepSeek-R1:通过强化学习激发大语言模型的推理能力

注&#xff1a;此文章内容均节选自充电了么创始人&#xff0c;CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》&#xff08;人工智能科学与技术丛书&#xff09;【陈敬雷编著】【清华大学出版社】 文章目录 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类型数据&#xff0c;将map使用claims方法放入JWT令牌后&#xff0c;取出时变成Double类型&#xff0c;强转报错&#xff1a; 解决&#xff1a; 将Integer转为String后存入JWT令牌&#xff0c;不会被自动转为其他类型&#xff0c;取出后转为Integ…...

Crack SmartGit

感谢大佬提供的资源 一、正常安装SmartGit 二、下载crackSmartGit crackSmartGit 发行版 - Gitee.com 三、使用crackSmartGit 1. 打开用户目录&#xff1a;C:\Users%用户名%\AppData\Roaming\syntevo\SmartGit。将crackSmartGit.jar和license.zip拷贝至 用户目录。 2. 用户…...

【备赛】在keil5里面创建新文件的方法+添加lcd驱动

一、先创建出文件夹和相应的.c和.h文件 因为在软件里面创建出的是在MDk文件那里面的&#xff0c;实际上是不存在你的新文件夹里的。 二、在keil5软件里面操作 1&#xff09;添加文件夹 -*---------------------------------------------------------- 这里最好加上相对路径&…...

Rk3568驱动开发_驱动实现流程以及本质_3

1设备号&#xff1a; cat /proc/devices 编写驱动模块需要要想加载到内核并与设备正常通信&#xff0c;那就需要申请一个设备号&#xff0c;用cat /proc/devices可以查看已经被占用的设备号 设备号有什么用&#xff1f;不同设备其驱动实现不同用设备号去区分&#xff0c;例如字…...

【学习笔记】LLM+RL

文章目录 1 合成数据与模型坍缩&#xff08;model collapse&#xff09;,1.1 递归生成数据与模型坍缩1.2 三种错误1.3 理论直觉1.4 PPL指标 2 基于开源 LLM 实现 O1-like step by step 慢思考&#xff08;slow thinking&#xff09;&#xff0c;ollama&#xff0c;streamlit2.1…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...