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部分代码即可

  • 相关阅读:
    tabsGif
    this.$refs.tabs.activeKey ref就是vue里面的id
    @click.native 会触发原生 click事件 vue
    Web Server Notifier 是chrome网上商店的一个插件
    autoOpenBrowser: true, 运行npm后自动打开浏览器
    总结vue2.0 配置的实例方法
    chrome 打开上次关闭的tab ctrl+shift+T
    动态菜单路由
    gitee 如何创建仓库 及发布
    小白接口
  • 原文地址:https://www.cnblogs.com/henshui/p/2903610.html
Copyright © 2011-2022 走看看