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

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整合完成。