xheditor的使用心得,修改实现flv上传播放,插件加入网络视频插入和google地图功能

最近在用yii+dwz打造后台,网上资料十分有限,但开源的东西总有解决办法的。我用的是dwz0.5,但已把dwz内核替换为1.4.3,整合过程中,在xheditor和uploadify上遇到较多问题,此文先谈xheditor。

xheditor官网:http://xheditor.com/

上面有大量的demo示例,基本使用方法基本不是问题。

媒体插入功能整合jwplayer实现flv视频的上传和播放

参考官网的demo7和demo9,

其中demo7应用了插件的功能,插入代码、google地图的功能,个人感觉是比较实用的,但flv视频的功能,并且不支持上传,但由于采用ubb实现,个人认为实用性不强。

通过参考demo9的测试二,可轻松完成flv视频的上传和插入,但与自带的embed实现媒体插入的功能有些重叠,可索性把媒体插入功能进行小改。

首先,下载xheditor压缩前的源码,找到媒体插入的方法:

case 'media':
_this.showEmbed('Media',htmlMedia
..............

此处,我自定一个函数showEmbedOrPlayer来进行功能小改,于是改为:

case 'media':
_this.showEmbedOrPlayer('Media',htmlMedia
..............

然后,找到showEmbed方法并复制为showEmbedOrPlayer进行改造,以下贴出单URL模式的改造方法:

else if(aUrl.length===1)
{//单URL模式
    url=aUrl[0].split('||');
    if(aUrl[0].toLowerCase().indexOf('.flv')!=-1 || aUrl[0].toLowerCase().indexOf('.mp4')!=-1 || aUrl[0].toLowerCase().indexOf('.mp3')!=-1){
        var tempFlvCode='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" id="myjwplayer" height="xhe_height" width="xhe_width"><param name="src" value="/inc/jwplayer/player.swf" /><param name="flashvars" value="file=xhe_tmpurl" /><param name="autostart" value="false" /><param name="PlayCount" value="1" /><embed flashvars="file=xhe_tmpurl" allowfullscreen="true" bgcolor="#ffffff" src="/inc/jwplayer/player.swf" height="xhe_height" width="xhe_width" /></object>';
         tempFlvCode=tempFlvCode.replace(/xhe_tmpurl/g,url[0]);
         tempFlvCode=tempFlvCode.replace(/xhe_width/g,url[1]?url[1]:w);
         tempFlvCode=tempFlvCode.replace(/xhe_height/g,url[2]?url[2]:h);
        _this.pasteHTML(tempFlvCode);
    }
    else{
        if(jParent.length===0){
            _this.pasteHTML(sBaseCode.replace('xhe_tmpurl',url[0]+'#xhe_tmpurl')+' />');
            jParent=$('embed[src$="#xhe_tmpurl"]',_doc);
        }
        xheAttr(jParent,'src',url[0]);
        jParent.attr('width',url[1]?url[1]:w);
        jParent.attr('height',url[2]?url[2]:h);
    }
}

坑爹的filedata

找出uploadInputname='filedata';
在上传处理的PHP文件中用$_FILES["Filedata"]取不到文件,折腾半天,是因为filedata的f没用大写。。。因为我是跟swfupload使用相同的上传处理页面,所以必须改为Filedata,也许这只是个人问题,uploadify应该也是Filedata的。

对xheditor源文件进行修改后,为优化文件大小,需要进行压缩,使用工具视个人习惯。
如果你是DWZ框架的使用者,对xheditor进行进行修改及插件的添加需要在dwz.ui.js里进行,修改以后重新打包dwz.min.js。

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏