彬綺部: MailTo編碼

FCKEditor 是個很讚的線上編輯器，這模組，可讓我們直接在線上，類似使用frontpage等工具一樣的操作，去編寫一個網頁。因此也被許多論壇所採用!如果有機會，看看FCKEditor的Source，會發現它基本上是個幾乎全部使用Javascript動態產生的環境。真的是嘆為觀止!今天要介紹的是一個在這編輯器上的客製功能。

因為我們慣用語言是中文，中文在編碼上要相當注意，不然時常會發生亂碼的問題，例如FckEditor的Link模組中，可讓我們加入MailTo功能，畫面如下：

而編輯器最後便會幫我們在網頁上，加入一個如：mailto:電子郵件地址?subject=主題&body=內文，的連結。而問題也就發生在主題與內文的部分，FCKEditor預設會幫我們把主題與內文的部分，做Javascript的Encode，Encode過得編碼為UTF-8的格式(FCKeditor預設使用encodeURIComponent方法做Encode)，但這樣的連結，就必須考慮到讀取的介面是否支援了，例如outlook是否支援。經過測試，outlook 2010 以前的版本，均只支援讀取big5的編碼格式，而outlook 2010 則只支援使用unicode編碼。因此FCKEditor編輯器產生的MailTo連結，在使用outlook 2010開啟時，十分正常，但其他之前版本的outlook則全部變成亂碼。
因此有了今天這篇文章，如何在FCKEditor自訂，讓MailTo改使用Big5編碼。時做的步驟如下：

我們要先新增兩個aspx的頁面，用於接收client的資訊，在Server端將字串用Big5編碼格式做URLEncode與URLDecode後回傳。
新增一個頁面FCKbig5encode.aspx，用於將字串做URLEncode。

<%@ Page Language="C#" %>

<% 
    if (Request.QueryString["data"] != null)
    {
        try
        {
            string data = HttpUtility.UrlDecode(Request.QueryString["data"]);
            string big5encode = HttpUtility.UrlEncode(data, Encoding.GetEncoding("Big5"));
            Response.Write(big5encode);
        }
        catch
        {
            Response.Write(Request.QueryString["data"]);
        }
    }
    else
    {
        Response.Write(Request.QueryString["data"]);
    }           
%>

新增第二個頁面FCKbig5decode.aspx，用於將字串做URLDecode。

<%@ Page Language="C#" %>

<% 
    if (Request.QueryString["data"] != null)
    {
        try
        {            
            string data = Request.QueryString["data"];
            string big5encode = HttpUtility.UrlDecode(data, Encoding.GetEncoding("Big5"));
            Response.Write(big5encode);
        }
        catch
        {
            Response.Write(Request.QueryString["data"]);
        }
    }
    else
    {
        Response.Write(Request.QueryString["data"]);
    }           
%>

將以上兩個檔案，新增於路徑 fckeditor\editor\dialog\fck_link\ 下。

再找到 fckeditor 處理 link 相關的 js 檔，fck_link.js。(我使用的版本2.6.5，路徑於fckeditor\editor\dialog\fck_link\fck_link.js ，如與您使用的版本，或路徑不相同，再自行對應變更路徑與新增頁面。)

開啟 fck_link.js 後，插入下方兩段Javascirpt ，使用此兩段Javascript，讓Client 端 Javascript 可直接呼叫，將字串做 big5 的 URLEncode。
第一段用來與Server端FCKbig5encode.aspx頁面互動，做字串的Encode

function Big5encodeURIComponent(str) {
    var xml = new ActiveXObject("MSXML2.XMLHTTP");
    var data = encodeURIComponent(str);
    xml.open("get", "fck_link/FCKbig5encode.aspx?data=" + data, false);
    xml.send();
    return xml.responseText;
}

第二段用來與Server端FCKbig5decode.aspx頁面互動，做字串的Decode

function Big5decodeURIComponent(str) {
    var xml = new ActiveXObject("MSXML2.XMLHTTP");
    var data = encodeURIComponent(str);
    xml.open("get", "fck_link/FCKbig5decode.aspx?data=" + data, false);
    xml.send();
    return xml.responseText;
}

接下來將 fck_link.js 中 MailTo 相關部分，原來使用 encodeURIComponent 方法的部分，全部替換成 big5encodeURIComponent，以此類推，也將相關的decodeURIComponent 方法的部分，全部替換成 big5decodeURIComponent。這樣就完成讓FCKEditor使用big5編碼做URLEncode囉~

不過以下幾點要特別小心注意：

因為使用的是Big5編碼格式，所以要小心一些難字會變成問號(?)，例如；堃。
在要編碼的內文中，要特別注意是否有(、)，這兩個符號。這兩個符號在Javascript encodeURIComponent方法中，會被排除不做URLEncode，但因這裡是使用Xml.open將資訊送回Server端做處理，當送回的Querystring中有(、)，這兩個符號。會發生錯誤，因此要小心不可有這兩個字元。如要使用，可使用全形的括弧，即可避免這個錯誤。
URL有最大長度的限制，上Google查到的資訊是最大長度限制為2083個字元，但我測試得結果是2031個字元，但要小心有些字元可能在產稱mailto的url時，會再被編碼成HtmlEncode，例如&字元，會被HtmlEncode為&，所以在最後呈現在Html上的字數限制計算上，要十分注意。不然會有無法開啟mailto、或有錯誤訊息的狀況發生。

以上分享給大家~

---------------------------------------------------------------------------------------------------------------------

[2010/07/22]最新訊息，上方有提到，outlook 2010已改 mailto 使用 utf-8 編碼格式。這是說法是錯誤的，說明如下：

正確來說，應該是在新版本的IE8中(不太確定是否是IE8、或更早版本、或其實在系統中亦可設定?!)，加入了一個選項，截圖如下：

這個選項便影響整體OS中，所有由瀏覽器送出 mailto 連結給 outlook 時所使用的編碼方式!

關於我

彬綺部

網誌標籤

IE8 設定 mailto 連結使用編碼方式 ( UTF-8 or Big5 )

讓 FCKEditor 的 Link : MailTo 功能，改用 Big5 編碼

好站推薦

歷史記錄