|
FCKeditor是一個專門使用在網(wǎng)頁上屬于開放源代碼的所見即所得文字編輯器。它志于輕量化,不需要太復雜的安裝步驟即可使用。它能在asp、asp.net、PHP、JSP等多個平臺下使用,并且支持大部分瀏覽器,所以在它出現(xiàn)的6年時間里,成為了最流行的文字編輯器。 隨著技術的發(fā)展,很多更新更方便的東西為開發(fā)者提供了更大的便利。在這種情況下,F(xiàn)CKeditor團隊推出了一個FCKeditor的重寫版本——CKEditor。 新版本的CKEditor加載速度更快、更方便使用,在新版本的基礎上又一個全新的用戶界面,甚至可以讓用戶精確地自定義顏色。CKEditor經(jīng)過了重寫,提供了豐富而強大的集成和互動的API。該編輯器是完全基于插件的,它可以擴展和所有部件以符合所有需求。 新版本的CKEditor只提供了基本的文本編輯功能,上傳模塊由另一個組件CKFinder。如果同時需要上傳功能,就需要再下載CKFinder(http://www./)。
CKEditor的配置
下面我們看一下在asp.net環(huán)境中如何使用新版本的CKEditor和CKFinder。
CKEditor的配置相對FCKeditor來說非常簡單。將文件夾拷貝到你的程序目錄,然后你只需要在頁面中添加js引用:
- <mce:script type="text/javascript" src="ckeditor/ckeditor.js" mce_src="ckeditor/ckeditor.js"></mce:script>
- 然后在頁面中就能夠使用:
- <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
- 這里是內(nèi)容
這樣就可以使用了。
在asp.net下,如果想使用后臺取得編輯器里的數(shù)據(jù),可以這樣來做:
- <asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine"></asp:TextBox>
- <mce:script type="text/javascript"><!--
-
- CKEDITOR.replace( '<%= txtContent.ClientID %>' );
- // --></mce:script>
<%= txtContent.ClientID %>是服務器控件被編譯過以后在HTML中顯示的ID名,這樣就可以通過后臺調(diào)用編輯器中的數(shù)據(jù)了。
為了減少編輯器的大小,可以刪除一些不必要的文件,如把_samples、_source、_tests三個文件夾刪除,進入lang文件目錄,保留en.js、zh.js、zh-cn.js三個文件,其余的語言文件如果你用不到,可以刪除。
CKFinder的配置:
1、把解壓后的/ckfinder/夾拷貝到你的web目錄下;然后把bin目錄下的dll文件拷到你自己的bin目錄下。 2、創(chuàng)建一個上傳文件的目錄。在默認配置的情況下,/ckfinder/userfiles/是上傳目錄;如果想修改上傳目錄,修改config.ascx文件中的BaseUrl = "/uploads/",這里是以根目錄作為絕對路徑的目錄,注意以反斜杠結尾。 3、確保你的文件夾能被網(wǎng)絡訪問寫入。在Windows里,給IUSR_<ServerName>用戶寫權限;CKFinder可以結合session來判斷用戶是否有權限進行上傳。如果不需要進行用戶身份驗證,那么修改config.ascx文件里的CheckAuthentication()函數(shù),直接返回true。要進行身份驗證,也是修改這個函數(shù)。 4、編輯config.ascx文件。確保你已經(jīng)正確設置該文件中的設置,并確定CKFinder在里面。
然后測試是否可用,運行下面這個頁面:
/ckfinder/_samples/aspx/standalone.aspx
沒有意外的就,應該能使用了。
PS:網(wǎng)上一些教程說CKFinder需要付費才能上傳,那是放屁。未注冊的CKFinder照樣可以使用全部功能,只不過在編輯器里放了個LOGO而已。
與CKEditor集成:
按照上面的配置好以后,理論上CKEditor和CKFinder都應該能使用了。但是這個時候CKEditor還不具備上傳功能,得把兩個東西集成在一起。代碼相當簡單:
- <asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine"></asp:TextBox>
- <mce:script type="text/javascript"><!--
- // This call can be placed at any point after the
- // <textarea>, or inside a <head><script> in a
- // window.onload event handler.
-
- // Replace the <textarea id="editor"> with an CKEditor
- // instance, using default configurations.
- CKEDITOR.replace('<%= txtContent.ClientID %>',
- {
- filebrowserBrowseUrl: '../ckfinder/ckfinder.html',
- filebrowserImageBrowseUrl: '../ckfinder/ckfinder.html?Type=Images',
- filebrowserFlashBrowseUrl: '../ckfinder/ckfinder.html?Type=Flash',
- filebrowserUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
- filebrowserImageUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
- filebrowserFlashUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
- }
- );
- // --></mce:script>
如果路徑?jīng)]有配置錯誤,那么恭喜你,享受全新的CKEditor吧!
|