=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 頁切換到設計模式後查看工具箱)

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

• 👀 參考影片 : CKEditor and CKFinder Integration with asp.net webform

• 👀 官網舊版本下載處 : https://ckeditor.com/ckfinder/changelog/

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

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

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

👉 錯誤排除

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

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

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 Toolbar

👉 刪除用不到的功能

• 刪除圖片上傳功能用不到的分頁 : 於 ckeditor 資料夾 config.js 客製功能內加入以下程式碼

config.removeDialogTabs = 'image:Upload;image:advanced;image:Link';

• 刪除輸入框下方計算字數功能 : 於 ckeditor 資料夾 config.js 客製功能內加入以下程式碼

config.removePlugins = 'elementspath';

本日總結 :

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

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