首頁 > 開發者 > ASP

CKEditor3.0在asp.net環境下上傳檔案的配置，整合CKFinder

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

FCKeditor是一個專門使用在網頁上屬於開放原始碼的所見即所得 (WYSIWYG)文字編輯器。它志於輕量化，不需要太複雜的安裝步驟即可使用。它能在asp、asp.net、PHP、JSP等多個平台下使用，並且支援大部分瀏覽器，所以在它出現的6年時間裡，成為了最流行的文字編輯器。
隨著技術的發展，很多更新更方便的東西為開發人員提供了更大的便利。在這種情況下，FCKeditor團隊推出了一個FCKeditor的重寫版本——CKEditor。
新版本的CKEditor載入速度更快、更方便使用，在新版本的基礎上又一個全新的使用者介面，甚至可以讓使用者精確地自訂色彩。CKEditor經過了重寫，提供了豐富而強大的整合和互動的API。該編輯器是完全基於外掛程式的，它可以擴充和所有組件以符合所有需求。
新版本的CKEditor只提供了基本的文本編輯功能，上傳模組由另一個組件CKFinder。如果同時需要上傳功能，就需要再下載CKFinder(http://www.ckfinder.com/)。

 

CKEditor的配置

下面我們看一下在asp.net環境中如何使用新版本的CKEditor和CKFinder。

CKEditor的配置相對FCKeditor來說非常簡單。將檔案夾拷貝到你的程式目錄，然後你只需要在頁面中添加js引用：

view plaincopy to clipboardprint?

  1. <mce:script type="text/javascript" src="ckeditor/ckeditor.js" mce_src="ckeditor/ckeditor.js"></mce:script>  
  2. 然後在頁面中就能夠使用：  
  3. <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">  
  4. 這裡是內容  

<mce:script type="text/javascript" src="ckeditor/ckeditor.js" mce_src="ckeditor/ckeditor.js"></mce:script><br />然後在頁面中就能夠使用：<br /><textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"><br />這裡是內容<br />

 

這樣就可以使用了。

在asp.net下，如果想使用後台取得編輯器裡的資料，可以這樣來做：

view plaincopy to clipboardprint?

  1. <asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine"></asp:TextBox>  
  2. <mce:script type="text/javascript"><!--  
  3.    
  4.       CKEDITOR.replace( '<%= txtContent.ClientID %>' );   
  5. // --></mce:script>  

<asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine"></asp:TextBox><br /><mce:script type="text/javascript"><!--</p><p> CKEDITOR.replace( '<%= txtContent.ClientID %>' );<br />// --></mce:script>

 

<%= txtContent.ClientID %>是伺服器控制項被編譯過以後在HTML中顯示的ID名，這樣就可以通過後台調用編輯器中的資料了。

為了減少編輯器的大小，可以刪除一些不必要的檔案，如把_samples、_source、_tests三個檔案夾刪除，進入lang檔案目錄，保留en.js、zh.js、zh-cn.js三個檔案，其餘的語言檔案如果你用不到，可以刪除。

 

CKFinder的配置：

1、把解壓後的/ckfinder/夾拷貝到你的web目錄下；然後把bin目錄下的dll檔案拷到你自己的bin目錄下。
2、建立一個上傳檔案的目錄。在預設配置的情況下，/ckfinder/userfiles/是上傳目錄；如果想修改上傳目錄，修改config.ascx檔案中的BaseUrl = "/uploads/"，這裡是以根目錄作為絕對路徑的目錄，注意以反斜線結尾。
3、確保你的檔案夾能被網路訪問寫入。在Windows裡，給IUSR_<ServerName>使用者寫入權限；CKFinder可以結合session來判斷使用者是否有許可權進行上傳。如果不需要進行使用者身分識別驗證，那麼修改config.ascx檔案裡的CheckAuthentication()函數，直接返回true。要進行身分識別驗證，也是修改這個函數。
4、編輯config.ascx檔案。確保你已經正確設定該檔案中的設定，並確定CKFinder在裡面。

然後測試是否可用，運行下面這個頁面：

/ckfinder/_samples/aspx/standalone.aspx

沒有意外的就，應該能使用了。

PS：網上一些教程說CKFinder需要付費才能上傳，那是放屁。未註冊的CKFinder照樣可以使用全部功能，只不過在編輯器裡放了個LOGO而已。

 

與CKEditor整合：

 

按照上面的配置好以後，理論上CKEditor和CKFinder都應該能使用了。但是這個時候CKEditor還不具備上傳功能，得把兩個東西整合在一起。代碼相當簡單：

view plaincopy to clipboardprint?

  1. <asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine"></asp:TextBox>  
  2.     <mce:script type="text/javascript"><!--  
  3.        // This call can be placed at any point after the  
  4.        // <textarea>, or inside a <head><script> in a  
  5.        // window.onload event handler.  
  6.   
  7.        // Replace the <textarea id="editor"> with an CKEditor  
  8.        // instance, using default configurations.  
  9.        CKEDITOR.replace('<%= txtContent.ClientID %>',  
  10.                  {  
  11.                      filebrowserBrowseUrl: '../ckfinder/ckfinder.html',  
  12.                      filebrowserImageBrowseUrl: '../ckfinder/ckfinder.html?Type=Images',  
  13.                      filebrowserFlashBrowseUrl: '../ckfinder/ckfinder.html?Type=Flash',  
  14.                      filebrowserUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',  
  15.                      filebrowserImageUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',  
  16.                      filebrowserFlashUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'  
  17.                  }  
  18.                 );  
  19. // --></mce:script>  

<asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine"></asp:TextBox><br /> <mce:script type="text/javascript"><!--<br /> // This call can be placed at any point after the<br /> // <textarea>, or inside a <head><script> in a<br /> // window.onload event handler.</p><p> // Replace the <textarea id="editor"> with an CKEditor<br /> // instance, using default configurations.<br /> CKEDITOR.replace('<%= txtContent.ClientID %>',<br /> {<br /> filebrowserBrowseUrl: '../ckfinder/ckfinder.html',<br /> filebrowserImageBrowseUrl: '../ckfinder/ckfinder.html?Type=Images',<br /> filebrowserFlashBrowseUrl: '../ckfinder/ckfinder.html?Type=Flash',<br /> filebrowserUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',<br /> filebrowserImageUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',<br /> filebrowserFlashUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'<br /> }<br /> );<br />// --></mce:script><br />

 

如果路徑沒有配置錯誤，那麼恭喜你，享受全新的CKEditor吧！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
ASP學習總結：錯誤碼
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More