Ueditor百度编辑器插入video视频

需要在百度编辑器内插入mp4，但总是被和谐。而且默认是embed，不支持手机查看。

白名单内增加了一部分标签，但还是不完善。

于是，新增一个按钮，直接插入拼接好的代码。

1. 页面新增一个input，可以选择或输入音视频的地址；

2. 后面在增加一个插入的按钮。

HTML代码：

            <div class="layui-form-item"><label class="layui-form-label">正文音视频</label><div class="layui-input-block" style="padding-right:90px;"><input type="text"  id="videourl" name="" value="" autocomplete="off" placeholder="请选择云视频" class="layui-input" style="padding-right:55px;"><button type="button" class="layui-btn layui-btn-primary layui-btn-position ajax-iframe" data-width="800px" data-height="450px" style="padding-right:30px;"><i class="fa fa-cloud"></i> OSS音/视频</button><span class="insertVideoCode layui-btn layui-btn-primary layui-btn-position">插入</span></div></div>

3. 编辑器初始化代码：

<script>UE.getEditor('editor',{// initialFrameWidth :800,// 设置编辑器宽度initialFrameHeight:800,// 设置编辑器高度scaleEnabled:true});var editor= 'editor';var uiName = 'ivideo';UE.registerUI('button', function(editor, uiName) {//注册按钮执行时的command命令，使用命令默认就会带有回退操作editor.registerCommand(uiName, {execCommand: function() {//默认promptvar videolurl =  $('#videolurl').val();if(videolurl == ''){layer.msg('请先在文本框内输入视频地址');}else{$('#videolurl').val('');/*//插入video代码，因为小窗播放的标签会被过滤，这里用kkkk来代替，前端页面在做替换。//{:str_replace('class="playsinline"','webkit-playsinline="true"   x5-playsinline="x5-playsinline"  playsinline="true" ',$info.document)}*/this.execCommand('insertHtml', '<video src="'+videolurl+'" class="playsinline" controls="true" preload="auto"  style="object-fit:fill;width:100%;max-width:760px;"></video>'); return true;  }}});$('.insertVideoCode').click(function(){editor.execCommand(uiName);})}); </script>

VIEW页面将class="playsinline" 替换为：webkit-playsinline="true" x5-playsinline="x5-playsinline" playsinline="true"

代码（php）：

{:str_replace('class="playsinline"','webkit-playsinline="true"   x5-playsinline="x5-playsinline"  playsinline="true" ',$info.document)}

结束，记录一下！

Ueditor百度编辑器插入video视频相关推荐

【UEditor】百度编辑器插入video视频
https://blog.csdn.net/weixin_43433807/article/details/106821064
百度在线编辑器显示html,UEditor百度编辑器中JS/html代码（script标签）被过滤的解决办法...
作为一名程序员,在文章中经常会插入各种代码,大部分代码都不会发生问题,但div和script标签是经常会被使用到的. 而在之前的文章编写过程中,插入JS代码后,第一次文章会显示正常,而之后在后台编辑器 ...
Vue使用UEditor百度编辑器，上传图片服务配置问题，查看版本
文章目录 Vue使用UEditor百度编辑器,上传图片服务配置问题,查看版本 1.前言 2.环境配置 3.查看版本 4.配置demo 4-1.制作demo模块 4-2.配置后端服务 4-3.重启Tom ...
ueditor百度编辑器常见报错的解决方法
如果是第一次使用ueditor百度编辑器,或者对它不熟悉的情况下使用,会出现一些常见问题和报错.怎么使用建议参考ueditor官网,这里只谈一些常见错误. 问题:'UE' is not defind ...
ueditor百度编辑器destoon的word图片转存功能
destoon6.0或destoon7.0整合ueditor百度编辑器后,需要把word中的图片直接复制到编辑器,然后点击转存按钮,即可批量保存上传,如下图新版的百度编辑器可能要修改ueditor. ...
修复百度编辑器插入视频的bug，可实时预览视频，可修改到支持手机查看视频...
站在前人的肩膀上我们就可以站的更高,看得更远. 所以,请在 ueditor.config.js中搜索 whitlist , 在后面加入 source: ['src', 'type'], embed: ...
kindeditor html5视频,kindeditor编辑器插入mp4视频不显示及不过滤video的方法
传视频是单独做了htm5的video调用,所以在电脑及移动设备上访问没问题,但是很多地方比如题目,题目解析等都在kindeditor编辑器里面添加的,因为肯定要添加图文,但是添加视频的话,因为kind ...
百度编辑器上传视频以及视频编辑器预览bug解决
百度编辑器目前来讲是运用比较广泛的一个编辑器了,不仅开源还有中文的文档,所以很受欢迎,不过里面也有许多地方需要开发人员自己调试,其中一个比较常见的问题就是上传视频了,上传视频本身有一些小bug,这个基 ...
Ueditor百度编辑器中的 setContent()方法的使用
百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容函数说明:setContent(string,boolean); 参数string ...

Ueditor百度编辑器插入video视频

Ueditor百度编辑器插入video视频相关推荐

最新文章

热门文章