CKEditor + CKFinder + JWplayer plugin 完成在线编辑器

看见就非常 2013-01-03

展开全文

前天写了半个小时却手快点错键，关闭了浏览器，记录全没了，伤心至极 CKEditor + CKFinder + JWplayer plugin 完成在线编辑器

。如今重写，当作增强记忆吧。。。

首先在官网下载最新版的CKEditor和CKFinder放到网站下的同一个目录中，我把它们放在/inc里

1、配置CKEditor：

修改 /inc/ckeditor/config.js 文件内容：

CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here. For example:

config.language = 'zh-cn';

config.uiColor = '#AADC6E';

config.skin = 'kama';

config.width = '700';

config.height = '300';

config.enterMode = CKEDITOR.ENTER_BR;

config.extraPlugins='jwplayer';

config.toolbar = [

['Source', '-', 'Undo','Redo','Find','Replace','-','Bold','TextColor','BGColor', 'Italic', 'Underline', 'Strike','SelectAll','RemoveFormat'],

['Image', 'jwplayer', 'Flash','Table','Rule','Link', 'Unlink', 'Anchor'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','Subscript','Superscript','OrderedList','UnorderedList','Outdent','Indent','FitWindow','-'],

];

};

英文水平不是太差基本都能读懂吧，需要解释一下的：

config.extraPlugins='jwplayer'; //获取扩展插件jwplayer，jwplayer是作为一个文件夹名放在plugins文件夹里，它是视频播放器，下文会介绍到

config.toolbar 是菜单栏设置，它是一个二维数组，一维之间是外框分隔，二维里通过 '-' 在菜单中以 | 分隔。

其实自定义菜单，最好是找到预设的full，在其中删除不必要的功能。

2、配置CKFinder：

修改 /inc/ckfinder/config.php 文件内容：

（1）找到并修改 CheckAuthentication() 函数，它是权限验证函数，return true为允许上传，否则禁止

session_start();

function CheckAuthentication(){

if(isset($_SESSION['UseEidtor']))

return true;

else

return false;

}

（2）找到并修改 $baseUrl ，它指定上传文件的目录

（3）修改上传文件名的定义方式
对于上传文件名，ckfinder会按照原有的名字命名，中文的情况下可能会乱码，所以建议使用日期重命名。打开/ckfinder/core/connector/php/php5/CommandHandler/FileUpload.php 找到 $sUnsafeFileName ，
修改为时间随机命名方式：

$sUnsafeFileName = CKFinder_Connector_Utils_FileSystem::convertToFilesystemEncoding(CKFinder_Connector_Utils_Misc::mbBasename($uploadedFile['name']));

$sExtension = CKFinder_Connector_Utils_FileSystem::getExtension($sUnsafeFileName);

$sUnsafeFileName=date('YmdHis').'.'.$sExtension;

当然你还可以加上rand()函数加一个随机值，把重名可能减至更小。

3、嵌入网页：

require_once ROOTPATH . "inc/ckeditor/ckeditor.php";

require_once ROOTPATH . 'inc/ckfinder/ckfinder.php' ;

$CKEditor = new CKEditor();

$CKEditor->returnOutput = true;

$CKEditor->basePath = '/inc/ckeditor/';

CKFinder::SetupCKEditor($CKEditor, '/inc/ckfinder/') ;//注意这里是相对路径，相对于根目录，不能用绝对路径

$contentarea = $CKEditor->editor("content", $rs['contents']);//content是文件域的name，$rs['contents']是默认值
echo $contentarea;

4、加入“插入视频”功能（视频通过JWplayer播放）：

（1）下载jwplayer；
（2）在ckeditor/plugins文件夹里建立jwplayer文件夹，并把jwplayer的内容放在里边去；
（3）在ckeditor/plugins/jwplayer文件夹中建立plugin.js文件，内容参考：
CKEDITOR.plugins.add('jwplayer',{requires:['dialog'],init:function(editor){var pluginName='jwplayer';CKEDITOR.dialog.add(pluginName,this.path+'dialogs/jwplayer.js');editor.addCommand(pluginName,new CKEDITOR.dialogCommand(pluginName));editor.ui.addButton('jwplayer',{label:'视频',command:pluginName,icon:this.path+'jwplayer/jwPlayer.gif',});}});

dialogs/jwplayer.js //指定功能的定义文件，下文再做这个文件
label:'视频' //定义的是鼠标放在按钮上显示的功能名称
jwplayer/jwPlayer.gif //按钮的图片

（4）建立并设置详细功能配置文件：ckeditor/plugins/jwplayer/dialogs/jwplayer.js
以下贴上我的jwplayer.js的内容，需要咀嚼领悟：

CKEDITOR.dialog.add('jwplayer',　function(editor){

　　　　var　escape　=　function(value){

　　　　　　　　return　value;

　　　　};

　　　　return　{

　　　　　　　　title:　'插入视频',

　　　　　　　　resizable:　CKEDITOR.DIALOG_RESIZE_BOTH,

　　　　　　　　minWidth: 350,

minHeight: 150,

　　　　　　　　contents:　[{

　　　　　　　　　　id: 'info',

label: '常规',

accessKey: 'P',

elements:[

{

type: 'hbox',

widths : [ '80%', '20%' ],

children:[{

id: 'src',

type: 'text',

label: '源文件'

},{

type: 'button',

id: 'browse',

filebrowser: 'info:src',

hidden: true,

align: 'center',

label: '浏览服务器'

}]

{

type: 'hbox',

widths : [ '35%', '35%', '30%' ],

children:[{

type:　'text',

　　　　　　　　　　　　　　label:　'视频宽度',

　　　　　　　　　　　　　　id:　'mywidth',

　　　　　　　　　　　　　　'default':　'470px',

　　　　　　　　　　　　　　style:　'width:50px'

},{

type:　'text',

　　　　　　　　　　　　　　label:　'视频高度',

　　　　　　　　　　　　　　id:　'myheight',

　　　　　　　　　　　　　　'default':　'320px',

　　　　　　　　　　　　　　style:　'width:50px'

},{

type:　'select',

　　　　　　　　　　　　　　label:　'自动播放',

　　　　　　　　　　　　　　id:　'myloop',

　　　　　　　　　　　　　　required:　true,

　　　　　　　　　　　　　　'default':　'false',

　　　　　　　　　　　　　　items:　[['是',　'true'],　['否',　'false']]

}]//children finish

//},{

　　　　　　　　　　 //type:　'textarea',

　　　　　　　　　　　　　　//style:　'width:300px;height:220px',

　　　　　　　　　　　　　　//label:　'预览',

　　　　　　　　　　　　　　//id:　'code'

　　　　　　　　　　 //}

}]

}, {

id: 'Upload',

hidden: true,

filebrowser: 'uploadButton',

label: '上传',

elements: [{

type: 'file',

id: 'upload',

label: '上传',

size: 38

{

type: 'fileButton',

id: 'uploadButton',

label: '发送到服务器',

filebrowser: 'info:src',

'for': ['Upload', 'upload']//'page_id', 'element_id'

}]

　　　　　　　　}],

　　　　　　　　onOk:　function(){

　　　　　　　　　　　　mywidth　=　this.getValueOf('info',　'mywidth');

　　　　　　　　　　　　myheight　=　this.getValueOf('info',　'myheight');

　　　　　　　　　　　　myloop　=　this.getValueOf('info',　'myloop');

　　　　　　　　　　　　mysrc　=　this.getValueOf('info',　'src');

　　　　　　　　　　　　html　=　''　+　escape(mysrc)　+　'';

//editor.insertHtml("<pre　class="brush:"　+　lang　+　";">"　+　html　+　"</pre>");

editor.insertHtml('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="'+mywidth+'" height="'+myheight+'" id="myjwplayer" ><param name="src" value="/inc/ckeditor/plugins/jwplayer/jwplayer/player.swf" /><param name="flashvars" value="file='+html+'&" /><param name="autostart" value='+myloop+' /><param name="PlayCount" value="1" />' + "<embed height="　+　myheight　+　" width="　+　mywidth　+　" flashvars="file="　+　html　+　"&" allowfullscreen="true" allowscriptaccess="always" bgcolor="#ffffff" src="/inc/ckeditor/plugins/jwplayer/jwplayer/player.swf"></embed></object>");

　　　　　　　　onLoad:　function(){

　　　　　　　　}

　　　　};

});
注意：autostart是以参数的形式放在flashvars属性中传入播放器，外部的其他autostart均不起作用。

参考资料：
http://www./php-ckeditor-ckfinder-studynotes.html
http://www.360doc.com/content/10/0811/12/12569_45231367.shtml
http:///forums/viewtopic.php?t=21290
http://77321660./blog/696269