小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

分享

fckeditor配置詳解-易博園

 Long_way 2007-08-30
fckeditor配置詳解
作者:xp  出處:  收錄者:xp  收錄時(shí)間:2007-8-17 10:09:00  瀏覽 15 次

前言:
  FCKeidtor是個(gè)國外的多語言編輯器,你可以對其配置文件進(jìn)行簡單修改使之支持目前常用Web開發(fā)語言的應(yīng)用,下面我就講講FCKeditor的最新版本2.4.2在php的具體配置過程,有不足和出錯(cuò)的地方,歡迎指正。

精簡:
  正因?yàn)檫@個(gè)編輯器是支持多語言的,所以首先我們針對使用對其做相應(yīng)的冗余文件刪除。
  
  1、臨時(shí)文件及文件夾刪除:從根目錄下開始刪除一切以“_”開頭的文件及文件夾,因?yàn)樗麄優(yōu)榕R時(shí)文件和文件夾。刪除這類臨時(shí)文件及文件夾之后,我們還要刪除一些根目錄下的多余文件,根目錄下我們只保留fckconfig.js(配置文件)、fckeditor.js(js方式調(diào)用文件)、fckeditor.php(php方式調(diào)用文件,新版本通過該文件統(tǒng)一調(diào)用php4或者php5的調(diào)用文件,fckeditor_php4.php/fckeditor_php5.php你可以根據(jù)自己服務(wù)器使用的情況刪減,建議都保留)、fckeditor_php4.php(php4的調(diào)用文件)、fckeditor_php5.php(php5的調(diào)用文件)、fckstyles.xml(樣式)、fcktemplates.xml(模板)文件和editor文件夾。 
  
  2、editor\lang目錄:存放的是多語言配置文件,因?yàn)槲覀冎豢赡苡玫絜n和zh-cn(簡體中文)所以,根據(jù)我的選擇,我刪掉其他的語言配置文件。 

  3、editor\skins界面目錄:默認(rèn)帶有三個(gè)界面(default:默認(rèn)界面,加載速度相對較快;office2003:相對pp的界面,不過速度確實(shí)要慢些;silver:銀白色界面,加載速度也相對較快),可以自行決定是否刪除其中一兩個(gè)。 

  4、editor\filemanager\browser\default\connectors目錄:存放編輯器所支持的Web動態(tài)語言,我們以php為例所以保留php目錄,test.html文件可以幫助你查看某語言下的上傳設(shè)置等(具體上傳設(shè)置我將在后面的配置作較為詳細(xì)講解),可以自行決定是否刪除。 

  5、editor\filemanager\upload目錄:同理。 

  到此精簡完成,你會發(fā)現(xiàn)整個(gè)編輯器確實(shí)“瘦身”不少,呵呵 

基本配置:

  下面我開始對編輯器進(jìn)行簡單配置(并非每步都必須,可根據(jù)自己的需要參考修改):

  1、默認(rèn)語言
  打開fckconfig.js文件(注意此文件是utf-8編碼哦),找到FCKConfig.AutoDetectLanguage = true ;(第56行)此句作用為自動檢測語言,默認(rèn)為true,即表示編輯器會根據(jù)系統(tǒng)語言自動檢測加載相應(yīng)的語言,我們將其改為false,不讓其檢測,然后將FCKConfig.DefaultLanguage = 'en';(編輯器默認(rèn)語言,第57行)改為簡體中文"zh-cn"。 

  2、字體列表 
  依然打開fckconfig.js,因?yàn)榇司庉嬈鳛橥鈬司帉?,所以默認(rèn)不提供中文字體,我們?yōu)槠浼尤耄业紽CKConfig.FontNames(第142行)加入“宋體;楷體_GB2312;新宋體;黑體;隸書;幼圓;”其他字體可根據(jù)自己需要自行加入。

  3、文件上傳
  FCKeditor的文件管理程序在editor/filemanager/文件夾下,分為瀏覽(browser)和上傳(upload)兩種。“瀏覽”是指瀏覽服務(wù)器已存在文件并可以選擇,也可以上傳本地文件至服務(wù)器;上傳是指快速上傳,在窗口中點(diǎn)“上傳”選項(xiàng),選擇本地文件后上傳就行,但是不能查看服務(wù)器上已有上傳文件,相對而言不太方便,只是操作更為快捷。也就是說FCKeditor中有一個(gè)文件瀏覽,有兩個(gè)文件上傳,而這些設(shè)置是分散在多個(gè)文件中,配置相對復(fù)雜,下面我大致講一下:
  在FCKeditor中共有三個(gè)文件跟上傳功能有關(guān),一個(gè)是js文件,兩個(gè)是php文件,前者關(guān)閉后界面中不出現(xiàn)相關(guān)窗口或按鈕,后者關(guān)閉后相關(guān)功能不可用。
  js文件即是指的fckconfig.js文件,在以前舊版本的fckconfig.js中首先你必需開啟如下幾項(xiàng):

  瀏覽上傳功能: 
  

CODE:FCKConfig.LinkBrowser = true ; //文件 
FCKConfig.ImageBrowser = true ; //圖片 
FCKConfig.FlashBrowser = true ; //Flash 


  快速上傳功能: 
  

CODE:FCKConfig.LinkUpload = true ; //同上 
FCKConfig.ImageUpload = true ; //同上 
FCKConfig.FlashUpload = true ; //同上 


  即把這幾項(xiàng)設(shè)為true,而我們今天使用的2.4.2的fckconfig.js中默認(rèn)已經(jīng)是開啟上傳開關(guān)顯示功能的,所以,如果你要將該編輯器作為前臺使用(fckeditor上傳漏洞問題一直沒有得到較好的改善),考慮到安全性你可能需要關(guān)閉文件上傳功能,那么你只需要將這幾項(xiàng)設(shè)置為false即可(當(dāng)然兩個(gè)php文件你也不要開啟上傳功能哦)。

  如果你要使用文件上傳功能,那么我們繼續(xù)配置:
  依然在fckconfig.js文件中,fckeditor對語言默認(rèn)支持的是asp,找到以下兩句,進(jìn)行相應(yīng)修改: 
  

CODE:var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py(第182行)
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php(第183行) 


  我們將其均改為'php':
  

CODE:var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py(第182行)
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php 


  在2.4.2版本中,我們發(fā)現(xiàn)增加了對更多文件后綴名的支持,這個(gè)應(yīng)該是為了解決上傳漏洞所作的些許改動,不過作用不大,呵呵
  *.AllowedExtensions:(其中*號代表:FCKConfig.LinkUpload、FCKConfig.ImageUpload等)表示允許上傳的文件后綴名,為空表示允許所有文件,你可根據(jù)自己需要設(shè)置上傳文件后綴名,一定程度增加安全性,設(shè)置的格式可以參考它已有的后綴名設(shè)置。
  *.DeniedExtensions:同上,表示禁止上傳的文件后綴名。

  注:你設(shè)置了允許上傳的,當(dāng)然禁止的也就不必要設(shè)置了,本人推薦設(shè)置允許的,畢竟禁止的后綴名列表不能羅列完全,可能還有很多我們不曾想到的后綴名。

  對js文件的配置到此已經(jīng)完成,下面我們進(jìn)行兩個(gè)php文件在上傳方面的設(shè)置: 

  文件瀏覽上傳修改: 
  打開editor\filemanager\browser\default\connectors\php\config.php文件,找到:
  $Config['Enabled'] = false ;(第28行)將false改為true,即允許上傳。
  $Config['UserFilesPath'] = '/userfiles/' ;(第32行)為定義上傳目錄,可根據(jù)自己情況進(jìn)行修改,我將其改為upload目錄。 

  注:注意FCKeditor是不支持虛擬目錄的,你的所有路徑都是針對網(wǎng)站根目錄的絕對路徑。 

  文件快速上傳修改: 
  打開文件editor\filemanager\upload\php\config.php文件,找到
  $Config['Enabled'] = false ;(第28行)將false改為true。 
  $Config['UserFilesPath'] = '/UserFiles/' ;(第35行)同“文件瀏覽上傳”的上傳目錄。 
  $Config['UseFileType'] = false ; (第32行)改為true,不然上傳文件不會放在上傳目錄中 
  在該文件中,還有一項(xiàng):
  $Config['UserFilesAbsolutePath'] = '' ;(第41行)
  這項(xiàng)的作用是設(shè)定上傳的絕對路徑,比如,你想指定上傳文件到D:/Web/upload/下,你可以指定它的值為你的絕對路徑,注意,如果你指定了該值,那你也要對$Config['UserFilesPath'] = '/UserFiles/' ;作相同的設(shè)置。

  到此上傳基本配置已經(jīng)完成,整個(gè)編輯器最基本的配置也已經(jīng)結(jié)束了,你可以通過下列代碼對其進(jìn)行調(diào)用測試了:
  [php]<?php
  include("/fckeditor/fckeditor.php"); // 包含fckeditor類,fckeditor目錄放在網(wǎng)站根目錄下 
  $BasePath = "/fckeditor/"; // 編輯器路徑 
  $oFCKeditor = new FCKeditor('jayliao'); // 創(chuàng)建一個(gè)fckeditor對象,表單的名稱為jayliao
  $oFCKeditor->BasePath = $BasePath;
  $oFCKeditor->Value = 'test'; // 設(shè)置表單初始值 
  
  // 還可設(shè)置以下部分(“=”包含部分),并非必須:
  //==================================================================================//
  $oFCKeditor->Width = '100%'; // 編輯器寬度,類中有默認(rèn)值,如果不想修改可不管此項(xiàng)
  $oFCKeditor->Height= '300'; // 同width,此處為高$oFCKeditor->ToolbarSet 
  $oFCKeditor->ToolbarSet = 'JayLiao'; // 默認(rèn)編輯器工具欄有Basic(基本工具)和Default(所有工具)兩種選擇,JayLiao為本人自定義的工具條,如有需要可參考后文中的說明新建或修改工具條 
  $oFCKeditor->Config['SkinPath'] = '/fckeditor/editor/skins/office2003/'; // 設(shè)置編輯器皮膚
  //==================================================================================//
  
  $oFCKeditor->Create(); // 調(diào)用類中方法,必須
  ?>[/php]

  趕緊測試一下吧,是不是很激動,終于可以看到這個(gè)強(qiáng)大的編輯器了,呵呵。不過,馬上你會發(fā)現(xiàn)在上傳以中文命名的文件時(shí)會出現(xiàn)亂碼,這到底是怎么回事呢?呵呵,不怕,下面我們就對其進(jìn)行簡單修改問題很快就解決的:
  我們?yōu)樯蟼魑募詴r(shí)間+隨機(jī)數(shù)作為其新名字,打開:editor\filemanager\upload\php\upload.php,找到:
  [php]$sFileName = $oFile['name'] ;[/php]
  替換為:
  [php]  $sFileName = $oFile['name'] ;
  $sOriginalFileName = $sFileName ;
  $sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;
  $sExtension = strtolower( $sExtension ) ;
  $sFileName = date("YmdHis").rand(100, 200).".".$sExtension;[/php]
  哈哈,你會發(fā)現(xiàn)“快速上傳”的亂碼已經(jīng)解決,就這么簡單,高興之余不要忘了,同樣,還需要修改“瀏覽”的上傳,修改文件:editor\filemanager\browser\default\connectors\php\commands.php,修改內(nèi)容同上。

  另:你上傳的中文文件不做以上命名修改可能在服務(wù)器上并非亂碼,如果你只是為了在瀏覽的時(shí)候讓編輯器正確顯示該類文件名,那你可以作如下修改,打開:editor\filemanager\browser\default\connectors\php\util.php,修改ConvertToXmlAttribute函數(shù),將:
  

CODE:return utf8_encode( htmlspecialchars( $value ) ) ; 


  修改為:
  

CODE:return iconv( "GBK", "UTF-8", htmlspecialchars($value) ) ; 


  這樣,你的編輯器應(yīng)該已經(jīng)能正確顯示中文名,不過強(qiáng)烈建議你修改上傳文件的命名,中文名可能存在諸多不便。

  當(dāng)完成以上設(shè)置后,fckeditor已經(jīng)能滿足我們的日常使用需要,不過我們卻又發(fā)現(xiàn)一個(gè)問題,那就是上傳后的文件我們卻無法刪除,這樣會使網(wǎng)站上的垃圾文件(主要是圖片)日益增多,那我們是否能夠通過對編輯器的修改能較為方便的管理刪除無用上傳文件呢?我們不難想到fckeditor的瀏覽文件功能,對該功能進(jìn)行適當(dāng)?shù)臄U(kuò)展,對日常所上傳的文件進(jìn)行管理就變得相當(dāng)簡單易行了,那我們趕緊動手吧:
  增加該功能我們修改的頁面為:fckeditor\editor\filemanager\browser\default\frmresourceslist.html

  第一步,在頁面的body區(qū)域增加如下代碼:
  

CODE:  <div id="showFile" style="float:left; display:none; background-color:#999999"></div>
  <iframe id="iframe_del" name="iframe_del" width="0" height="0" scrolling="no"></iframe>
  <div id="body_content"></div> 


  說明:第一對
的作用是當(dāng)我們把鼠標(biāo)移動到所上傳的文件上時(shí)顯示其相關(guān)信息;<iframe></iframe>標(biāo)簽的作用是供我們刪除上傳文件時(shí)做動作響應(yīng)窗口的,即是將我們的刪除動作在iframe中運(yùn)行,目的是實(shí)現(xiàn)偽無刷新刪除效果;最后一對
的作用是顯示上傳文件及文件夾的列表(2.4較以前版本對標(biāo)簽中內(nèi)容作了調(diào)整,老版該頁面以作為存放列表的容器,而新版直接將顯示容器在js中生成,為了使文件顯示div和iframe兩組標(biāo)簽正常使用,故在body標(biāo)簽中加入一對
標(biāo)簽,使之能正常使用,在我的嘗試中,倘若不這樣修改似乎有錯(cuò),當(dāng)然不排除我方法不當(dāng)?shù)脑?,呵呵?br>  
  第二步,在文件的js代碼區(qū)中加入:
  

CODE:  // add by jayliaoscu @ 2007-04-23 /*{{{{*/
  // 顯示文件顯示層
  function showDiv( fileUrl )
  {
    var name = fileUrl;
    //獲取文件類型
    var suffix = name.substring(name.lastIndexOf(".")+1);

    var div= document.getElementById("showFile");
    div.content = "";
    div.style.position = "absolute";
    div.content += "<table width='256' border='0' cellpadding='3' cellspacing='1' bgcolor='#737357'><tbody><tr><td height='23' align='left' bgcolor='#C7C78F'><table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0'><tbody><tr><td width='47%'> <a href='javascript:' onClick='hiddenDiv();'><font color='#000000' style='text-decoration:none;'>關(guān)閉</font></a></td><td width='53%' align='right'><a href='javascript:' onclick='delFile(\"" + fileUrl + "\");'><font color='#000000' style='text-decoration:none;'>刪除</font></a> </td></tr></tbody></table></td></tr>";
    if (suffix=='gif' || suffix=="jpg" || suffix=="jpeg" || suffix=="bmp" || suffix=="png")
    {
       div.content += "<tr><td align='center' bgcolor='#C7C78F'><img src='" + fileUrl + "' onload='if(this.width>250) this.width=250' style='margin:3px;'></td></tr>";
    }
    else
    {
       div.content += "<tr><td height='35' align='center' bgcolor='#C7C78F'><strong>該類型不能預(yù)覽</strong></td></tr>";
    }
    div.content += "</tbody></table>";
    div.innerHTML = div.content;
    div.style.display = "";
    div.style.top = event.y+document.body.scrollTop+10;
    div.style.left = event.x+document.body.scrollLeft+30;
  }
  // 隱藏文件顯示層
  function hiddenDiv()
  {
    var div= document.getElementById("showFile");
    div.style.display ="none";
  }
  // 在iframe中刪除文件
  function delFile( fileUrl )
  {
    if(!confirm('你確定刪除該文件?'))
    return;
    var url = '/fckeditor/del_file.php?filePath='+ fileUrl;
    window.open(url, "iframe_del");
    Refresh();
  }
  ///*}}}*/ 


  第三步,修改本頁面原有js
  修改:
  

CODE:  oListManager.Clear = function()
  {
    document.body.innerHTML = '' ;
  } 


  為:
  

CODE:  oListManager.Clear = function()
  {
    hiddenDiv();
    document.getElementById("body_content").innerHTML = '' ; // body_content為我們在body區(qū)域增加的div標(biāo)簽
  } 


  
  找到:
  

CODE:var sLink = '<a href="#" onclick="OpenFile(\'' + fileUrl.replace( /'/g, '\\\'') + '\');return false;">' ; 


  修改為:
  

CODE:var sLink = '<a href="#" onmouseover="showDiv(\'' + fileUrl + '\');" onclick="OpenFile(\'' + fileUrl.replace( /'/g, '\\\'') + '\');return false;">' ; // 即是文件信息顯示功能 


  修改:
  

CODE:  function Refresh()
  {
    LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
  } 


  為:
  

CODE:  function Refresh()
  {
    hiddenDiv(); // 所作修改,為了刷新列表時(shí)默認(rèn)隱藏文件顯示層
    LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
  } 


  修改函數(shù):GetFoldersAndFilesCallBack,找到:
  

CODE:document.body.innerHTML = oHtml.ToString() ; 


  修改為:
  

CODE:document.getElementById("body_content").innerHTML = oHtml.ToString() ; 


  最后,增加一個(gè)文件刪除頁面del_file.php(該文件路徑和增加的js函數(shù)delFile(fileUrl)中的調(diào)用一致),作用為刪除文件,給出成功與否的操作提示,參考代碼:
  [php]  <?php
  $filePath = "..".trim($_GET['filePath']);

  if ( $filePath )
  {
    @unlink($filePath);
    echo "<script>alert('刪除成功。');</script>";
  }
  else
  {
    echo "<script>alert('刪除錯(cuò)誤,可能文件不存在或者已經(jīng)刪除。');</script>";
  }
  ?>[/php]

  至此,我對于fckeditor的修改基本完成,當(dāng)然這些修改只是對fckeditor修改使用的拋磚引玉,給大家一個(gè)參考,希望對初學(xué)者有所幫助。后面對編輯器的修改過程比較匆忙,并未修改一步完成一步文檔書寫,所以,難免有所出錯(cuò),望見諒,如果你有什么問題和錯(cuò)誤發(fā)現(xiàn)歡迎聯(lián)系我互相討論,共同進(jìn)步,呵呵。

                                                 By jayliaoscu @ 2007-5-5
                                                 QQ: 41806572
                                                 Email: jayliaoscu@gmail.com

另附:
配置文件(fckconfig.js)中主要配置項(xiàng)目如下,根據(jù)自己看情況配置:

CODE: FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 編輯區(qū)的樣式表文件
FCKConfig.BaseHref = ''; // 相對鏈接的基地址
FCKConfig.Debug = true/false; // 是否開啟調(diào)試功能,當(dāng)調(diào)用FCKDebug.Output()時(shí),會在調(diào)試窗中輸出內(nèi)容
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 設(shè)置皮膚
FCKConfig.AutoDetectLanguage = true/false ; // 是否自動檢測語言
FCKConfig.DefaultLanguage = 'zh-cn' ; // 設(shè)置默認(rèn)語言
FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默認(rèn)文字方向,ltr左,rtr右
FCKConfig.FillEmptyBlocks = true/false ; // 使用這個(gè)功能,可以將空的塊級元素用空格來替代
FCKConfig.FormatSource = true/false; // 切換到代碼視圖時(shí),是否自動格式化代碼
FCKConfig.FormatOutput = true/false; // 當(dāng)輸出內(nèi)容時(shí)是否自動格式化代碼
FCKConfig.FormatIndentator = ""; // 當(dāng)在“源碼格式”下縮進(jìn)代碼使用的字符
FCKConfig.GeckoUseSPAN = true/false; // 是否允許SPAN標(biāo)記代替B,I,U標(biāo)記
FCKConfig.StartupFocus = true/false; // 開啟時(shí)是否FOCUS到編輯器
FCKConfig.ForcePasteAsPlainText = true/false;// 強(qiáng)制粘貼為純文本
FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符號轉(zhuǎn)換為XML實(shí)體
FCKConfig.TabSpaces = 0/1; // TAB是否有效
FCKConfig.TabSpaces = 4; // TAB鍵產(chǎn)生的空格字符數(shù)
FCKConfig.ShowBorders = true/false; // 是否合并邊框
FCKConfig.ToolbarStartExpanded = true/false; // 頁面載入時(shí),工具欄是否展開,點(diǎn)“展開工具欄”時(shí)才出現(xiàn)
FCKConfig.ToolBarCanCollapse = true/false; // 是否允許展開折疊工具欄
FCKConfig.ToolbarSets = object ; // 編輯器的工具欄,可以自行定義,刪減,可參考已存在工具欄
FCKConfig.EnterMode = 'p'; // 編輯器中直接回車,在代碼中生成,可選為p | div | br
FCKConfig.ShiftEnterMode = 'br'; // 編輯器中Shift+回車,在代碼中生成,可選為p | div | br
FCKConfig.ContextMenu = 字符串?dāng)?shù)組; // 右鍵菜單的內(nèi)容
FCKConfig.FontColors = ""; // 文字顏色列表
FCKConfig.FontNames = ""; // 字體列表
FCKConfig.FontSizes = ""; // 字號列表
FCKConfig.FontFormats = ""; // 文字格式列表
FCKConfig.StylesXmlPath = ""; // CSS樣式列表的XML文件的位置
FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼寫檢查器
FCKConfig.IeSpellDownloadUrl = ""; // 下載拼寫檢查器的網(wǎng)址
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路徑
FCKConfig.SmileyImages = ''; // 表情文件名稱列表,具體參考默認(rèn)設(shè)置
FCKConfig.SmileyColumns = 8; // 表情窗口顯示表情列數(shù)
FCKConfig.SmileyWindowWidth = 320; // 表情窗口顯示寬度,此窗口會因?yàn)楸砬槲募母淖兌髡{(diào)整
FCKConfig.SmileyWindowHeight = 240; // 表情窗口顯示高度,此窗口會因?yàn)楸砬槲募母淖兌髡{(diào)整
FCKConfig.FullPage = true/false; // 是否允許編輯整個(gè)HTML文件,還是僅允許編輯BODY間的內(nèi)容 

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

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多