本人才疏學淺,孤陋寡聞,如有不到之處,還請各位指點錯誤,難免遺漏,貼以此文以便拋磚引玉,希望對您我都有點點幫助,我想這也是寫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公式編輯器的嵌入