Category Archives: IT:HTML & Script Language

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 內容

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

Lightweight Rich Text Editor (RTE / WYSIWYG) plugin for jQuery

幾年前因工作需求, 必須使用 HTML Editor WebControl, 找了幾個 3thParty Control, 都無法完全符合需求, 而且最重要的一點, 因為都要付費…

所幸翻出 M$ 提供的 HTML Editor 範例, 自行修改成符合工作需求的 WebControl, 修改完後卻發現非百分百相容於 Firefox, 鴕鳥心態一起, 乾脆不理 Firefox 的 User, 畢竟是企業內部使用, 可以利用行政命令強制使用IE…

直到個人所經營的 BicycleMap 也必須用到 HTML Editor, 而也因為這個 HTML Editor 常常被車友罵到臭頭, 痛定思痛, 花個幾天時間找到了 Lightweight Rich Text Editor (RTE / WYSIWYG) plugin for jQuery, 並修改部分功能, 如多檔上傳等功能…

此Plugin的使用方式非常簡單, 只要對 JavaScript & jQuery 有相當程度的瞭解, 即可馬上上手…
而用在 ASP.NET 中的方式, 簡直無技巧可言, 只需放入一個 MultiLine 的 TextBox, 再加上一段 jQuery 語法的 JavaScript Code 即可使用…
Postback 後, Server 端的接收方式, 直接讀取該 TextBox.Text 即可收到其內容, 但須注意的是, 如果曾在此 Editor 上切換 html/css 時, 其接收方式就必須改為 Request.Form 的方式接收, 否則會收到兩份以上的內容, 其原因容後再敘…

AJAX & ASP.Net PostBack

自ASP"升級"成為ASP.NET後,出現了一個ASP所沒有的名詞:PostBack,而PostBack讓開發WebApp變的簡單了,但卻也讓Server端的Loading變得重了。

最近聲名大噪的AJAX(Asynchronous JavaScript And XML;非同步的JavaScript和XML)其實不是一項新技術,它早在IE 5的時代就已經出現了,AJAX主要的核心技術就是XMLHttpRequest,專注於開發WebApp的先進們,對XMLHttpRequest應該不陌生,當時的XMLHttpRequest是以ActiveX型態出現的,而且只能適用於IE平台,所以使用的人少之又少,隨著Atlas的引入,以及M$對AJAX的大力支持,使得越來越多的網站使用AJAX技術,譬如目前最有名的Google Maps,以及前一陣子改版的Yahoo!奇摩字典等等。

ASP.NET使用PostBack的方式來更新網頁,這會將網頁上的所有欄位資料傳回伺服端(Server),處理完畢後再傳給使用端(Client),這樣不但會浪費伺服端的資源,還會浪費網路的有效傳輸,這是該讓ASP.NET WebApp Designer好好思考的議題。

也因為PostBack,養成了ASP.NET WebApp Designer的一些壞習慣:所有驗證動作都用PostBack,完全不考慮伺服器、頻寬的負載;一昧的要求硬體升級、頻寬升級,落得"網站設計師只是賠錢貨"的名聲;不但如此,也讓Designer忽略或忘記了有JavaScript這個使用端腳本語言,甚至一聽到JavaScript就害怕,因為JavaScript沒有一個好用的Debugger…

以專案的進行,主管通常不會要求使用AJAX技術,因為要趕時程,所以都會要求能以最短的開發時程為第一優先考慮,假如還有時間的話,才會考慮去改善程式效能,但是到最後… 通常都會沒有時間…

PostBack並不是那麼的一無是處,AJAX也不是那麼的"無敵";AJAX用的不好,不但無法降低伺服端資源與頻寬的浪費,反而會更甚,進而影響使用端的操作效能;但假如PostBack與AJAX一起使用的話,我想不但能有更好的效能,還可以有更大的彈性開發WebApp。

更改 IE 的原始碼檢視器設定

這個修改可以解決開啟大原始檔案緩慢或是超過 Notepad 限制大小的問題,因為當原始檔案很大,連想要捲動內容頁時,對 Notepad 來說都是一個大問題。

直接修改這個 Registry 值 (如果沒有的話自行新增):
[HKEY_LOCAL_MACHINESOFTWAREMicrosoftInternet ExplorerView Source EditorEditor Name]

可改成使用 EditPlus 來讀取,或是使用其它自己慣用的文字編輯器。
C:Program FilesEditPlus 2editplus.exe

[HTC] VisualWindow

這是前陣子看到MSN個人分享空間裡,有個可拖拉的虛擬視窗功能,試著用HTC去寫看看…
原以為HTC(HTML Component)非常複雜,沒想到卻是如此簡單…
對本程式有興趣的朋友可以按以下連結下載,內涵說明檔與範例…
HTC Sample – VisualWindow

PS: 寫的不是很好,各位請別見怪… ^^

[JavaScript] Custom Menu…

前陣子公司下給我個命令…
要我去評估公司內部導入SPS(SharePoint Portal Server)的可行性…
大概看了一下功能以及架構… 依我公司內部行政流程以及業務推行來說… 雖然不適合導入…
但我比較好奇的是他的Web UI控制… 深深的影響我日後所開發的系統的UI…
舉個例子… 在SPS中, Content Menu不是IE一成不變的選單, 而是自訂的功能選單…
等等的… 我也一時手癢… 寫個MenuCreater… 用JavaScript所開發…
有興趣的可以按以下連結下載… 內有範例…
JavaScript Code : MenuCreater

等比較有空閒的時候…
我再把這個MenuCreater改成HTC(HTML Component)以及.NET Custom Web Component
也會把一些自己開發且認為好用(不好意思)的程式碼丟上來…

[JavaScript] Date自訂函數…

不知大家有沒有碰過跟我一樣的情形… 讓M$的VB給養成壞習慣了…
在VB裡… 有很多關於日期時間的運算函式…
譬如:DateDiff(), Format(日期表示式), DateAdd()… 等等…
但是在JavaScript中卻沒有這些方便的函式可用…
小弟就乾脆改寫個自用的日期自訂函數來用…
當該網頁需要用到日期函式時, 我都會先宣告…
<script language=”javascript” src=”DateExpFunction.js”> </script>
這樣… 當你在JacaScript中建立一個新的Date物件時, 會自動使用這個新的物件函數… 譬如:
var Today = new Date();
alert(‘今天是:’ + Today.toFormat(‘yyyy/mm/dd’));
alert(‘現在時間是:’ + Today.toFormat(‘HH:nn:ss’));
alert(‘十天後為:’ + Today.DateAdd(‘d’, 10));
alert(‘五天前為:’ + Today.DateAdd(‘d’, -5));
alert(‘2005/01/01距離今天為:’ + Today.DateDiff(‘d’, ‘2005/1/1’));
你看… 這樣是不是很方便呢!?

程式下載…
JavaSctipt Custom DateTime Object

[HTML] 字串自動截斷…

通常我們在製作網頁時,假如要在Table裡面的某一個TD放入一些文字時,這些文字又太長,會將字串自動斷行,或是把TD拉長,真是討厭…

這時候我們可以用DIV Tag & Style的指令做到自動截斷的功能…
例如語法:
<div style=”border-style:solid; border-width:1px; width: 200px; text-overflow: ellipsis; overflow: hidden“><nobr>ABCDEFG HIJKLMNOP QRSTUV WXYZ</nobr></div>
語法結果:

ABCDEFG HIJKLMNOP QRSTUV WXYZ

重點是text-overflow、overflow還有DIV Tag的寬度,假如沒有設定DIV Tag的寬度的話,就算有設定text-overflow與overflow也沒用

text-overflow有兩個字串參數 ellipsis 與 clip
ellipsis會在最後被截斷的地方顯示”…”
overflow有四個字串參數visible、scroll、hidden以及auto…

  1. visible會將字串內容毫無保留的顯示出來而不理會DIV的寬度設定
  2. scroll會依照DIV的寬度而出現捲軸列
  3. hidden會將超過寬度的文字截斷也就是隱藏後面的文字
  4. auto網頁自動判斷

以上方法非常好用,但是有個缺點:必須設定DIV的寬度,當頁面大小變更時,就必須重新設定DIV的寬度,而且寬度設定不允許用百分比的方式設定

假如我要用百分比的方式設定寬度,又要能夠自動截斷字串的話該怎麼辦勒?!用INPUT Tag Type=”text”就可以了…

請試一下以下語法:
<input type=”text” name=”T1″ size=”20″ style=”border-style: solid; border-width: 1;width: 200px;cursor:default” value=”ABCDEFG HIJKLMNOP QRSTUV WXYZ” readonly/>
語法結果:

怎麼樣!?語法結果是不是與使用DIV的方法差不多呢!?
雖然INPUT Tag並不是正統的方法,但利用TextBox本身的截斷作用,也可以做到自動截斷的效果,而且當你將寬度以百分比的方式設定時,網頁變更大小時,也會跟著網頁變動呦…

text-overflow MSDN說明:http://msdn.microsoft.com/…
overflow MSDN說明:http://msdn.microsoft.com/…

Copyright © 2017. Powered by WordPress & Romangie Theme.