最简单的KindEditor与ckplayer整合与使用方法

发布时间:2017-07-20 23:11 | 来源:亿能网络 | 人气数:3565

KindEditor 4.1.11版本增加了很多实用功能,如字体风格设置、表情图片和百度地图等,还默认自带了prettify代码高亮插件,对比与测试了NicEdit编辑器、百度编辑器UEditor后,果断换成了KindEditor 4.1.11。本文将把KindEditor的代码高亮插件配置与ckplayer整合过程记录,方便以后使用查询。

一、下载安装KindEditor 4.1.11并配置

KindEditor 4.1.11 (2016-03-31)下载地址:http://kindeditor.net/down.php 安装过程见官方,很简单的替换,注意要设置编辑器上传的图片与文件路径,php的设置文件是编辑器下upload_json.php与file_manager_json.php,设置完后,要在网站相关目录建立同名文件夹,要不然上传路径会出错。

二、prettify.js代码高亮插件启用

编辑器自带代码高亮插件路径:kindeditor\plugins\code 后台编辑器页面调用代码:

<script charset="utf-8" src="kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
<script>
KindEditor.ready(function(K){
window.editor = K.create('#content',{cssPath:'kindeditor/plugins/code/prettify.css',filterMode:false});
});
</script>
前台要展示代码的页面调用:
<link rel="stylesheet" type="text/css" href="https://www.ecan5.com/kindeditor/plugins/code/prettify.css" />
<script src="https://www.ecan5.com/kindeditor/plugins/code/prettify.js" type="text/javascript"></script>
<script>prettyPrint();</script>

显示风格可以在prettify.css样式里修改,效果如本页所示。

三、下载安装ckplayer 6.8版并配置

下载地址:http://www.ckplayer.com/down/ 解压后复制到网站根目录即可,地址\ckplayer下,有下面几个文件即可,甚至ckplayer.js都可以清除,配置与精简可以看官网教程。

1、配置kindeditor让插入的mp4与flash视频带上ckplayer参数

修改kindeditor/php/upload_json.php文件,增加mp4格式支持,修改后的代码如下:

//文件保存目录URL
$save_url = ROOT_URL . 'upload/';
//定义允许上传的文件扩展名(webm与ogg在HTML5可以播放)
$ext_arr = array(
	'image' => array('gif', 'jpg', 'jpeg', 'png', 'webp'),
	'flash' => array('swf', 'flv', 'mp4', 'm3u8'),
	'media' => array('swf', 'flv', 'mp4', 'm3u8', 'mp3', 'wav', 'mid', 'avi', 'rmvb', 'wma', 'wmv', 'mpg', 'asf', 'rm'),
	'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'html', 'htm', 'txt', 'zip', '7z', 'rar', 'tgz', 'sql', 'gz', 'bz2'),
);

修改kindeditor/kindeditor.js文件,非压缩版本,搜索_mediaType(src),更改后代码如下,增加mp4格式

function _mediaType(src) {
	if (/\.(rm|rmvb)(\?|$)/i.test(src)) {
		return 'audio/x-pn-realaudio-plugin';
	}
	if (/\.(swf|flv|mp4|m3u8)(\?|$)/i.test(src)) {
		return 'application/x-shockwave-flash';
	}
	return 'video/x-ms-asf-plugin';
}

搜索embed : ['id'在文件300行左右,后面增加flashvars参数,修改后如下:

embed : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess', 'wmode', 'flashvars'],

再次搜索_mediaEmbed(attrs)函数,修改为如下代码:

function _mediaEmbed(attrs) {
  var html = '<embed ';
  _each(attrs, function(key, val) {
    if (key == 'src') {
    		var sptype = val.substring(val.length-3,val.length);
    		sptype = sptype.toLowerCase();
    		if (sptype == 'swf') {
    			html += key + '="' + val + '" ';
    		} else{
    			html += key + '="/ckplayer/ckplayer.swf" ' + 'flashvars="f=' + val
            + '&p=0" ';
    		};
    } else {
      html += key + '="' + val + '" ';
    }
  });
  html += ' allowFullscreen="true" wmode="transparent" />';
  return html;
}

其中设置mp4等视频格式用ckplayer播放,用ckplayer播放优酷swf时出错,改用默认方式播放swf,参数&p=0为视频打开时不自动播放,allowFullscreen="true"为可全屏,播放器式样如下。


2、可以修改ckplayer.xml参数与风格,具体参考官方文档,本站ckplayer配置文件在下方下载。OVER,KindEditor与ckplayer整合完成。

下载文件名:ckplayer 6.8 网页视频播放器.zip 文件大小:149KB下载链接
文件关键词:KindEditor与ckplayer整合,添加ckplayer,网页视频播放器