您的位置:首页 >> 精品文萃 >> 电脑互联 >> 内容

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

作者:不详 时间:2022-6-11 1:19:56 点击:
字号

  核心提示: KindEditor 4.1.11版本增加了很多实用功能,如字体风格设置、表情图片和百度地图等,还默认自带了prettify代码高亮插件,对比与测试了NicEdit编辑器、百度编辑器UEditor后...

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都可以清除,配置与精简可以看官网教程。

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

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,网页视频播放器

来源:网络

特别声明:以上作品内容(包括在内的视频、图片或音频)为用户上传并发布,本平台仅提供信息存储空间服务。如遇版权问题,请立即联系删除。

Notice: The content above (including the videos, pictures and audios if any) is uploaded and posted by the user. This platform merely provides information storage space services. In case of copyright issues, please contact us at the first time and we will remove the related content immediately.

相关评论
我要评论
  • 大名: (*请输入您的大名,缺省将显示IP地址。)
  • 内容:
  • 愛德華網絡世界(www.ok5266.com) © 2004-2024 版权所有 All Rights Reserved.
  • E-mail: ok5266@gmail.com E-ICP: 05013632 (CN)
  • Powered by Edward Web World V4.0.6
  • 执行时间:140.625 ms