亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CKEditor&CKFinder結合實現在線HTML編輯器

發布時間:2020-06-27 13:40:39 來源:網絡 閱讀:2691 作者:junweilv 欄目:編程語言

最近在做一個項目時需要用到在線HTML編輯器,之前做的是用的FreeTextBox,但總感覺不太完善。于是想起了FCKeditor,知道它很強大,但還沒用過,于是準備使用FCKeditor。
FCKeditor目前已經改名為了CKEditor和CKFinder,CKEditor不包含上傳文件功能,該功能被分割在了CKFinder中,因此需要同時使用這兩個文件才能實現文件上傳,同時因為我是基于ASP.NET開發的,需要同時下載CKEditor for ASP.NET。
下面詳細介紹如下使用CKEditor&CKFinder實現在線HTML編輯器:

到官方下載相關文件(注意選擇asp.net版本):http://ckeditor.com/download ckeditor_3.6.2.zip ,ckeditor_aspnet_3.6.2.zip http://ckfinder.com/download ckfinder_aspnet_2.1.zip

我是在VS2010+SQL2008Express Win7 旗艦版的環境下開發的。
新建ASP.NET空網站,分別把下載的文件解壓下,復制解壓后的ckeditor_3.6.2里面的ckeditor整個文件夾粘貼到網站的根目錄下,然后刪除不用的文件,有童鞋稱這個過程為“瘦身”,呵呵
結果如下:
CKEditor&CKFinder結合實現在線HTML編輯器

同樣把解壓后的ckfinder_aspnet_2.1的文件夾里的ckfinder文件夾整個復制粘貼到網站的根目錄下,與ckeditor同級。也對其瘦身,結果如下:
CKEditor&CKFinder結合實現在線HTML編輯器

添加到CKEditor.NET.dll和CKFinder.dll文件的引用,分別位于下載的文件的bin目錄下。
接下來開始配置
先修改ckeditor,在ckeditor文件夾下打開config.js,添加如下代碼,分別設置皮膚,語言,工具條

CKEDITOR.editorConfig = function (config) {

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

    config.skin = 'v2';

    config.language = 'zh-cn';

 

    config.toolbar = 'Full';

 

    config.toolbar_Full =

    [

             { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },

             { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },

             { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },

             { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },

             '/',

             { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },

             { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },

             { name: 'links', items : [ 'Link','Unlink','Anchor' ] },

             { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },

             '/',

             { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },

             { name: 'colors', items : [ 'TextColor','BGColor' ] },

             { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }

    ];

 

    config.toolbar_Basic =

    [

             ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']

    ];

};

現在就可以在aspx頁面添加ckeditor編輯器了,新建Default.aspx,在head部分添加js引用。<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
這個是必須的。
然后在div部分添加<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine" runat="server"></asp:TextBox>,
保存運行就可以看到編輯器了,
 

CKEditor&CKFinder結合實現在線HTML編輯器

獲取編輯器的值插入數據庫 則TextBox.Text即可,綁定的話直就從數據庫讀取<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox> ,提示:在插入類似'時候ASPX頁面提示客戶端(*)中檢測到有潛在危險的 Request.Form 值。在頁面HTML代碼第一行加入validateRequest="false"或者修改web.config文件即可,但這不是最安全的做法,可能存在提交非法數據和跨站的危險。關鍵是這時點擊插入圖片時,出現的是

CKEditor&CKFinder結合實現在線HTML編輯器

沒有上傳圖片選項卡,雖然這樣也可以用,需要通過其他方法上傳圖片到服務器,然后粘貼進圖片的URL地址。但顯然我們希望能夠直接在此進行圖片的上傳和編輯。接下來就用到ckfinder了。
繼續修改ckeditor下面的config.js,在函數的底部繼續加入如下代碼:

config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';

    config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';

    config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';

    config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';

    config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';

    config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

config.filebrowser* 為上傳文件時調用的ckfinder connector.aspx文件相應路徑,根據您的網站文件結構修改,僅為測試我沒有修改文件夾名稱。添加代碼后在運行一下看看這個時候你發現有了上傳的按鈕

但這時當上傳圖片時,出現“因為安全原因,文件不可瀏覽。請聯系系統管理員并檢查CKFinder配置文件。

這時打開ckfinder下面的config.ascx文件,修改public override bool CheckAuthentication()
返回值為true,這里需要添加過濾條件,因為是測試就不寫了

public override bool CheckAuthentication()

         {

                   // WARNING : DO NOT simply return "true". By doing so, you are allowing

                   // "anyone" to upload and list the files in your server. You must implement

                   // some kind of session validation here. Even something very simple as...

                   //

                   //                 return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );

                   //

                   // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the

                   // user logs on your system.

 

                   return true;

         }

還是在這個文件內找到public override void SetConfig()
方法里面的BaseUrl = "/ckfinder/userfiles/";后面的目錄根據自己的項目結構填寫,我這里用的是默認的文件夾。
至此基本結束了。下一篇文章會介紹如何給上傳的圖片重命名。至于詳細情況可查看官方文檔。

本文參考:http://www.cnblogs.com/root7/archive/2010/11/02/1866712.html

附件:http://down.51cto.com/data/2359236
向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

长寿区| 天长市| 永昌县| 吉木萨尔县| 德惠市| 安图县| 肇州县| 霍山县| 安新县| 西安市| 新巴尔虎右旗| 浦江县| 吐鲁番市| 揭阳市| 体育| 朝阳县| 驻马店市| 新源县| 徐汇区| 东明县| 福泉市| 台北县| 鹿泉市| 绥滨县| 宝兴县| 美姑县| 祁连县| 杂多县| 上思县| 潞西市| 江安县| 资中县| 鞍山市| SHOW| 色达县| 建宁县| 郎溪县| 图木舒克市| 台安县| 泌阳县| 兰溪市|