關(guān)于CKeditor的非主流個性應(yīng)用的設(shè)置
更新時間：2009年12月27日 22:13:16 作者：
因為我的網(wǎng)站需要一個編輯器，所以用周末時間研究了一下CKeditor，終于最終修改成了合適的樣子。
CKeditor，以前叫FCKeditor，已經(jīng)使用過好多年了，功能自然沒的說。最近升級到3.0版，好像重寫了代碼，所以構(gòu)建的方式也有了些變化，應(yīng)該說是更簡單了。
相關(guān)地址：
官方網(wǎng)站：http://ckeditor.com/
下載地址：http://ckeditor.com/download
CKfinder：http://ckfinder.com/ 用于上傳的插件（有四種語言版本，根據(jù)需要下載）
部署：
將CKeditor下載下來，解壓網(wǎng)站/ckeditor/下面（當(dāng)然名字可以修改，只是需要修改相應(yīng)config文件來設(shè)置新路徑）
調(diào)用：
在頁面的head中調(diào)用
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
然后在需要編輯器的地方放置一下代碼：
<textarea cols="80" id="Text" name="Text" rows="10">這里是默認(rèn)值，修改文本的內(nèi)容是放在這里。html需要進(jìn)行HTMLEncode編碼</textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace('Text');
</script>
搞定，就這么簡單，CKEDITOR.replace('Text')就是創(chuàng)建編輯器的代碼，CKEDITOR.replace()方法中還可以設(shè)置編輯器的樣式，設(shè)置如下
var editor = CKEDITOR.replace( 'Text',
{
language:'zh-cn',//簡體中文
toolbar ://工具欄設(shè)置
[
['Source'],
'/',
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['TextColor','BGColor'],
]
});
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置語言
//config.uiColor = '#FFF'; //背景顏色
config.width = 500; //寬度
config.height = 400; //高度
config.skin='v2'; //設(shè)置編輯器的風(fēng)格，不太喜歡現(xiàn)在的樣子，還是喜歡v2版本的樣子，干凈、清爽。
//工具欄
config.toolbar =
[
['Source'],
'/',
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['TextColor','BGColor'],
]
};
數(shù)據(jù)提交
到這里我們已經(jīng)基本上設(shè)置好了。如果調(diào)用的話后臺可以使用request["text"]來獲取編輯器的文本。
在fckeditor(Ver 2.0)中時，它提供了一個web控件，可以直接使用，但是在3.x中好像沒有提供，好在我用的Asp.net Mvc所以有沒有的對我來說沒有任何問題。
提到上面的一句是因為，默認(rèn)的asp.net是禁止上傳帶有html標(biāo)簽的文本的，當(dāng)然可以通過修改頁面的配置來實現(xiàn)，但是在fckeditor(Ver 2.0)中他在提交數(shù)據(jù)前對內(nèi)容進(jìn)行了HTMLEncode（將&<>分別替換成了&<>），確實是一個非常棒的方法，這樣就不需要對asp.net的默認(rèn)設(shè)置進(jìn)行修改。
但是在CKeditor中默認(rèn)提交就是將原始的數(shù)據(jù)直接post了，后來通過以前老版本的代碼發(fā)現(xiàn)其實CKeditor提供了一個方法可以進(jìn)行HTMLEncode，它就是CKEDITOR.tools.htmlEncode(string)，如果直接使用form表填submit就沒有辦法實現(xiàn)了，所以只能采用JavaScript進(jìn)行提交。我的選擇是使用jQuery的ajax方式提交。代碼如下：
$(function(){
$("#btSubmit").click(function(){//$("#btSubmit")獲取的是提交按鈕，這里綁定提交按鈕的click事件
var oEditor = CKEDITOR.instances.Text;//獲得編輯器對象
var text = oEditor.getData();//獲取編輯器的數(shù)據(jù)
text = CKEDITOR.tools.htmlEncode(text);//進(jìn)行HTMLEncode編碼
$.post("PostUrl",{Text:text},callback);//提交數(shù)據(jù)，具體的調(diào)用方式和返回類型請查閱jQuery的幫助
function callback(data){}//回調(diào)函數(shù)
});
})
提交到服務(wù)器在進(jìn)行反向的編碼就可以了。
安全性
通過上面的提交雖然很好，但是繞過了系統(tǒng)默認(rèn)的安全防御，很容易被提交惡意代碼，所以在服務(wù)器端還需要進(jìn)行安全的驗證。
雖然CKeditor提供了驗證的設(shè)置方法，但是我沒有試驗成功(Ver2時代就沒成功)，不曉得他是怎么運作的，有時間好好研究下，代碼如下：
//在/ckeditor/config.js文件的CKEDITOR.editorConfig中添加一下代碼
config.protectedSource.push( /<\s*iframe[\s\S]*?>/gi ) ; // <iframe> tags.
config.protectedSource.push( /<\s*frameset[\s\S]*?>/gi ) ; // <frameset> tags.
config.protectedSource.push( /<\s*frame[\s\S]*?>/gi ) ; // <frame> tags.
config.protectedSource.push( /<\s*script[\s\S]*?\/script\s*>/gi ) ; // <SCRIPT> tags.
config.protectedSource.push( /<%[\s\S]*?%>/g ) ; // ASP style server side code
config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ;
服務(wù)器端的驗證項目跟上面提到的一樣，都是根據(jù)標(biāo)簽名稱來判斷是否允許提交。
文件上傳
在新版本中文件上傳方式有了很大的改變。它采用CKfinder這個插件來實現(xiàn)，首先還是需要下載一個CKfinder解壓到網(wǎng)站/CKfinder/下面
路徑也可以修改，修改后需要調(diào)用代碼、/CKfinder/config.ascx文件、/CKfinder/ckfinder.js文件
/CKfinder/config.ascx文件需要修改BaseUrl = "/新文件夾名/userfiles/";
/CKfinder/ckfinder.js文件需要修改CKFinder.DEFAULT_BASEPATH = '/新文件夾名/';
調(diào)用方式：
<textarea cols="80" id="Text" name="Text" rows="10"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'Text');
CKFinder.SetupCKEditor(editor, '/新文件夾名（或默認(rèn)）/');
</script>
現(xiàn)在在打開編輯器的圖片、鏈接、flash，窗口就多了一個上傳選項卡，可以選擇上傳，還提供了瀏覽功能。
因為涉及到文件夾的訪問權(quán)限，功能與我的網(wǎng)站需求不符，所以我沒有使用它提供的默認(rèn)上傳，對他進(jìn)行了修改。
上傳方式的修改
我的圖片服務(wù)器是image.tiyu.cc而網(wǎng)站的服務(wù)器是http://chabaoo.cn/，也不需要它提供的瀏覽功能，而且除了圖片上傳，不允許上傳其他的文件。
這樣就需要有三個地方需要修改，1.修改默認(rèn)上傳2.取消瀏覽功能3.取消文件、flash上傳功能。
CKeditor的上傳路徑設(shè)置在/CKfinder/ckfinder.js中，有一項設(shè)置是CKFinder.SetupCKEditor，它的下面有以下代碼，可以設(shè)置是否需要圖片、文件、flash的瀏覽路徑以及上傳路徑。
//設(shè)置文件的瀏覽路徑
editorObj.config.filebrowserBrowseUrl = url ;
//設(shè)置圖片的瀏覽路徑
editorObj.config.filebrowserImageBrowseUrl = url + qs + 'type=' + ( imageType || 'Images' ) ;
//設(shè)置flash文件瀏覽路徑
editorObj.config.filebrowserFlashBrowseUrl = url + qs + 'type=' + ( flashType || 'Flash' ) ;
//設(shè)置文件上傳文件地址
editorObj.config.filebrowserUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=Files" ;
//設(shè)置圖片文件上傳地址
editorObj.config.filebrowserImageUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( imageType || 'Images' ) ;
//設(shè)置flash文件上傳地址
editorObj.config.filebrowserFlashUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( flashType || 'Flash' ) ;
根據(jù)CKeditor是根據(jù)上傳路徑的有無來控制是否顯示相應(yīng)的上傳標(biāo)簽，瀏覽按鈕也是。
根據(jù)上面的需求，設(shè)置如下：
//設(shè)置文件的瀏覽路徑
editorObj.config.filebrowserBrowseUrl = "";
//設(shè)置圖片的瀏覽路徑
editorObj.config.filebrowserImageBrowseUrl = "";
//設(shè)置flash文件瀏覽路徑
editorObj.config.filebrowserFlashBrowseUrl = "";
//設(shè)置文件上傳文件地址
editorObj.config.filebrowserUploadUrl = "";
//設(shè)置圖片文件上傳地址
editorObj.config.filebrowserImageUploadUrl = "新地址";
//設(shè)置flash文件上傳地址
editorObj.config.filebrowserFlashUploadUrl = "";
設(shè)置到這里再次打開編輯器的相應(yīng)窗口就會發(fā)現(xiàn)除了圖片上傳按鈕外其他的瀏覽上傳都隱藏掉了。
創(chuàng)建新的上傳文件
具體步驟是，首先創(chuàng)建一個新的上傳接收文件，接受并保存上傳的文件，然后將文件的路徑反饋給編輯器。
編輯器的接收是通過一個方法實現(xiàn)的，具體如下：
CKEDITOR.tools.callFunction(fnID, 'FileUrl', 'Message');</script>
其中fnID是調(diào)用的實際方法的編號，不同的瀏覽器，CKeditor調(diào)用不同的方法。
我們只需要調(diào)用上面的方法就可以了，具體上傳成功后，在頁面上輸出一下代碼
<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(fnID, 'http://chabaoo.cn/image.jpg', '上傳成功');</script>
FileUrl、Message，可以只有一個，也可以同時存在。Message主要應(yīng)用于上傳失敗時的提示信息。
關(guān)于fnID,這個具體的說明不是很清楚，但是通過代碼發(fā)現(xiàn)FF瀏覽器它的值是2，其他的瀏覽器是1，通過這個可以得出結(jié)論是，通過它來告知CKeditor來調(diào)用哪個方法接受上傳反饋信息。
這個值，可以通過我們自己的程序去獲得。但是更好的方式是CKeditor給我們提供的值，當(dāng)我們設(shè)置editorObj.config.filebrowserImageUploadUrl = "新地址"時CKeditor會自動為我們增加幾個個url參數(shù)：
新地址?CKEditor=Text&CKEditorFuncNum=2&langCode=zh-cn
其中CKEditorFuncNum就是我們需要的fnID，我們可以直接獲取到，然后反饋回來就好了。
如果選擇跨域上傳，只需要在當(dāng)前域（http://chabaoo.cn/）設(shè)置一個GetFile.aspx他有三個參數(shù)，分別是接受fnID，F(xiàn)ileUrl、Message這三個值，在我們的editorObj.config.filebrowserImageUploadUrl中設(shè)置成http://Image.jb51.net/upfile.aspx?backUrl=http://chabaoo.cn/GetFile.aspx，就可以了，image.jb51.net域的upfile.aspx接受到文件，處理完成之后：
ImageUrl="http://image.jb51.net/UpFile/2009/11/1/2009111201346_695.jpg"
Message="根據(jù)錯誤與否，設(shè)置，沒有錯誤可以為空"
CKEditorFuncNum=request("CKEditorFuncNum")
response.Redirect("http://chabaoo.cn/GetFile.php?ImageUrl="+ ImageUrl + "&Message=" + Message + "&CKEditorFuncNum=" + CKEditorFuncNum)
搞定，收工，睡覺，做個好夢。
相關(guān)地址：
官方網(wǎng)站：http://ckeditor.com/
下載地址：http://ckeditor.com/download
CKfinder：http://ckfinder.com/ 用于上傳的插件（有四種語言版本，根據(jù)需要下載）
部署：
將CKeditor下載下來，解壓網(wǎng)站/ckeditor/下面（當(dāng)然名字可以修改，只是需要修改相應(yīng)config文件來設(shè)置新路徑）
調(diào)用：
在頁面的head中調(diào)用
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
然后在需要編輯器的地方放置一下代碼：
復(fù)制代碼 代碼如下:
<textarea cols="80" id="Text" name="Text" rows="10">這里是默認(rèn)值，修改文本的內(nèi)容是放在這里。html需要進(jìn)行HTMLEncode編碼</textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace('Text');
</script>
搞定，就這么簡單，CKEDITOR.replace('Text')就是創(chuàng)建編輯器的代碼，CKEDITOR.replace()方法中還可以設(shè)置編輯器的樣式，設(shè)置如下
復(fù)制代碼 代碼如下:
var editor = CKEDITOR.replace( 'Text',
{
language:'zh-cn',//簡體中文
toolbar ://工具欄設(shè)置
[
['Source'],
'/',
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['TextColor','BGColor'],
]
});
具體的設(shè)置有很多，具體的可以查看他的幫助：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
這個設(shè)置可以在/ckeditor/config.js中設(shè)置，在這里設(shè)置之后，就修改了編輯器的默認(rèn)默認(rèn)設(shè)置，而上面設(shè)置只應(yīng)用于當(dāng)前編輯器。
具體的設(shè)置方法如下
復(fù)制代碼 代碼如下:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置語言
//config.uiColor = '#FFF'; //背景顏色
config.width = 500; //寬度
config.height = 400; //高度
config.skin='v2'; //設(shè)置編輯器的風(fēng)格，不太喜歡現(xiàn)在的樣子，還是喜歡v2版本的樣子，干凈、清爽。
//工具欄
config.toolbar =
[
['Source'],
'/',
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['TextColor','BGColor'],
]
};
數(shù)據(jù)提交
到這里我們已經(jīng)基本上設(shè)置好了。如果調(diào)用的話后臺可以使用request["text"]來獲取編輯器的文本。
在fckeditor(Ver 2.0)中時，它提供了一個web控件，可以直接使用，但是在3.x中好像沒有提供，好在我用的Asp.net Mvc所以有沒有的對我來說沒有任何問題。
提到上面的一句是因為，默認(rèn)的asp.net是禁止上傳帶有html標(biāo)簽的文本的，當(dāng)然可以通過修改頁面的配置來實現(xiàn)，但是在fckeditor(Ver 2.0)中他在提交數(shù)據(jù)前對內(nèi)容進(jìn)行了HTMLEncode（將&<>分別替換成了&<>），確實是一個非常棒的方法，這樣就不需要對asp.net的默認(rèn)設(shè)置進(jìn)行修改。
但是在CKeditor中默認(rèn)提交就是將原始的數(shù)據(jù)直接post了，后來通過以前老版本的代碼發(fā)現(xiàn)其實CKeditor提供了一個方法可以進(jìn)行HTMLEncode，它就是CKEDITOR.tools.htmlEncode(string)，如果直接使用form表填submit就沒有辦法實現(xiàn)了，所以只能采用JavaScript進(jìn)行提交。我的選擇是使用jQuery的ajax方式提交。代碼如下：
復(fù)制代碼 代碼如下:
$(function(){
$("#btSubmit").click(function(){//$("#btSubmit")獲取的是提交按鈕，這里綁定提交按鈕的click事件
var oEditor = CKEDITOR.instances.Text;//獲得編輯器對象
var text = oEditor.getData();//獲取編輯器的數(shù)據(jù)
text = CKEDITOR.tools.htmlEncode(text);//進(jìn)行HTMLEncode編碼
$.post("PostUrl",{Text:text},callback);//提交數(shù)據(jù)，具體的調(diào)用方式和返回類型請查閱jQuery的幫助
function callback(data){}//回調(diào)函數(shù)
});
})
提交到服務(wù)器在進(jìn)行反向的編碼就可以了。
安全性
通過上面的提交雖然很好，但是繞過了系統(tǒng)默認(rèn)的安全防御，很容易被提交惡意代碼，所以在服務(wù)器端還需要進(jìn)行安全的驗證。
雖然CKeditor提供了驗證的設(shè)置方法，但是我沒有試驗成功(Ver2時代就沒成功)，不曉得他是怎么運作的，有時間好好研究下，代碼如下：
復(fù)制代碼 代碼如下:
//在/ckeditor/config.js文件的CKEDITOR.editorConfig中添加一下代碼
config.protectedSource.push( /<\s*iframe[\s\S]*?>/gi ) ; // <iframe> tags.
config.protectedSource.push( /<\s*frameset[\s\S]*?>/gi ) ; // <frameset> tags.
config.protectedSource.push( /<\s*frame[\s\S]*?>/gi ) ; // <frame> tags.
config.protectedSource.push( /<\s*script[\s\S]*?\/script\s*>/gi ) ; // <SCRIPT> tags.
config.protectedSource.push( /<%[\s\S]*?%>/g ) ; // ASP style server side code
config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ;
服務(wù)器端的驗證項目跟上面提到的一樣，都是根據(jù)標(biāo)簽名稱來判斷是否允許提交。
文件上傳
在新版本中文件上傳方式有了很大的改變。它采用CKfinder這個插件來實現(xiàn)，首先還是需要下載一個CKfinder解壓到網(wǎng)站/CKfinder/下面
路徑也可以修改，修改后需要調(diào)用代碼、/CKfinder/config.ascx文件、/CKfinder/ckfinder.js文件
/CKfinder/config.ascx文件需要修改BaseUrl = "/新文件夾名/userfiles/";
/CKfinder/ckfinder.js文件需要修改CKFinder.DEFAULT_BASEPATH = '/新文件夾名/';
調(diào)用方式：
復(fù)制代碼 代碼如下:
<textarea cols="80" id="Text" name="Text" rows="10"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'Text');
CKFinder.SetupCKEditor(editor, '/新文件夾名（或默認(rèn)）/');
</script>
現(xiàn)在在打開編輯器的圖片、鏈接、flash，窗口就多了一個上傳選項卡，可以選擇上傳，還提供了瀏覽功能。
因為涉及到文件夾的訪問權(quán)限，功能與我的網(wǎng)站需求不符，所以我沒有使用它提供的默認(rèn)上傳，對他進(jìn)行了修改。
上傳方式的修改
我的圖片服務(wù)器是image.tiyu.cc而網(wǎng)站的服務(wù)器是http://chabaoo.cn/，也不需要它提供的瀏覽功能，而且除了圖片上傳，不允許上傳其他的文件。
這樣就需要有三個地方需要修改，1.修改默認(rèn)上傳2.取消瀏覽功能3.取消文件、flash上傳功能。
CKeditor的上傳路徑設(shè)置在/CKfinder/ckfinder.js中，有一項設(shè)置是CKFinder.SetupCKEditor，它的下面有以下代碼，可以設(shè)置是否需要圖片、文件、flash的瀏覽路徑以及上傳路徑。
復(fù)制代碼 代碼如下:
//設(shè)置文件的瀏覽路徑
editorObj.config.filebrowserBrowseUrl = url ;
//設(shè)置圖片的瀏覽路徑
editorObj.config.filebrowserImageBrowseUrl = url + qs + 'type=' + ( imageType || 'Images' ) ;
//設(shè)置flash文件瀏覽路徑
editorObj.config.filebrowserFlashBrowseUrl = url + qs + 'type=' + ( flashType || 'Flash' ) ;
//設(shè)置文件上傳文件地址
editorObj.config.filebrowserUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=Files" ;
//設(shè)置圖片文件上傳地址
editorObj.config.filebrowserImageUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( imageType || 'Images' ) ;
//設(shè)置flash文件上傳地址
editorObj.config.filebrowserFlashUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( flashType || 'Flash' ) ;
根據(jù)CKeditor是根據(jù)上傳路徑的有無來控制是否顯示相應(yīng)的上傳標(biāo)簽，瀏覽按鈕也是。
根據(jù)上面的需求，設(shè)置如下：
復(fù)制代碼 代碼如下:
//設(shè)置文件的瀏覽路徑
editorObj.config.filebrowserBrowseUrl = "";
//設(shè)置圖片的瀏覽路徑
editorObj.config.filebrowserImageBrowseUrl = "";
//設(shè)置flash文件瀏覽路徑
editorObj.config.filebrowserFlashBrowseUrl = "";
//設(shè)置文件上傳文件地址
editorObj.config.filebrowserUploadUrl = "";
//設(shè)置圖片文件上傳地址
editorObj.config.filebrowserImageUploadUrl = "新地址";
//設(shè)置flash文件上傳地址
editorObj.config.filebrowserFlashUploadUrl = "";
設(shè)置到這里再次打開編輯器的相應(yīng)窗口就會發(fā)現(xiàn)除了圖片上傳按鈕外其他的瀏覽上傳都隱藏掉了。
創(chuàng)建新的上傳文件
具體步驟是，首先創(chuàng)建一個新的上傳接收文件，接受并保存上傳的文件，然后將文件的路徑反饋給編輯器。
編輯器的接收是通過一個方法實現(xiàn)的，具體如下：
CKEDITOR.tools.callFunction(fnID, 'FileUrl', 'Message');</script>
其中fnID是調(diào)用的實際方法的編號，不同的瀏覽器，CKeditor調(diào)用不同的方法。
我們只需要調(diào)用上面的方法就可以了，具體上傳成功后，在頁面上輸出一下代碼
<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(fnID, 'http://chabaoo.cn/image.jpg', '上傳成功');</script>
FileUrl、Message，可以只有一個，也可以同時存在。Message主要應(yīng)用于上傳失敗時的提示信息。
關(guān)于fnID,這個具體的說明不是很清楚，但是通過代碼發(fā)現(xiàn)FF瀏覽器它的值是2，其他的瀏覽器是1，通過這個可以得出結(jié)論是，通過它來告知CKeditor來調(diào)用哪個方法接受上傳反饋信息。
這個值，可以通過我們自己的程序去獲得。但是更好的方式是CKeditor給我們提供的值，當(dāng)我們設(shè)置editorObj.config.filebrowserImageUploadUrl = "新地址"時CKeditor會自動為我們增加幾個個url參數(shù)：
新地址?CKEditor=Text&CKEditorFuncNum=2&langCode=zh-cn
其中CKEditorFuncNum就是我們需要的fnID，我們可以直接獲取到，然后反饋回來就好了。
如果選擇跨域上傳，只需要在當(dāng)前域（http://chabaoo.cn/）設(shè)置一個GetFile.aspx他有三個參數(shù)，分別是接受fnID，F(xiàn)ileUrl、Message這三個值，在我們的editorObj.config.filebrowserImageUploadUrl中設(shè)置成http://Image.jb51.net/upfile.aspx?backUrl=http://chabaoo.cn/GetFile.aspx，就可以了，image.jb51.net域的upfile.aspx接受到文件，處理完成之后：
復(fù)制代碼 代碼如下:
ImageUrl="http://image.jb51.net/UpFile/2009/11/1/2009111201346_695.jpg"
Message="根據(jù)錯誤與否，設(shè)置，沒有錯誤可以為空"
CKEditorFuncNum=request("CKEditorFuncNum")
response.Redirect("http://chabaoo.cn/GetFile.php?ImageUrl="+ ImageUrl + "&Message=" + Message + "&CKEditorFuncNum=" + CKEditorFuncNum)
搞定，收工，睡覺，做個好夢。
您可能感興趣的文章:
- CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入圖片）
- 解決FCKEditor在IE10、IE11下的不兼容問題
- FCKeditor使用方法(FCKeditor_2.6.3)詳細(xì)使用說明
- asp.net+FCKeditor上傳圖片顯示叉叉圖片無法顯示的問題的解決方法
- 修改fckeditor的文件上傳功能步驟
- ckeditor的使用和配置方法分享
- ASP FCKeditor在線編輯器使用方法
- 整合ckeditor+ckfinder，解決上傳文件路徑問題
- FckEditor 配置手冊中文教程詳細(xì)說明
- asp.net CKEditor和CKFinder的應(yīng)用
- PHP CKEditor 上傳圖片實現(xiàn)代碼
- CKEditor網(wǎng)頁編輯器 中文使用說明
- FCKeditor2.3 For PHP 詳細(xì)整理的使用參考
- javascript獲取ckeditor編輯器的值(實現(xiàn)代碼)
- asp.net ckeditor編輯器的使用方法
- 通過Fckeditor把圖片上傳到獨立圖片服務(wù)器的方法
- asp中的ckEditor的詳細(xì)配置小結(jié)
- CKEditor4配置與開發(fā)詳細(xì)中文說明文檔
相關(guān)文章
到目前為止，我已經(jīng)開發(fā)了兩個HTML編輯器了，一個用在公司的CMS項目，另一個用在這個Blog（TidyEditor，暫時沒有單獨發(fā)布）。下面總結(jié)一下開發(fā)的難點以及應(yīng)對方法。2011-03-03
本文搜集了 22 個 Web 在線編輯器，它們基本代表了當(dāng)前 Web 編輯器的現(xiàn)狀。2010-06-06
整理資料的時候，發(fā)現(xiàn)電腦里保存了一些ASX文件。這些文件原來是玩MSN空間時用到的，主要用于在MSN空間上安裝播放器。很久沒玩MSN空間了，雖然現(xiàn)在也還在用MSN，但MSN空間的速度真的是慢得讓我難以接受，所以還是不用MSN空間。順便分析一下ASX文件的格式，以方便那些還在用MSN空間的朋友。2008-02-02
百度編輯器 如何獲取光標(biāo)位置與不同幀內(nèi)的節(jié)點
當(dāng)我們console.log(domUtils)的時候，可以在控制臺中，看見很多domUtils下的方法，這些方法都是用于操作節(jié)點的，findParentByTagName()顧名思義，獲取的是節(jié)點，當(dāng)我們的光標(biāo)在編輯器內(nèi)容處，而我們要獲取相應(yīng)內(nèi)容外層節(jié)點的id以及各種屬性，就需要通過domUtils來獲得不同幀內(nèi)的節(jié)點2012-07-07
又一個不錯的FCKeditor 2.2的安裝、修改和調(diào)用方法
又一個不錯的FCKeditor 2.2的安裝、修改和調(diào)用方法...2007-11-11
編輯器中designMode和contentEditable的屬性的介紹
先解釋一下在線編輯器的原理:首先需要IE5.0以上版本的支持.因為IE5.0以上版本有一個編輯狀態(tài),designMode是document的屬性,意思是設(shè)置或獲取表明文檔是否可被編輯的值,默認(rèn)值為off或Inherit2008-11-11
通過Fckeditor把圖片上傳到獨立圖片服務(wù)器的方法
大部分網(wǎng)站的后臺,都是把圖片上傳到本地服務(wù)器上,但圖片也消耗很多帶寬,門戶網(wǎng)站都有單獨的圖片服務(wù)器,怎么實現(xiàn)呢?2011-05-05
當(dāng)使用ckeditor控件時，需要校驗輸入內(nèi)容是否為空的一種解決辦法（轉(zhuǎn)帖）
這樣是我們寫程序中最經(jīng)常的寫法 提交之前進(jìn)行驗證內(nèi)容是否為空！2011-01-01
在 fck中添加行距 功能插件，需要的朋友可以參考下。2010-02-02
我用的是asp,FCKeditor沒有使用幫助,網(wǎng)上google以下資料很多,但不是很全,不適合剛?cè)腴T的菜鳥使用,通過我半天的使用經(jīng)歷,稍微做了些整理,便于大家學(xué)習(xí).2009-12-12