zoukankan      html  css  js  c++  java
  • kindeditor 增加加flv上传视频插件JW player

    网上有利用原来的flash或media插件修改的方法,不过为了不影响原编辑器的使用或升级,还是采用新增一个flvplayer插件的办法

    1、在plugin下建立文件夹flvplayer, 建立flvplaery.js文件 源码如下

    /*******************************************************************************
    * KindEditor - WYSIWYG HTML Editor for Internet
    * Copyright (C) 2006-2011 kindsoft.net
    *
    * @author Roddy <luolonghao@gmail.com>
    * @site http://www.kindsoft.net/
    * @licence http://www.kindsoft.net/license.php
    *******************************************************************************/
    
    KindEditor.plugin('flvplayer', function(K) {
    	var self = this, name = 'flvplayer', lang = self.lang(name + '.'),
    		allowFlashUpload = K.undef(self.allowFlashUpload, true),
    		allowFileManager = K.undef(self.allowFileManager, false),
    		formatUploadUrl = K.undef(self.formatUploadUrl, true),
    		extraParams = K.undef(self.extraFileUploadParams, {}),
    		filePostName = K.undef(self.filePostName, 'imgFile'),
    		uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php');
    	self.plugin.flash = {
    		edit : function() {
    			var html = [
    				'<div style="padding:20px;">',
    				//url
    				'<div class="ke-dialog-row">',
    				'<label for="keUrl" style="60px;">' + lang.url + '</label>',
    				'<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="160px;" />  ',
    				'<input type="button" class="ke-upload-button" value="' + lang.upload + '" />  ',
    				'<span class="ke-button-common ke-button-outer">',
    				'<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',
    				'</span>',
    				'</div>',
    				//width
    				'<div class="ke-dialog-row">',
    				'<label for="keWidth" style="60px;">' + lang.width + '</label>',
    				'<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" /> ',
    				'</div>',
    				//height
    				'<div class="ke-dialog-row">',
    				'<label for="keHeight" style="60px;">' + lang.height + '</label>',
    				'<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" /> ',
    				'</div>',
    				'</div>'
    			].join('');
    			var dialog = self.createDialog({
    				name : name,
    				width : 450,
    				title : self.lang(name),
    				body : html,
    				yesBtn : {
    					name : self.lang('yes'),
    					click : function(e) {
    						var url = K.trim(urlBox.val()),
    							width = widthBox.val(),
    							height = heightBox.val();
    						if (url == 'http://' || K.invalidUrl(url)) {
    							alert(self.lang('invalidUrl'));
    							urlBox[0].focus();
    							return;
    						}
    						if (!/^\d*$/.test(width)) {
    							alert(self.lang('invalidWidth'));
    							widthBox[0].focus();
    							return;
    						}
    						if (!/^\d*$/.test(height)) {
    							alert(self.lang('invalidHeight'));
    							heightBox[0].focus();
    							return;
    						}
    					//	var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
    //								src : url,
    //								type : K.mediaType('.swf'),
    //								width : width,
    //								height : height,
    //								quality : 'high'
    //							});
    					var html='<script src="/flowplayer/flowplayer-3.2.11.min.js"></script>' + '<a href="'+url+'"       style="display:block;'+width+'px;height:'+height+'px;"       id="player">    </a>  <script language="JavaScript">      flowplayer("player", "/flowplayer/flowplayer-3.2.15.swf");    </script>';					
    						self.insertHtml(html).hideDialog().focus();
    					}
    				}
    			}),
    			div = dialog.div,
    			urlBox = K('[name="url"]', div),
    			viewServerBtn = K('[name="viewServer"]', div),
    			widthBox = K('[name="width"]', div),
    			heightBox = K('[name="height"]', div);
    			urlBox.val('http://');
    
    			if (allowFlashUpload) {
    				var uploadbutton = K.uploadbutton({
    					button : K('.ke-upload-button', div)[0],
    					fieldName : filePostName,
    					extraParams : extraParams,
    					url : K.addParam(uploadJson, 'dir=flvplayer'),
    					afterUpload : function(data) {
    						dialog.hideLoading();
    						if (data.error === 0) {
    							var url = data.url;
    							if (formatUploadUrl) {
    								url = K.formatUrl(url, 'absolute');
    							}
    							urlBox.val(url);
    							if (self.afterUpload) {
    								self.afterUpload.call(self, url, data, name);
    							}
    							alert(self.lang('uploadSuccess'));
    						} else {
    							alert(data.message);
    						}
    					},
    					afterError : function(html) {
    						dialog.hideLoading();
    						self.errorDialog(html);
    					}
    				});
    				uploadbutton.fileBox.change(function(e) {
    					dialog.showLoading(self.lang('uploadLoading'));
    					uploadbutton.submit();
    				});
    			} else {
    				K('.ke-upload-button', div).hide();
    			}
    
    			if (allowFileManager) {
    				viewServerBtn.click(function(e) {
    					self.loadPlugin('filemanager', function() {
    						self.plugin.filemanagerDialog({
    							viewType : 'LIST',
    							dirName : 'flvplayer',
    							clickFn : function(url, title) {
    								if (self.dialogs.length > 1) {
    									K('[name="url"]', div).val(url);
    									if (self.afterSelectFile) {
    										self.afterSelectFile.call(self, url);
    									}
    									self.hideDialog();
    								}
    							}
    						});
    					});
    				});
    			} else {
    				viewServerBtn.hide();
    			}
    
    			var img = self.plugin.getSelectedFlash();
    			if (img) {
    				var attrs = K.mediaAttrs(img.attr('data-ke-tag'));
    				urlBox.val(attrs.src);
    				widthBox.val(K.removeUnit(img.css('width')) || attrs.width || 0);
    				heightBox.val(K.removeUnit(img.css('height')) || attrs.height || 0);
    			}
    			urlBox[0].focus();
    			urlBox[0].select();
    		},
    		'delete' : function() {
    			self.plugin.getSelectedFlash().remove();
    		}
    	};
    	self.clickToolbar(name, self.plugin.flash.edit);
    });
    

      2、css文件中增加

    .ke-icon-flvplayer {
    	background-position: 0px -512px;
    	 16px;
    	height: 16px;
    }
    

      3、默认插件调用增加

    kindeditor.js

    items : 里面增加 'flvplayer' 

    4、关于上传和文件管理 的服务器脚本修改(以asp为例)

    If instr(lcase("image,flash,media,file,flvplayer"), dirName) < 1 Then
        showError("目录名不正确。"&dirName)
    End If
    
    Select Case dirName
        Case "flash" extStr = flashExtStr
        Case "media" extStr = mediaExtStr
        Case "file" extStr = fileExtStr
        Case "flvplayer" extStr = flashExtStr
        Case Else  extStr = imageExtStr
    End Select

    相应的还要在flashExtStr 里面增加 播放器支持的格式 如 .flv  .f4v  .mp4等

    file_manager_json.asp 里面对应增加 flvplayer 目录权限、格式等

    综上,插件安装好后,以后如果换Flv网页播放器 只需对应换第1条里面的红色html部分代码即可

  • 相关阅读:
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 454 四数相加 II
    Java实现 LeetCode 454 四数相加 II
    Java实现 LeetCode 454 四数相加 II
    FFmpeg解码H264及swscale缩放详解
    linux中cat more less head tail 命令区别
    C语言字符串操作总结大全(超详细)
    如何使用eclipse进行嵌入式Linux的开发
  • 原文地址:https://www.cnblogs.com/henshui/p/2903610.html
Copyright © 2011-2022 走看看