asp.net mvc中ckeditor+ckfinder的配置方法
生活随笔
收集整理的這篇文章主要介紹了
asp.net mvc中ckeditor+ckfinder的配置方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
開源網頁編輯軟件FCKEditor在09年發布更新到3.0，并改名為CKEditor。改進后的ckeditor更加模塊話，配置更加靈活，和以前的fckeditor使用方式上也有所不同。在我的mvc項目中由于要用到 ckeditor，特意研究了下它的使用方法，寫下來和大家分享。
?
我用的是最新版本的：ckeditor_3.0.1? 下載地址：http://ckeditor.com/
下載后直接解壓得到ckeditor文件夾，包括如下內容：
?其中sample為例子，source為源文件，為了減少editor的體積，直接刪除。然后將整個文件夾直接拷貝到網站的根目錄下.
??在你需要使用editor控件的頁面頭部添加：
...
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
在頁面相應位置上添加：<textarea name="editor1"></textarea><script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>
注意：js代碼一定要寫在textarea后
其實可以這樣理解editor控件只是對textarea做了一個漂亮的包裝，我們的輸入其實都在上面的texarea中，最終也是通過textarea
提交到服務器端。
知道這些，服務器端代碼就太簡單了：
[AcceptVerbs(HttpVerbs.Post)]
[ValidateInput(false)]
public ActionResult Create(FormCollection collection)
{
blog.Content = collection["editor1"];
。。。
}
collection["editor1"]即可取得editor中的輸入。這里需要注意的是由于textarea中有特殊字符，出于
安全原因，默認情況mvc框架不允許提交的，應在相應方法上加上[ValidateInput(false)]屬性。效果如下：
還是相當不錯的。
新的editor中去除了上傳功能，也就是說我們不能通過上傳插入圖片、flash了。如圖：editor中的插入圖片對話框并沒有提供上傳功能：
幸好有個插件ckfinder可以輔助我們完成以下功能，插件的下載地址同樣在
http://ckeditor.com/ 最新版本：ckfinder_aspnet_1.4.1.1
解壓后，得到一個名為ckfinder的文件夾，同樣刪除掉source、sample目錄（原因同上），拷貝到網站根目錄下。如圖：
注意：這里還有些配置必須要做：
- 把文件夾中的bin目錄下的dll文件添加到網站的引用中，防止出現找不到類的錯誤。
- 打開config.ascx，修改public override bool CheckAuthentication()
?? ?{
?? ??? reture false；//改為return true；
?? ?}此處修改是為了有權限上傳。
接下來就要把ckfinder集成到ckeditor中了，代碼如下：
var editor = CKEDITOR.replace('editor1');
CKFinder.SetupCKEditor(editor, '/ckfinder/');
當然，在頁面相應位置引用script代碼是必不可少的。
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
好了，最后一步了，由于ckfinder不是免費的，所以默認情況下會在上傳頁面中有紅色的廣告提示，雖然不影響使用，但總是覺得
不爽。
去除方法如下：找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js，將其中的en.call(window,qo); ?? 代碼注釋或直接刪除。
至此我們的ckfinder全部配置完畢，運行效果如下：
補充：
要自己配置eidtor的外觀，可打開eidtor文件夾下的：config.js文件進行配置。
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
// config.width = 200;
};
此處配置是針對網站中所有頁面的editor，如單個頁面需要單獨配置，直接在頁面中寫配置代碼，示例如下：
CKEDITOR.config.height = 400;
?
?
?
轉載于:https://www.cnblogs.com/healer_zll/archive/2009/12/07/1618839.html
總結
以上是生活随笔為你收集整理的asp.net mvc中ckeditor+ckfinder的配置方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： w10系统怎么拨号上网 W10如何使用拨
- 下一篇： Spring.NET企业架构实践之 JQ