电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

CKEditor + CKFinder + JWplayer plugin 完成在線編輯器

 看見就非常 2013-01-03
CKEditor <wbr>+ <wbr>CKFinder <wbr>+ <wbr>JWplayer <wbr>plugin <wbr>完成在線編輯器前天寫了半個(gè)小時(shí)卻手快點(diǎn)錯(cuò)鍵，關(guān)閉了瀏覽器，記錄全沒了，傷心至極CKEditor <wbr>+ <wbr>CKFinder <wbr>+ <wbr>JWplayer <wbr>plugin <wbr>完成在線編輯器。如今重寫，當(dāng)作增強(qiáng)記憶吧。。。

首先在官網(wǎng)下載最新版的CKEditor和CKFinder放到網(wǎng)站下的同一個(gè)目錄中，我把它們放在/inc里
1、配置CKEditor：
修改 /inc/ckeditor/config.js 文件內(nèi)容：
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'; //獲取擴(kuò)展插件jwplayer，jwplayer是作為一個(gè)文件夾名放在plugins文件夾里，它是視頻播放器，下文會(huì)介紹到
config.toolbar 是菜單欄設(shè)置，它是一個(gè)二維數(shù)組，一維之間是外框分隔，二維里通過 '-' 在菜單中以 | 分隔。
其實(shí)自定義菜單，最好是找到預(yù)設(shè)的full，在其中刪除不必要的功能。

2、配置CKFinder：
修改 /inc/ckfinder/config.php 文件內(nèi)容：
（1）找到并修改 CheckAuthentication() 函數(shù)，它是權(quán)限驗(yàn)證函數(shù)，return true為允許上傳，否則禁止
session_start();
function CheckAuthentication(){
  if(isset($_SESSION['UseEidtor']))
    return true;
  else
    return false;
}

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

（3）修改上傳文件名的定義方式
對(duì)于上傳文件名，ckfinder會(huì)按照原有的名字命名，中文的情況下可能會(huì)亂碼，所以建議使用日期重命名。打開/ckfinder/core/connector/php/php5/CommandHandler/FileUpload.php 找到 $sUnsafeFileName ，
修改為時(shí)間隨機(jī)命名方式：
$sUnsafeFileName = CKFinder_Connector_Utils_FileSystem::convertToFilesystemEncoding(CKFinder_Connector_Utils_Misc::mbBasename($uploadedFile['name']));
$sExtension = CKFinder_Connector_Utils_FileSystem::getExtension($sUnsafeFileName);
$sUnsafeFileName=date('YmdHis').'.'.$sExtension;
當(dāng)然你還可以加上rand()函數(shù)加一個(gè)隨機(jī)值，把重名可能減至更小。

3、嵌入網(wǎng)頁：
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/') ;//注意這里是相對(duì)路徑，相對(duì)于根目錄，不能用絕對(duì)路徑
$contentarea = $CKEditor->editor("content", $rs['contents']);//content是文件域的name，$rs['contents']是默認(rèn)值
echo $contentarea;

4、加入“插入視頻”功能（視頻通過JWplayer播放）：
（1）下載jwplayer；
（2）在ckeditor/plugins文件夾里建立jwplayer文件夾，并把jwplayer的內(nèi)容放在里邊去；
（3）在ckeditor/plugins/jwplayer文件夾中建立plugin.js文件，內(nèi)容參考：
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  //指定功能的定義文件，下文再做這個(gè)文件
label:'視頻'         //定義的是鼠標(biāo)放在按鈕上顯示的功能名稱
jwplayer/jwPlayer.gif         //按鈕的圖片

（4）建立并設(shè)置詳細(xì)功能配置文件：ckeditor/plugins/jwplayer/dialogs/jwplayer.js
以下貼上我的jwplayer.js的內(nèi)容，需要咀嚼領(lǐng)悟：
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: '常規(guī)',   
                    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: '瀏覽服務(wù)器'  
                            }]   
                        },   
                        {   
                        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:　'自動(dòng)播放',   
　　　　　　　　　　　　　　id:　'myloop',   
　　　　　　　　　　　　　　required:　true,   
　　　　　　　　　　　　　　'default':　'false',   
　　　　　　　　　　　　　　items:　[['是',　'true'],　['否',　'false']]   
                        }]//children finish   
                        //},{   
　　　　　　　　　　        //type:　'textarea',   
　　　　　　　　　　　　　　//style:　'width:300px;height:220px',   
　　　　　　　　　　　　　　//label:　'預(yù)覽',   
　　　　　　　　　　　　　　//id:　'code'  
　　　　　　　　　　    //}
                      }]   
                    }, {   
                        id: 'Upload',   
                        hidden: true,   
                        filebrowser: 'uploadButton',   
                        label: '上傳',   
                        elements: [{   
                            type: 'file',   
                            id: 'upload',   
                            label: '上傳',   
                            size: 38   
                        },   
                        {   
                            type: 'fileButton',   
                            id: 'uploadButton',   
                            label: '發(fā)送到服務(wù)器',   
                            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是以參數(shù)的形式放在flashvars屬性中傳入播放器，外部的其他autostart均不起作用。


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

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多