iT邦幫忙

2021 iThome 鐵人賽

DAY 11
1
Modern Web

ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#系列 第 11

Day 11 - Using CKEditor + CKFinder WYSIWYG Editor with ASP.NET Web Forms C# 在網頁嵌入 WYSIWYG 文字編輯器

=x= 🌵 WYSIWYG HTML Editor 所見即所得文字網頁文字編輯器使用方式。


WYSIWYG Editor 介紹 :

📌 WYSIWYG 為 "What You See Is What You Get" 的縮寫,而網頁用的文字編輯器,常見於論壇或留言板帶有各式功能的輸入框,功能為將使用者在上面進行的各類編輯樣式等全部內容,使用 HTML 語法輸出,這樣使用者所編輯的內容,與存下來的資料,可以直接送至網頁呈現。

👀 WYSIWYG Editor 參考網站 : CKEditor Demo



CKEditor + CKFinder 實作 :

🧠 實作內容為將 CKEditor3 HTML 資料存在資料庫,CKFinder2 內嵌於 CKEditor3 且圖檔存放在專案資料夾的作法,實作內容包含 : 安裝、使用、自訂控制項工具。

👉 安裝方法

1. 在 Visual Studio 專案內用 Nuget 安裝 CkeditorForASP.NET (3.6.4) 並安裝附帶更新後重開檔案確認 CKEditor 控制項已出現在工具箱 (在 .asp 頁切換到設計模式後查看工具箱)

https://ithelp.ithome.com.tw/upload/images/20210925/20139487CJ5iV3ZHnZ.jpg


2. 於 CKFinder 官網下載 asp.net 用檔案 (2.6.2),解壓縮後資料夾放入專案同層,刪除資料夾內無用檔案 ( _samples 及 _source 資料夾 )

https://ithelp.ithome.com.tw/upload/images/20210925/20139487RUcH2xXY96.jpg


3. 專案 "參考" 項目中右鍵加入參考 ( CKEditor.NET.dll 已經用 Nuget 安裝了),瀏覽選擇 ckfinder\bin\Release\CKFinder.dll 加入 CKFinder.dll

https://ithelp.ithome.com.tw/upload/images/20210925/20139487Qj8oqCRTGf.jpg


4. 開啟 ckfinder 資料夾內的config.ascx,將CheckAuthentication()功能改為return true;

https://ithelp.ithome.com.tw/upload/images/20210925/20139487VpDMgvFnME.jpg


5. ckfinder 資料夾內的 config.ascxSetConfig()BaseUrl 改成上傳檔案的資料夾位置

https://ithelp.ithome.com.tw/upload/images/20210925/20139487QHA63eJVzJ.jpg



👉 錯誤排除

1. 如果有使用 Nuget 安裝 Microsoft.AspNet.FriendlyUrls 來隱藏副檔名,會導致 Ckfinder 上傳圖片功能錯誤,錯誤畫面如下

https://ithelp.ithome.com.tw/upload/images/20210925/201394876P0BAAHpJ1.jpg


2. 於上傳圖片頁面用網頁檢查工具比對可以發現導致錯誤原因為 Status Code: 301

https://ithelp.ithome.com.tw/upload/images/20210925/201394871UNw05nDnK.jpg


3. 於全域應用程式類別 Global.asax.cs 修改原本的設定如下

protected void Application_Start(object sender, EventArgs e)
{
    // 設定不顯示副檔名 (如果只想隱藏副檔名做到此區塊就好)
    var routes = RouteTable.Routes;
    var settings = new FriendlyUrlSettings();
    settings.AutoRedirectMode = RedirectMode.Permanent;
    //routes.EnableFriendlyUrls(settings);

    //修改避免 CKFinder 上傳功能錯誤
    routes.EnableFriendlyUrls(settings, new Microsoft.AspNet.FriendlyUrls.Resolvers.IFriendlyUrlResolver[] { new MyWebFormsFriendlyUrlResolver() });

    // 執行短網址路由方法
    RegisterRouters(RouteTable.Routes);
}

public class MyWebFormsFriendlyUrlResolver : Microsoft.AspNet.FriendlyUrls.Resolvers.WebFormsFriendlyUrlResolver
{
    public override string ConvertToFriendlyUrl(string path)
    {
        //字串為 ckfinder 固定內容
        if (!string.IsNullOrEmpty(path) && path.ToLower().Contains("/ckfinder/core/connector/aspx/connector.aspx")) {
            return path;
        }
        return base.ConvertToFriendlyUrl(path);
    }
}


👉 使用方法

  • 從工具箱拉入 CKEditor 控制項並檢查上方有無增加引入如下
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
  • CKEditor 控制項使用時需加入位置屬性 BasePath="/Scripts/ckeditor/"
<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" BasePath="/Scripts/ckeditor/"></CKEditor:CKEditorControl>
  • 於使用控制項的 .aspx 頁後端 .cs 的 Page_Load 事件內加入以下程式碼
FileBrowser fileBrowser = new FileBrowser();
fileBrowser.BasePath = "/ckfinder";
fileBrowser.SetupCKEditor(CKEditorControl1);
  • 於網頁後置程式碼 .aspx.cs 取得輸入內容編譯方法如下
Literal.Text = HttpUtility.HtmlEncode(CKEditorControl1.Text);


👉 自訂 CKEditor 控制項工具方法

  • 可以拿掉用不到的的工具及排列組合
<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" BasePath="/Scripts/ckeditor/"
 Toolbar="Bold|Italic|Underline|Strike|Subscript|Superscript|-|RemoveFormat
        NumberedList|BulletedList|-|Outdent|Indent|-|JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock|-|BidiLtr|BidiRtl
        /
        Styles|Format|Font|FontSize
        TextColor|BGColor
        Link|Image" >
</CKEditor:CKEditorControl>


👉 刪除用不到的功能

  • 刪除圖片上傳功能用不到的分頁 : 於 ckeditor 資料夾 config.js 客製功能內加入以下程式碼
config.removeDialogTabs = 'image:Upload;image:advanced;image:Link';
  • 刪除輸入框下方計算字數功能 : 於 ckeditor 資料夾 config.js 客製功能內加入以下程式碼
config.removePlugins = 'elementspath';


本日總結 :

📢 初次使用 WYSIWYG Editor 時,一直會被文字編輯器官網美觀的輸入框吸引,多次嘗試尋找安裝方式後會發現,最新版本偏向供前端使用,並且需要搭配官網提供雲端儲存收費服務,才能儲存圖片,這也是網路發展趨勢,提供免費服務,但附加功能使用雲端然後收費,因此最後才會選擇安裝較舊的版本,但不影響使用,不過當初真的花了相當多時間在找不用儲存在雲端的作法,另外版本間的搭配也是個坑,強烈建議使用文章相同搭配的版本進行安裝

  • 明日將介紹製作後台相簿管理的相關細節。

上一篇
Day 10 - 將 DEALERS 後台儲存資料提取後,送至前台渲染畫面 - Literal 控制項應用 - ASP.NET Web Forms C#
下一篇
Day 12 - Using List<T> to Store JSON Format Path with ASP.NET Web Forms C# 用強類型物件清單儲存 JSON 格式的相簿圖片路徑
系列文
ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#30

尚未有邦友留言

立即登入留言