看见就非常 / 网页设计 / CKEditor + CKFinder + JWplayer plugin ...

分享

   

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

2013-01-03  看见就非常
CKEditor <wbr>+ <wbr>CKFinder <wbr>+ <wbr>JWplayer <wbr>plugin <wbr>完成在线编辑器前天写了半个小时却手快点错键,关闭了浏览器,记录全没了,伤心至极CKEditor <wbr>+ <wbr>CKFinder <wbr>+ <wbr>JWplayer <wbr>plugin <wbr>完成在线编辑器。如今重写,当作增强记忆吧。。。

首先在官网下载最新版的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.crackedzone.com/php-ckeditor-ckfinder-studynotes.html
http://www.360doc.com/content/10/0811/12/12569_45231367.shtml
http://cksource.com/forums/viewtopic.php?t=21290
http://77321660.iteye.com/blog/696269

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>