從FCKEDITOR到ckeditor(一)----升級,使用,配置

     本人才疏學淺,孤陋寡聞,如有不到之處,還請各位指點錯誤,難免遺漏,貼以此文以便拋磚引玉,希望對您我都有點點幫助,我想這也是寫BLog的原因,也算是和大家分享經驗吧。

    (附加聲明:我並不反對轉載,但每當我看到自己撰寫的博文被轉並且刪掉出處和作者就非常反感!懇請您保留本BLog出處--CDSN Blog,順便捎帶保留我的網絡名字或郵箱好嗎?)

     Fckeditor自從升到3.0版本以後更名爲ckeditor了,根據官網聲明發現 ckeditor重新定義了編輯器的類和屬性方法,並且提升了腳本性能和效率,功能更加完善和強大。但是,假設您的項目裏以前使用了Fckeditor低版本,想要平滑升級到ckeditor3.0以上,不想改變代碼那幾乎是不可能了,這一點不能不說是遺憾,作爲開源軟件,犧牲的就是您的精力,得到的是它免費的使用和文檔以及服務的缺憾!老天總是公平的,得到這個同時就要失去那個,無非是賣點不同罷了。廢話少說,我們還是看看如何把FCKEditor升級到ckeditor 吧?

 

   

首先,下載ckeditor的源包。這一點我想都會,解壓以後把ckeditor目錄部署到您的項目目錄中即可;

其次,刪除舊的FCKEDITOR目錄;

再次,修改頁面調用FCKeditor的代碼,轉換爲新的腳本調用方式。

 

ckeditor3.0目錄結構:

ckeditor/

adapters

images

lang

plugins

skins

themes

 

除了這些目錄外的其他帶_下劃線的目錄可以在部署時刪除,當然您要想查看它的源代碼的話,暫時保留那個_source目錄。告訴你個祕密,這個傢伙裏頭包含了所有的源代碼,要想擴展它,就必須閱讀它哦。

ckeditor根目錄下的ckeditor.js文件是提供給您頁面調用的文件,裏面的js腳本是經過壓縮優化的代碼,讀懂它簡直就是天方夜潭。

假設您的A.JSP頁面或者A.FTL頁面裏使用了Fckeditor,那麼首先把

<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>

放到開頭吧,然後把關於FCKEDITOR的舊代碼統統刪除掉,注意把原來那個text的名字記住,然後改成這樣就ok了:

<textarea id="my_Desc" name="ny_Desc" style="WIDTH: 100%;"><!--這個地方您可以放置預先加載的內容,無論是靜態的還是動態的標籤,由您了。--></textarea>
<script type="text/javascript">
replaceEditor("my_Desc");
</script>

 

注意,頁面裏必須放置一個textarea,以便ckeditor來替換它。

 

replaceEditor是我自定義的一個輔助方法,您可以這樣

var editor;
//將文本區域對象或者div替換爲 html編輯器並返回  
var replaceEditor=function ( objname )
{
    var obj = document.getElementById(objname);
    if  (obj) editor = CKEDITOR.replace(objname,
      {//這裏可以指定其他參數什麼的,比如 filebrowserBrowseUrl等等});
     return editor;
}

 

以後就可以直接調這個editor了,當然您或許有自己更好的辦法,我這裏只做個參考。

 

好了,刷新一下頁面,就可看到它的廬山真面目了

對了,我不想看到那個“源代碼”按鈕和“保存”按鈕,也不想讓用戶看到實體路徑,怎麼辦?

打開config.js:

加上以下代碼

config.toolbar=[['Save','NewPage','Preview','-','Templates'],
     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
     '/',
      ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
      ['Link','Unlink','Anchor'],
      ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',
      'PageBreak'],
     '/',
     ['Styles','Format','Font','FontSize'],
     ['TextColor','BGColor'],
     ['Maximize','ShowBlocks','-','About']];

  config.removePlugins = 'elementspath,save';

好了。

 

ckeditor的上傳功能已經被分離出去,您可以使用ckfinder來實現它,並且能擴展出更加靈活的功能。

那麼,我們使用java開發的朋友怎麼辦?我覺得可以自己寫一個上傳的對話框掛接上去,把最後的文件url傳給ckeditor實例即可,我會在接下來的文章當中提供一點點建議。

另外就是,我已經成功地把webeq(公式編輯器)結合到了ckeditor,並做了小小的修改,ckeditor的插件功能實在太強大了,希望我在以後的時間裏和大家一起分享我的經驗和技巧!

 

謝謝關注!

 

從FCKEDITOR到ckeditor(二)----自定義插件對話框

從FCKEDITOR到ckeditor(三)----WebEq公式編輯器的嵌入

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章