Lightweight Rich Text Editor 的 Postback 問題

在上一篇 Lightweight Rich Text Editor (RTE / WYSIWYG) plugin for jQuery 中曾經提到：如果曾在此 Editor 上切換 html/css 時, 其接收方式就必須改為 Request.Form 的方式接收, 原因為何呢?? 我們必須先去瞭解此 Editor 切換 html/css 的方式以及 Post 時的狀況…

該 Editor 使用方式非常簡單, 只需使用下列源碼即可(假設已經有個 class 為 rte 的 textarea )

=====[ Code Start / JavaScript (MSIE 5.5 DOM), with (Jscript) Windows Script Host ]=====

$(‘.rte’).rte({
    css: ‘default.css’,
    controls_rte: rte_toolbar,
    ontrols_html: html_toolbar
});

請自行下載該源碼, 以下將節錄部分源碼加以說明…

=====[ Code Start / JavaScript (MSIE 5.5 DOM), with (Jscript) Windows Script Host ]=====

lwRTE.prototype.enable_design_mode = function() {
    // …. 省略
    if($(self.textarea).attr(‘name’))
        self.iframe.title = $(self.textarea).attr(‘name’);
    var content    = $(self.textarea).val();
    $(self.textarea).hide().after(self.iframe).remove();
    self.textarea    = null;
    // …. 省略
}

self.textarea 為一 Element, 就是第一段以 $(‘.rte’) 方式傳入的 textarea; 而 self.iframe 也是一個 Element, 將是 HTML 編輯器的編輯區塊…

lwRTE.enable_design_mode 的作用是將 Editor 變更為 HTML 編輯模式…
請注意上段源碼的 $(self.textarea).hide().after(self.iframe).remove();,
源碼會先將 self.textarea 的 name attribute 存放於 self.iframe 的 title attribute 中…
然後把 self.textarea 隱藏後, 在該 Element 後面插入 self.iframe, 再將 self.textarea 移除… 請注意是移除不是隱藏喔…

我們再看另一段源碼…

=====[ Code Start / JavaScript (MSIE 5.5 DOM), with (Jscript) Windows Script Host ]=====

lwRTE.prototype.disable_design_mode = function(submit) {
    var self = this;
    self.textarea = (submit) ? $(‘<input type=”hidden” />’).get(0) : $(‘<textarea></textarea>’).width(‘100%’).height(self.height).get(0);
    // …. 省略
    if(self.iframe.title)
        self.textarea.name = self.iframe.title;
    // …. 省略
    if(submit != true) {
        $(self.iframe).remove();
        self.iframe = null;
        self.activate_toolbar(self.textarea, self.toolbars.html);
    }
}

在lwRTE.disable_design_mode的作用是將 Editor 變更為純文字的編輯模式…
此函示中, 會依 submit 來決定是新增 HiddenField 還是 TextArea, 並將新增 Element 中的 name attribute 設定為 self.iframe 的 title attribute, 當 Postback 時, 才能將其 html 內容回傳…
在重複切換 html/css 多次後, 將會造成 self.textarea 多次 create & remove, 所以當 Postback 後, Server Side 會收到多份以原 textarea 為 name 以及同樣 name 的 HiddenField 資料…

不曉得原因為何, 但如果 jQuery 有確實 remove element 的話, 照理來說是不應該會有這種情況發生, 但為解決這個問題, 所以必須使用在上一篇提到的方法 Request.Form, 因為在ASP(ASP.NET)中, POST 收到的資料, 如果 name 相同的話, 將會以 Array String (string1, string2, …) 的方式傳送, 所以必須以Request.Form 的方式加以接收並擷取…

而擷取資料的方式為 :

=====[ Code Start / C Sharp (Include .NET Framework 2.0) ]=====

string[] arr = Request.Form.GetValues(TextBox1.UniqueID);
Label1.Text = arr[arr.Length – 1];

為何擷取最後一個的值, 因為 lwRTE 所插入的 HiddenField 是插入在原有 TextArea 的後面, 所以取最後一個才是正確的 html 內容

以上說明, 希望能幫到需要的人…