Kindeditor编辑器是挺好用的,可是上传的flv视频文件在前台是无法访问的。到底是什么问题,先看看通过该编辑器上传的flv视频文件的源代码:
- <embed src="/upload/201210/22/201210221043235781.flv" type="application/x-shockwave-flash" width="550" height="400" quality="high" />
分析一下上边的代码,这是播放swf文件的代码,而要在网页里边播放flv视频文件,需要加载一个播放器了,如果把上边代码改成如下代码:
- <embed src="/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=/upload/201210/19/201210191854485625.flvtype="application/x-shockwave-flash" width="550" height="400" quality="high" />
就可以在网页中正常访问了,分析一下这段代码中的src,就是访问Flvplayer.swf播放器并通过该播放器加载相应的flv视频文件,这样才可以在网页中正常打开flv视频文件。下边就介绍如何在Kindeditor编辑器中添加该功能。
1. 在\themes\common文件夹下新添加flv标志的图片flv.gif。
2. 修改\themes\default\default.png图片,在其底部添加flv图标。
3. 在编辑器功能菜单中显示添加flv文件的菜单,修改\themes\default\default.css文件,找到.ke-icon-flash样式,在其下边添加一段新的样式,代码如下:
- .ke-icon-flv {
- background-position: 0px -1232px;
- width: 16px;
- height: 16px;
- }
4. 修改lang文件夹下的zh_CN.js文件,找到
- flash: 'Flash',
并在其下边添加代码
- flv: 'Flv',
5. plugins文件夹下新建文件夹flv,并在flv文件夹下再新添加一个文件夹swf,把播放flv文件的swf文件Flvplayer.swf拷贝到该文件夹下,在flv文件夹里新添加flv.js文件。代码如下:
- /*******************************************************************************
- * KindEditor - WYSIWYG HTML Editor for Internet
- * Copyright (C) 2006-2011 kindsoft.net
- *
- * @author juhnpen <juhnpen@qq.com>
- * @site http://www.kindsoft.net/
- * @licence http://www.kindsoft.net/license.php
- *******************************************************************************/
- KindEditor.plugin('flv', function (K) {
- var self = this, name = 'flv', lang = self.lang(name + '.'),
- allowFlvUpload = K.undef(self.allowFlvUpload, true),
- allowFileManager = K.undef(self.allowFileManager, false),
- uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php');
- self.plugin.flv = {
- edit: function () {
- var html = [
- '<div style="padding:10px 20px;">',
- //url
- '<div class="ke-dialog-row">',
- '<label for="keUrl" style="width:60px;">' + lang.url + '</label>',
- '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width: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="width: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="width: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,
- height: 200,
- 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;
- }
- //删除修改flv是增加的str字符
- var str = '/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=';
- if (url.indexOf(str)>=0) {
- var last = url.substring(url.indexOf(str) + str.length, url.length);
- url = last;
- }
- var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
- src: '/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=' + url,
- type: 'application/x-shockwave-flash',
- width: width,
- height: height,
- quality: 'high',
- allowfullscreen: 'true'
- });
- 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 (allowFlvUpload) {
- var uploadbutton = K.uploadbutton({
- button: K('.ke-upload-button', div)[0],
- fieldName: 'imgFile',
- url: K.addParam(uploadJson, 'dir=flv'),
- afterUpload: function (data) {
- dialog.hideLoading();
- if (data.error === 0) {
- var url = K.formatUrl(data.url, 'absolute');
- urlBox.val(url);
- if (self.afterUpload) {
- self.afterUpload.call(self, url);
- }
- 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();
- urlBox.width(250);
- }
- if (allowFileManager) {
- viewServerBtn.click(function (e) {
- self.loadPlugin('filemanager', function () {
- self.plugin.filemanagerDialog({
- viewType: 'LIST',
- dirName: 'flv',
- clickFn: function (url, title) {
- if (self.dialogs.length > 1) {
- K('[name="url"]', div).val(url);
- self.hideDialog();
- }
- }
- });
- });
- });
- } else {
- viewServerBtn.hide();
- }
- var img = self.plugin.getSelectedFlv();
- 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.getSelectedFlv().remove();
- }
- };
- self.clickToolbar(name, self.plugin.flv.edit);
- });
6. 修改kindeditor.js文件,找到代码
- items: [
- 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',
- 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
- 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
- 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
- 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
- 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
- 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'
将其修改为
- items: [
- 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',
- 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
- 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
- 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
- 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
- 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
- 'flash', 'flv', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'
也就是在'flash',后边添加'flv',代码。
7. 修改kindeditor.js文件,找到function _mediaType(src)方法,将其里边的代码修改成下边代码:
- function _mediaType(src) {
- if (/\.(rm|rmvb)(\?|$)/i.test(src)) {
- return 'audio/x-pn-realaudio-plugin';
- }
- if (/\.(flv)(\?|$)/i.test(src)) {
- return 'application/x-shockwave-flv';
- }
- if (/\.(swf)(\?|$)/i.test(src)) {
- return 'application/x-shockwave-flash';
- }
- return 'video/x-ms-asf-plugin';
- }
8. 修改kindeditor.js文件,找到function _mediaType(src)方法,将其改为如下:
- function _mediaClass(type) {
- if (/realaudio/i.test(type)) {
- return 'ke-rm';
- }
- if (/flash/i.test(type)) {
- return 'ke-flash';
- }
- if (/flv/i.test(type)) {
- return 'ke-flv';
- }
- return 'ke-media';
- }
9. 修改kindeditor.js文件,找到function _mediaImg(blankPath, attrs)方法,将其里边的type = attrs.type || _mediaType(attrs.src)改为type = _mediaType(attrs.src)
10. 修改kindeditor.js文件,找到_getInitHtml(themesPath, bodyClass, cssPath, cssData)方法,在代码
- 'img.ke-flash {',
- ' border:1px solid #AAA;',
- ' background-image:url(' + themesPath + 'common/flash.gif);',
- ' background-position:center center;',
- ' background-repeat:no-repeat;',
- ' width:100px;',
- ' height:100px;',
- '}',
下边添加代码:
- 'img.ke-flv {',
- ' border:1px solid #AAA;',
- ' background-image:url(' + themesPath + 'common/flv.gif);',
- ' background-position:center center;',
- ' background-repeat:no-repeat;',
- ' width:100px;',
- ' height:100px;',
- '}',
11. 修改kindeditor.js文件,找到代码
- self.plugin.getSelectedFlash = function () {
- return _getImageFromRange(self.edit.cmd.range, function (img) {
- return img[0].className == 'ke-flash';
- });
- };
在其下边添加如下代码:
- self.plugin.getSelectedFlv = function () {
- return _getImageFromRange(self.edit.cmd.range,function (img) {
- return img[0].className =='ke-flv';
- });
- };
12. 修改kindeditor.js文件,找到代码_each('link,image,flash,media,anchor'.split(','), function (i, name),将其修改为_each('link,image,flash,flv,media,anchor'.split(','), function (i, name)
13. 修改kindeditor.js文件,找到代码return html.replace(/<img[^>]*class="?ke-(flash|rm|media)"?[^>]*>/ig, function (full),将其修改为return html.replace(/<img[^>]*class="?ke-(flash|flv|rm|media)"?[^>]*>/ig, function (full)
通过上边13步修改之后,现在的Kindeditor就多了一个上传flv视频文件的功能。效果如下:
前台网页看到的效果