將CKfinder 整合進 CKEditor3.0的方法
更新時間:2010年01月09日 23:57:35 作者:
CKFinder是一款基于AJAX的文件瀏覽器,這是ASP.NET專用版,它可以在線瀏覽文件、管理文件、上傳文件,以樹形Tree的方式展開目錄,自動檢測圖片并生成縮略圖,它是由Fckeditor公司出品,同時也可配合FckEditor來使用,可達到意想不到的效果。

由于本次CKEditor全新改版,沒有提供文件上傳功能,所以選擇整合CKFinder是個不錯的選擇
需要修改一下CKEditor插件文件夾下的JS源碼,以image插件為例(Flash及Files同理):
Code
復(fù)制代碼 代碼如下:
//將下邊的代碼做一些修改
//{type:'button',id:'browse',align:'center',label:m.lang.common.browseServer,hidden:false,filebrowser:'info:txtUrl'}]}]},
//2009-07-13 將瀏覽服務(wù)器按鈕置為顯示狀態(tài) (hidden: false),增加onClick函數(shù),用于打開ckfinder頁面
{ type: 'button', id: 'browse', align: 'center', label: m.lang.common.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() { var finder = new CKFinder(); finder.BasePath = '../ckfinder20090716/'; finder.SelectFunction = SetFileField; finder.Popup(); } }]}]},
在方法體外增加下邊的函數(shù)
//2009-07-13 楊鑫增加 用于取回 ckfinder 返回的圖片地址并對路徑文本框和預(yù)覽圖片進行賦值
function SetFileField(fileUrl)
{
//獲取主Div下的所有文本框控件
var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input");
for(var i=0; i<inputStr.length; i++)
{
if(inputStr[i].type=="text")
{
//第一個輸入框控件是圖像路徑,得到ID,設(shè)置新的圖片路徑
CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl);
break ;
}
}
CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));
}
相關(guān)文章
syntaxhighlighter 去掉右上角問號圖標(biāo)的三種方法
syntaxhighlighter可以高亮著色顯示幾乎所有語言形式的源代碼,還可以顯示行號,是一款深受網(wǎng)站建設(shè)人員喜愛的工具,并且它還是免費的2013-11-11
Ueditor和CKeditor 兩款編輯器的使用與配置方法
這篇文章主要介紹了Ueditor和CKeditor 兩款編輯器的使用與配置方法,需要的朋友可以參考下2017-03-03
CKeditor與syntaxhighlight打造joomla代碼高亮
最近在用csdn和cnblogs發(fā)帖子和寫隨筆的時候,發(fā)現(xiàn)了好多的IT的網(wǎng)站或者和代碼有關(guān)系的一些論壇,博客之類,他們都有一個非常好的語法高亮!很強大!2010-07-07
整合ckeditor+ckfinder,解決上傳文件路徑問題
現(xiàn)在fckeditor已經(jīng)改名為ckeditor,上傳控件也分離為ckfinder,按照說明文檔的默認配置會出現(xiàn)上傳路徑不正確的情況,因為我們的網(wǎng)站可以通過定義默認網(wǎng)站、虛擬目錄、以及放在網(wǎng)站的子目錄下進行訪問2011-11-11
使用ZeroClipboard解決跨瀏覽器復(fù)制到剪貼板的問題
Zero Clipboard 利用透明的Flash讓其漂浮在復(fù)制按鈕之上,這樣其實點擊的不是按鈕而是 Flash ,這樣將需要的內(nèi)容傳入Flash,再通過Flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到剪貼板2014-06-06

