▼

2017年8月12日 星期六

ckeditor及ckfinder建置_正確版

參考
http://blog.xuite.net/tolarku/blog/229329277-%5BAsp.net%5D+%E4%BD%BF%E7%94%A8+CKEditor+%2B+CKFinder+%E6%8F%90%E4%BE%9B+WYSIWYG+%E7%B6%B2%E9%A0%81%E5%85%A7%E5%AE%B9%E7%B7%A8%E8%BC%AF%E5%99%A8
  1. ckeditor
新建專案ck_01
加入參考：找 ckeditor_aspnet_3.6.6.2\bin\Release\CKEditor.NET.dll，將CKEditor.NET.dll找出來
加入工具列元件
切換到原始碼看看有無這兩行
將下載完的 ckeditor_4.7.1_full 打開，看到 ckeditor 將它拖曳到專案內，這是CKEditor文字編輯器所需元件
瀏覽看看能不能正常執行
  • 拉一Button 來測試看看，連續點兩下
在 Button1_Click 寫一行程式，並呈現在網頁上面
Response.Write(CKEditorControl1.Text);
  • 在 Button2_Click 寫一行程式，並呈現在網頁上面
Label1.Text = HttpUtility.HtmlEncode(CKEditorControl1.Text);
  • 在 Button3_Click 寫一行程式，並呈現在網頁上面
// [ASP.NET][C#]下載檔案時中文檔名出現亂碼
//參考https://dotblogs.com.tw/stanley14/2016/08/07/194803
//HttpContext.Current.Response.HeaderEncoding = System.Text.Encoding.Default;
Label2.Text = CKEditorControl1.Text;
Label3.Text = HttpUtility.UrlDecode(Label2.Text);
  1. CKFINDER
  1. 拉出javascript
  1. 加入ckfinder_aspnet_2.6.2版本
  1. 加入參考
  1. 在CKEditorControl1元件下方加一段javascript code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ck_01.WebForm1" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title></title>
   <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
   <form id="form1" runat="server">
       <CKEditor:CKEditorControl ID="CKEditorControl1" runat="server">
       </CKEditor:CKEditorControl>
       <script type="text/javascript">
           CKEDITOR.replace('<%= CKEditorControl1.ClientID %>',
    {
        //注意路徑是否正確
        //如果你的*.aspx在根目錄，那路徑應該是「ckeditor/ckfinder/...」
        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'
    });
       </script>
       <div>
       </div>
       <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
       <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />
       <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
   </form>
</body>
</html>
  1. 修改 CKFinder 裡的 config.ascx 設定檔（重要）
config.ascx 是 CKFinder 的主要設定檔，修改他目的就是告訴他圖片檔案要存放在哪
  1. 修改 CheckAuthentication()
因為涉及檔案上傳到你的伺服器，所以必須要進行身份的驗證，你可以將驗證的機制寫在這個 Function 之中，而 CKFinder 預設是回傳 false 阻擋檔案上傳，所以要做身份驗證的機制，在測試初期你可以簡單的回傳
return true;
  1. 修改 SetConfig()
這 Function 是設定 CKFinder 的基本參數，底下這些參數
LicenseName = "";
LicenseKey = "";
BaseUrl = "http://localhost:63791/Uploads/";
BaseDir = "D:/Project/tester0722/tester0722/Uploads/";(若設定錯誤,圖片上傳會出不來，務必特別留意)
注意：BaseDir 的路徑斜線方向要用 / ，而非 window 慣用的  ，最後也要加上 / 否則上傳會失敗
更改路徑
BaseUrl = "http://localhost:60271//Upload/";
BaseDir = "D:/vs2015/training/ck_01/ck_01/Upload/";
  1. 建立上傳檔案的目錄，並授與權限
CKFinder 預設是放在 ckfinder 下的 userfiles ，你可以在自己的專案目錄裡去新增一個 Upload的子目錄，用來存放使用者傳上來的圖片檔案。
  1. 修改 WebForm1.aspx 開啟 CKEditor 具有圖片處理功能
增加底下這行於 WebForm1.aspx 的 <%@ Page  之下
<%@ Register Assembly="CKFinder" Namespace="CKFinder" TagPrefix="CKFinder" %>
  1. 具有潛在危險 Request.Form 的值已從用戶端 (CKEditorControl1="<p>可此</p>") 偵測到
在Asp.Net的網站操作中，會產生『具有潛在危險 Request.Form 的值已從用戶端偵測到』此錯誤訊息之原因，通常是在PostBack後系統偵測到頁面中存在某些文字輸入欄位如TextBox、Html編輯器(如FckEditor)等文字內容中存在Html語法，因而判斷為惡意程式碼，如此來避免駭客的惡意攻擊。
此防禦功能在Asp.Net中預設是開啟的，可以透過在頁面的Page指示詞中加入 validateRequest="False" 來關閉它。即可避免資料送出後系統將Html語法判斷為惡意程式碼。
Ex：
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" validateRequest="False" %>
另一種關閉方式是透過 web.config 設定檔來達到整個網站皆關閉防禦功能的效果。但是非常不建議直接在web.config 設定檔中作關閉的動作，這樣對系統的登入驗證頁面來說等於開了窗，非常危險。
web.config 設定檔的關閉方法：
<system.web>
        <pages validateRequest="False" />
</system.web>

於

沒有留言:

張貼留言