百度富文本编辑器插入视频链接相关问题

1.在百度编辑器中插入视频，视频网址可以识别，但是提交却出现了问题

解决：
修改 ueditor.config.js 文件：

 img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'data-latex'],

在白名单后面添加：

source: ['src', 'type'],embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play', 'autoplay', 'loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

修改后如图：

2.插入是视频时video和embed两种形式，有的浏览器支持embed有的不支持，这里我们将embed改为video
这里用ueditor.all.js举例（也有引用ueditor.all.min.js的，代码不一样，但是利用关键词可以找到对应关系，然后进行修改）

  switch (type){case 'image':str = '<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="' + classname.replace(/\bvideo-js\b/, '') + '"'  +' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+'" />'break;case 'embed':str = '<embed type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +' src="' +  utils.html(url) + '" width="' + width  + '" height="' + height  + '"'  + (align ? ' style="float:' + align + '"': '') +' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';break;case 'video':var ext = url.substr(url.lastIndexOf('.') + 1);if(ext == 'ogv') ext = 'ogg';str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +'<source src="' + url + '" type="video/' + ext + '" /></video>';break;}

改成

   switch (type){case 'image':str = '<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="' + classname.replace(/\bvideo-js\b/, '') + '"'  +' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+'" />'break;case 'embed':var ext = url.substr(url.lastIndexOf('.') + 1);if(ext == 'ogv') ext = 'ogg';str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +'<source src="' + url + '" type="video/' + ext + '" /></video>';break;case 'video':var ext = url.substr(url.lastIndexOf('.') + 1);if(ext == 'ogv') ext = 'ogg';str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +'<source src="' + url + '" type="video/' + ext + '" /></video>';break;}

就是把video情况的代码复制给embed，当这样改完之后，插入视频源码就变成以下形式了

但是又有问题就是插入后显示一个无法显示的图片

如引用ueditor.all.js则搜索

 me.commands["insertvideo"]

把

html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));

改正

html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'embed'));

如引用ueditor.all.min.js则搜索

c.commands.insertvideo

把

 h.push(a(g.url, g.width || 420, g.height || 280, i + j, null, f, "image"));

改成

 h.push(a(g.url, g.width || 420, g.height || 280, i + j, null, f, "embed"));

当提交后发现只添加视频内容，不添加文字，视频信息不能保存到数据库的问题

造成这个问题的原因是富文本保存内容时会筛除空标签，然后统计是否有内容，通过字数统计也可以看到，上传完视频后字数还是零，因为视频上传后是标签，这个标签就算是空标签，所以获取信息时它会认为没有内容，在获取信息时就会给你一个空值，也就不能保存到数据库中；

一般情况不会有这种需求，如果需要实现此功能，需要修改ueditor.all.js文件，17670行和17674行

在video标签中添加一个内容，这个内容不会显示到页面，这样就可以获取到录入的视频信息了。这样如果右下角有字数统计，可以看到视频会占用一个字，这个字就是video标签中的内容。（如果引用 ueditor.all.min.js，搜素UE.plugins.video修改相关位置）

保存后发现当编辑时视频不显示

ueditor.all.js文件中第7343行、7344行、7345行注释掉

ueditor.all.min.js 搜索 f.fireEvent(“beforesetcontent”,b)

删除前

删除后

若想固定一个视频封面

然后在video标签中加上poster属性即可

百度富文本编辑器插入视频链接相关问题相关推荐

百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
百度富文本编辑器手机端预览插件开发
在百度富文本编辑器编辑的时候担心在手机端打开格式乱掉,编辑提交再去手机端刷新查看比较麻烦,希望在编辑器可以直接查看,效果如下: 下载文件: 链接: https://pan.baidu.com/s/1v ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
百度富文本编辑jsp上传_百度富文本编辑器教程，从入门到放弃
原标题:百度富文本编辑器教程,从入门到放弃百度UEditor 资源与项目分离-完全教程夏老师人真好又求到一篇技术贴来来来继续掏出小本本什么是百度UEditor? 百度UEditor是一款富 ...
百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
帝国CMS TAGS 结合百度富文本编辑器
先下载对应百度富文本编辑器文件(这就不提了网上一大堆) 接下来将下载的文件放置/e/data/ecmseditor下页面引入对应的js文件 <script src="../../d ...
如何部署JSP版本的百度富文本编辑器（带图片上传功能）
博主之前因为公司项目需要部署百度的富文本编辑器到项目中,由于之前一直是后端开发,所以部署上还是费了一番心思的,网上也有很多教程但是用起来总会有各种问题,今天在这里记录一下以备今后的不时之需,也希望帮助 ...

百度富文本编辑器插入视频链接相关问题

百度富文本编辑器插入视频链接相关问题相关推荐

最新文章

热门文章