在做ext項目的時候用到了ext的htmleditor編輯器，發現功能實在是太爛,和ext其他功能相差太大了。
剛開始想自己做ext外掛程式來實現編輯器的其他功能，可是進度太慢太繁瑣，放棄。
如果要是ext和FCKEditor就好了，經過研究可以實現。
1.首先FCKEditor下載
到http://ckeditor.com/download下載，下載兩個壓縮檔，分別是FCKeditor_2.6.5.zip 和FCKeditor.Net 2.6.3.zip，
如果想瞭解asp.net和FCKEditor結合應供請到我的另一個文章裡查看，http://blog.csdn.net/lzy_1515/archive/2010/03/22/5405250.aspx，在此就不多講了。
2.檔案解壓後
將fckeditor檔案夾複製到ext檔案夾根目錄下。
3.在添加指令檔，此檔案可以放在網站的如何目錄下，我建立fckeditor.js放在的ext根目錄下了。
fckeditor.js代碼如下：
/// <reference path="vswd-ext_2.2.js" /><br />function ready(){<br /> Ext.QuickTips.init();<br />var fckeditorFormPanel = new Ext.FormPanel({<br /> labelWidth: 75,<br /> width: 1000,<br /> height:500,<br /> defaultType: 'textfield',<br /> plain:true,<br />layout:"form",</p><p> items: [{<br /> xtype:'textarea',<br /> fieldLabel:'編輯',<br />labelSeparator:'：',<br />id:'code',<br />name:'code',<br /> height:400,<br />width:500<br /> }<br /> ],<br /> buttons: [<br /> {</p><p> text: '確定提交',<br /> type:'submit', </p><p> handler:function ()<br /> {<br /> //關鍵 不能刪除的<br /> Ext.get('code').dom.value=editorInstance.GetXHTML(true);//擷取fckeditor內容賦給textarea<br /> var str = Ext.getCmp("code");<br /> alert(str.getValue());</p><p>// if(fckeditorFormPanel.form.isValid()){//驗證通過<br />// fckeditorFormPanel.form.doAction('submit',{<br />// url:'json.aspx',<br />// method:'post',<br />// waitMsg:'正在提交,請稍等...',<br />// success:function(form,action){//成功返回<br />// var result = action.result.success;<br />// if(result == 'true' ){<br />// window.location.href="Test.aspx";<br />// }else{<br />// Ext.Msg.alert("提示訊息","添加錯誤");<br />// }<br />// },<br />// failure:function(form,action){//失敗返回<br />// Ext.Msg.alert("提示訊息","添加資料發生了異常");<br />// }<br />// });<br />// } </p><p> }<br /> }]<br /> });<br /> fckeditorFormPanel.render(document.body);<br /> /**<br /> * 以下建立線上編輯器<br /> */<br />var oFCKeditor = new FCKeditor( 'code',810,350 ) ;<br />oFCKeditor.BasePath = "/extjsFckeditor/ext/fckeditor/"; //編輯器路徑<br />oFCKeditor.ToolbarSet = 'Default'; //工具列樣式主題，經過測試其他的主題還要到fckconfig.js下去修改。<br />oFCKeditor.ReplaceTextarea() ;</p><p>}</p><p>var editorInstance;<br />/**<br />* FCKEditor初始化完成將調用此方法<br />* @param {Object} editorInstance<br />*/<br />function FCKeditor_OnComplete( instance ) {<br /> editorInstance= instance;<br />};
4.顯示fckeditor編輯器。建立Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" validateRequest="false" %></p><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"><br /><head runat="server"><br /> <title>fckeditor測試</title><br /> <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><br /> <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script><br /> <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script><br /> <mce:script src="ext/ext-lang-zh_CN.js" mce_src="ext/ext-lang-zh_CN.js" type="text/javascript"></mce:script></p><p> <mce:script src="ext/fckeditor.js" mce_src="ext/fckeditor.js" type="text/javascript"></mce:script></p><p> <mce:script src="ext/fckeditor/fckeditor.js" mce_src="ext/fckeditor/fckeditor.js" type="text/javascript"></mce:script><br /></head><br /><body><br /> <form id="form1" runat="server"><br /> <div><br /> <mce:script type="text/javascript"><!--<br /> Ext.onReady(ready);</p><p>// --></mce:script><br /> </div><br /> </form><br /></body><br /></html>
5.關鍵的一步差點忘了，還要載入個dll，在網上可以下載到FredCK.FCKeditorV2.dll，複製到bin目錄下就ok。
6.在webconfig中配置儲存上傳圖片的路徑。
<appSettings><br /> <add key="FCKeditor:UserFilesPath" value="~/userfiles/"/><br /> </appSettings>
7.顯示編輯器。
希望對大家能有協助。
：http://download.csdn.net/source/2558370
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
