開發一個自己的HTML在線編輯器

原文地址：http://aspalliance.com/1092_Rich_Text_Editor_Part_I
[原文源碼下載]

開發一個自己的HTML在線編輯器（一）

摘要
在本文中，Haissam Abdul Malak將給大家詳細介紹如何使用javascript開發一個HTML在線編輯器，它可以應用於web應用程序中，特別是論壇，社區和博客。這個編輯器支持基於XHTML創建文本的功能。

原文發佈日期：2007.01.04
作者：Haissam Abdul Malak
翻譯：webabcd

文章內容
介紹
在用戶控件中添加HTML代碼
javascript文件
編輯器屬性
添加一個樣式表
結論

介紹
我的一個朋友在一個正在開發的項目（一個博客網站）中遇到了一些問題，是關於文本編輯器的。在研究了所有免費的編輯器之後，他發現沒有一個是他所需要的，所以我接下了這個任務，幫他開發一個HTML在線編輯器的用戶控件，我認爲和大家分享這個控件是個好主意，達到了知識共享的目的。

這個編輯器包括如下一些特性
1、工具欄包括了全部的功能（下面已列出）
    ·排列（居左，居中，居右）
    ·字體格式（加粗，下劃線，斜體，字號，字體，文字顏色）
    ·計算單詞數，刪除格式，插入水平線，撤銷，重複，插入字符

2、HTML模式結合到了一個框架中，文本模式結合到了另一個框架中。注意這兩個框架只能有一個被顯示。

3、有兩個圖標，分別是“HTML視圖”和“設計模式”，一個文本框用來顯示單詞數，最後有兩個隱藏文本框用來存儲用戶輸入的數據。

要看懂這個實例，你需要有javascript和HTML的相關知識。

在用戶控件中添加HTML代碼
這部分我們將創建一個用戶控件（hamHtmlEditor.ascx），並且在其中寫一些必需的HTML代碼。注意該用戶控件不包含<head>, <body> 或 <form> 標記。

我們將創建3個表格來顯示所有的圖標，另外還要有3個下拉列表框。其中2個表格放在控件的頂端，1個表格放在控件的底部。每個圖標都有3個事件，分別是onmouseover，onmouseup，onclick，處理這些事件的是javascript文件中的javascript代碼。把javascript代碼和HTML代碼分開，可以讓你更容易理解和調試。然後我們將創建3個層，第一個層包含一個已經有的HTML頁（TextArea.htm）。我使用一個HTML頁是因爲如果用戶輸入了一個rul，它可以自動的把它轉換爲HTML代碼並呈現在你的文本中。第二個層包括了1個textarea，在用戶使用期間，它用來顯示HTML代碼（默認隱藏）。第3個層包含了一些符號，當用戶點擊“插入符號”後，這個層將被現實（默認隱藏）。

爲了使用戶能夠輸入文字，你必須在控件被使用的時候，將其設置爲“設計模式”

列表1

οnlοad="document.frames['HamHtmlEditor1_content'].document.designMode='on'"

請下載這個項目以知道如何正確的創建所有的HTML標記
圖1

javascript文件
這部分我們將寫一些處理用戶事件的函數。首先，我們將定義一些全局變量，其中每一個變量都有自己的功能，但最多的是用來存儲圖標在被單擊之前或者默認的值—“No”。只有一個變量有另一個功能，這個變量是sourceText，它用來存儲用戶輸入的文本。

列表2

var sourceText= '';

var imgStatusBold = 'No';

var imgStatusItalic = 'No';

var imgStatusUnderLine = 'No';

var imgStatusLeft = 'No';

var imgStatusCenter = 'No';

var imgStatusRight = 'No';

var imgStatusRemoveF= 'No';

var imgStatusWCount = 'No';

var imgStatusInsertL = 'No';

基於上面這些變量的值，當用戶點擊了1個圖標，將檢查相關的變量是否是“Yes”，它用來指明相關的圖標並不是第一次加載時的圖標。當用戶控件全部加載完畢，我們將立即設置這些圖標爲他們的初始狀態，當我們需要改變圖標狀態的時候，如果原來的值爲“No”，就把它變爲“Yes”。

有三個功能分別被稱作onmouseover，onmouseup，和onclick。Onmouseover觸發函數ChangeImg()，作用是當用戶把鼠標放到圖標上則改變所顯示的圖標的狀態，這個函數需要兩個參數（容器ID和新圖標路徑）。注意工具欄上的圖標在web應用程序中被放置到“Images”文件夾下。

列表3

function ChangeImg(id, imgsrc)

{

var imgSrc = "Images/" + imgsrc;

document.getElementById(id).src = imgSrc;

}

Onmouseup函數的功能是用戶的鼠標離開一個圖標時，把這個圖標該回其初始的狀態，它需要3個參數（容器ID，新圖標路徑和1個變量）

列表4

function ReturnImg(id, imgsrc, ownVar)

{

if(ownVar == 'No')

{

var imgSrc = "Images/" + imgsrc;

document.getElementById(id).src = imgSrc;

}

第3個參數用來說明這個圖標是否是被選中的狀態，默認值是“No”。

單擊圖標後執行一個指定的動作，一個單獨的javascript方法被調用，每一個動作都有標準的寫法。

列表5

document.frames['HamHtmlEditor1_content'].document.execCommand('JustifyLeft',false,null);

使用上面這個方法可以使用戶輸入的文字居左。ExecCommand將在文檔中執行一個命令。它使用一個預先組合到一起的功能來直接在瀏覽器中操作頁面的佈局。注意，只有在頁面完全加載完畢後才能使用它。

列表6

function MakeBold(boldover, bold)

{

var img = document.getElementById('Bold')

var imgBold = "Images/" + boldover

var imgNotBold = "Images/" + bold

img.src = imgBold;

if(imgStatusBold == 'Yes')

{

imgStatusBold='No';

img.src = "Images/" + bold;

}

else

{

imgStatusBold= 'Yes'

}

document.frames['HamHtmlEditor1_content'].document.execCommand('bold',false,null);

document.frames['HamHtmlEditor1_content'].focus();

}

上面這段代碼的功能是使用戶輸入的文字加粗的。當用戶點擊了加粗按鈕，我們要改變這個按鈕的狀態。設置相關的全局變量爲“Yes”，意思是該按鈕已被選中。每次用戶單擊按鈕，我們都要檢查相關的變量，來確定之前按鈕是否是被選中的狀態，然後我們給選中的文字加粗。它需要兩個參數，第一個用來存儲鼠標經過時加粗按鈕的圖標路徑，第二個用來存儲正常加粗按鈕的路徑。相同的語法也在，斜體和下劃線中適用。

對文字進行排列，我們使用與MakeBold()相似的函數，但是，3個排列功能的按鈕只能有一個是被選中狀態，其它兩個要變爲初始的未被選中的狀態。

爲了完成上面指出的那個execCommand命令，請參考
http://www.course.com/downloads/newperspectives/crweb3/documents/dhtml_t02.html

現在我們創建一個計算用戶輸入的單詞數的函數。定義一個變量，默認值爲0。在定義另一個變量用來存儲用戶輸入的文本，我們將拆開這個變量，並且將拆開的結果保存到一個數組中，然後檢查數組內每個元素的長度，如果是零則不計數，如果不是零則計數變量加1。計數完後，我們把該值賦給用於顯示計數的文本框。

列表7

var wordCount = document.frames['HamHtmlEditor1_content'].document.body.innerText;

var count = 0;

countWithSpace = wordCount.replace('/n', '');

countWithoutSpaces = countWithSpace.split(' ');

for(i=0;i<countWithoutSpaces.length;i++)

{

if(countWithoutSpaces[i].length>0)

{

count +=1;

}

window.parent.document.getElementById('HamHtmlEditor1_TxtCount').value = count;

}

當單擊“刪除格式”按鈕後，我們調用一個javascript函數，發送命令“RemoveFormat”給execCommand用來刪除選中文本的格式。

如果想刪除某些已經有格式的文本的格式，這個功能將是非常有用的。

列表8

function RemoveFormating()

{

document.frames['HamHtmlEditor1_content'].document.execCommand('RemoveFormat');

document.frames['HamHtmlEditor1_content'].focus();

}

“撤銷”和“重做”功能與上面這段javascript類似。給execCommand發送“undo”或“redo”將執行撤銷和重做功能。需要一個參數來指明命令的名字。

列表9

function Formats (style)

{

document.frames['HamHtmlEditor1_content'].document.execCommand(style);

document.frames['HamHtmlEditor1_content'].focus();

}

當用戶單擊“插入符號”按鈕，我們將在該按鈕之後顯示第3個層來出示所有符號圖片。我們使用javascript來做這件事。

列表10

function ShowDiv(images)

{

var div = document.getElementById(images);

if(div.style.display == 'block')

div.style.display = 'none';

else

div.style.display = 'block';

}

圖2：用戶單擊“插入符號”後，編輯器的外觀

當用戶點擊第3個層的任意一個符號時，另一個javascript函數被調用，它用來在編輯器中指針的位置處插入符號。這個函數需要3個參數。第一個參數用來指定execCommand的命令來在文檔中插入一個圖片（InsertImage），第二個參數是圖片的路徑，第三個參數是該圖片所在的層的id。注意所有的符號在web應用程序中被放置在一個“Emoticons”文件夾下。

列表11

function insertImages(style,url,images)

{

document.getElementById(images).style.display = 'none'

document.frames['HamHtmlEditor1_content'].focus();

HamHtmlEditor1_content.document.execCommand(style,'',url)

document.frames['HamHtmlEditor1_content'].focus();

}

當單擊“HTML視圖”按鈕後，第二個層被顯示，而第一個層則被隱藏。這個層的“readonly”屬性被設置成了“true”，意思是用戶在此狀態下不能對其編輯，我們只能在這個層裏看到HTML代碼。

列表12

function TransformtoHtml()

{

document.getElementById('HamHtmlEditor1_Div2').style.display = 'block';

document.getElementById('HamHtmlEditor1_Div2').innerText =

document.frames['HamHtmlEditor1_content'].document.body.innerHTML;

}

當單擊“設計模式”按鈕後，第二個層則被隱藏

列表13

function TransformToText()

{

document.getElementById('HamHtmlEditor1_Div2').style.display = 'none';

}

下拉列表用來讓用戶選擇預先設定好的數據。

第一個是字號，尺寸在1（10pt）到7（22pt）之間。這個按鈕被單擊後，要調用一段javascript函數。這個函數獲得用戶在下拉列表裏選擇的值，然後作爲第三個參數發送給execCommand。第一個參數是“FontSize”，用來執行設置文字大小的命令。注意，下拉列表中的字號大小是預先在用戶控件中的HTML代碼裏定義好的。

列表14

function ChangeFont()

{

var fontSize = document.getElementById('FontDropDownonchange');

document.frames['HamHtmlEditor1_content'].document.execCommand('FontSize',0,fontSize.options[fontSize.selectedIndex].text);

document.frames['HamHtmlEditor1_content'].focus();

}

接下來這段代碼用來改變字體。第一個參數是“FontName”，用來執行設置文字字體的命令，第二個參數是false或者0，第三個參數是用戶所選擇的文字。

列表15

function ChangeFontName()

{

var fontName = document.getElementById("FontFamilyName");

document.frames['HamHtmlEditor1_content'].document.execCommand('FontName',false,fontName.options[fontName.selectedIndex].text);

document.frames['HamHtmlEditor1_content'].focus();

}

第三個下來列表用來選擇所選文字的顏色。這些顏色是預先定義好的，如果你想可以設置更多的顏色，請修改相關的HTML代碼。

列表16

function ChangeFontColor()

{

var fontColor = document.getElementById("Color");

document.frames['HamHtmlEditor1_content'].document.execCommand('ForeColor',false,fontColor.options[fontColor.selectedIndex].text);

document.frames['HamHtmlEditor1_content'].focus();

}

最後的功能用來把用戶輸入的文本值存儲到一個隱藏字段中，其詳細的HTML值存儲到另一個隱藏字段中。這樣即使編輯器失去焦點，也可以獲取到值，下一部份你可以看到在編碼的過程中通過使用兩個屬性來取得隱藏字段的值。

列表17

function CloneText()

{

document.getElementById('HamHtmlEditor1_ContentTxt').innerText = document.frames['HamHtmlEditor1_content'].document.body.innerText;

document.getElementById('HamHtmlEditor1_ContentHtml').value = document.frames['HamHtmlEditor1_content'].document.body.outerHTML;

}

這部分完成後，你的javascript文件就準備完了。你如果想在你的用戶控件中使用這個文件，就需要在代碼中加入<head>標籤。如下

如果你想調試javascript，需要加一個詞“debugger”。這樣編譯時將開始調試模式。或者你也可以設置你的IE瀏覽器，把“禁用腳本調試（Internet Explorer）”和“禁用腳本調試（其他）”兩個複選框的選中狀態取消，然後添加你的端點。（譯者注：調試js可以參考這篇文章：在Visual Studio中調試JavaScript）

編輯器屬性
如果想將用戶輸入的文本保存爲.txt文件或者把HTML代碼保存到另一個.txt文件，你可以在這個控件中添加以下兩種屬性：

首先在你的ascx.cs頁面創建兩個字段。

列表18

protected System.Web.UI.HtmlControls.HtmlInputText ContentTxt;

protected System.Web.UI.HtmlControls.HtmlInputText ContentHtml;

創建兩個被保護的變量，保存以上創建的字段的值。

列表19

protected string _text;

protected string _html;

第一個屬性被稱爲“ContentText”，它可以獲取文本並在你的後置代碼中賦值給一個變量。

ContentTxt被聲明成一個HtmlInputText控件，它的Value屬性被存儲到_text字符串變量中。

列表20

public string ContentText

{

get

{

return _text = ContentTxt.Value;

}

set

{

_text = value;

}

第二個屬性被稱爲“ContentInnerHtml”，它可以獲得詳細的HTML代碼。

ContentHtml被聲明成一個HtmlInputText控件，它的Value屬性被存儲到_html字符串變量中。

列表21

public string ContentInnerHtml

{

get

{

return _html = ContentHtml.Value;

}

set

{

_html = value;

}

添加一個樣式表
在這部分我們將創建一個樣式表（Styles.css），用來修改工具欄和框架的UI。我們將設置工具欄的背景顏色爲藍色。框架右側和底部的也設置成相同的顏色。通過修改下面的代碼，你可以隨便設置控件的界面（UI）。
列表22

.HtmlView

{

background-color:white;

border-bottom-width:medium;

border-bottom-style:solid;

border-bottom-color:cornflowerblue;

border-right-width:medium;

border-right-color:cornflowerblue;

border-right-style:solid;

}

.FirstDiv

{

background-color:white;

border-bottom-width:medium;

border-bottom-style:solid;

border-bottom-color:cornflowerblue;

border-right-width:medium;

border-right-color:cornflowerblue;

border-right-style:solid;

}

.toolbar

{

background-color:cornflowerblue;

background-repeat:repeat;

}

現在在你用戶控件的<head>標籤內鏈接上這個樣式表，代碼如下：

圖3

注意如果你要在用戶控件中包含多個實體，你必須爲這些div層創建動態的標識。請注意，div層的ID被設置成了“userControlID_divlayer”。

結論
我們可以看到，開發你自己的HTML在線編輯器並不是很困難。在這篇文章裏我詳細的解釋了javascript語言和XHTML。這是HTML在線編輯器的第一個版本，我們非常感謝你使用它並且提供給我們你的意見。它的第二個版本，將會有更多的特性，如果你有什麼好的注意，歡迎告訴我們。我們目前正在開發第二個版本，它也將通過這個網站發佈出來，其會增加複製，粘貼，剪切，項目符號，項目編號，打印等功能以及一個可自定義的工具欄。

希望這篇文章有閱讀的價值。

[原文源碼下載]

祝編程愉快！

原文地址：http://aspalliance.com/1156_Rich_Text_Editor__Part_II
[原文源碼下載]

[翻譯]開發一個自己的HTML在線編輯器（二）

原文發佈日期：2007.02.27
作者：Haissam Abdul Malak
翻譯：webabcd

文章內容
介紹
 javascrit文件
 後置代碼
 結論

 介紹
在我們一起研究瞭如何開發一個HTML在線編輯器後（第一部分在這裏 http://aspalliance.com/1092_Rich_Text_Editor_Part_I ）（譯者注：中文在這裏），現在來給它增加一些特性，擴展它的功能，使它更實用。本文我們將瞭解這些新的特性是如何實現的，所有的新增功能都是用javascript來寫的。

從之前的文章你看到了開發一個你自己的HTML在線編輯器是多麼簡單。當然，我們的第一個版本只包括一些標準功能，現在，我們要給它增加一些新的功能，我敢說，它將包括更多的特性並且更加實用。

下面列出這些新增的特性
1、刪除線：可以給用戶輸入的文本增加刪除線
2、減少/增加縮進：可以減少或增加文本的縮緊
3、插入圖片：可以新開一個窗口讓用戶選擇需要上傳的圖片，然後直接插入到編輯器裏
4、複製，剪切和粘貼：通過剪切板實現複製，剪切和粘貼的功能
5、打印：在文本模式的時候可以調出打印對話框進行打印
6、項目符號和編號：可以在文本的開頭增加項目符號和編號
7、插入線：可以在文本中插入一條線

在我們的用戶控件裏增加一些HTML代碼
這部分我們將在工具欄處增加一些新的HTML元素。我們主要是放置了一些圖片，爲了實現上面提及過的行爲並且處理這些事件以實現它們的功能。

列表1

<IMG class=StrikeOut id=Strikethrough

onmouseover="ChangeImg('Strikethrough','strikethrough.over.gif')"

title="Strike Through" onclick="Formats('StrikeThrough','<%= this.HamEditorChildID %>' )"

onmouseout="ReturnImg('Strikethrough','strikethrough.gif',imgStatusUnderLine)"

src="Images/strikethrough.gif" />

上面的列表增加了一個img的HTML控件，它的onmouseover事件將調用一段javascript函數（我之前的文章已經對此解釋過了），以改變圖片的選中狀態，onclick事件將調用另一段javascript函數以得到選中的文本，onmouseover將返回圖片最初的狀態。本次新增的功能除了插入圖片外都將使用於此相同的概念。

請下載源碼以查看所有的HTML標籤是如何創建的

圖1

javascript文件
這一部分我們將在已經創建好的javascript文件內增加一些新的功能，從而去處理這些新特性的事件。所有的這些功能都被定義到了這個javascript文件內，然後被編輯器引用

列表2

function Formats(style,editorId)

{

// 存儲Iframe的id

var finalDivId = editorId + '_content';

// 設置焦點

document.frames[finalDivId].focus();

// 應用新的命令

document.frames[finalDivId].document.execCommand(style);

// 設置焦點

document.frames[finalDivId].focus();

}

本文所列的幾乎所有的新增的事件處理都會使用上面的功能。它有兩個參數：第一個參數是需要應用的命令，例如複製、粘貼之類的沒；第二個參數是編輯器的id。我們使用一個相同的功能（execCommand）來應用這些變化。

列表3

function SetBorders(id)

{

// 設置onmouseover事件時表情圖片的邊框樣式

var imgBorder = document.getElementById(id);

imgBorder.style.borderStyle = "solid";

imgBorder.style.borderWidth = "thin";

imgBorder.style.borderColor = "#688B9A";

}

在插入表情的時候將會調用上面的函數。當鼠標經過了一個表情文件，我們將會調用這個函數設置表情圖片的邊框。用這種方法，可以方便用戶觀察到鼠標是經過了哪一個表情圖片。注意我們增加了一個“x”圖片，用於當用戶不需要選擇任何表情圖片的時候關閉div層。

圖2

列表4

function ClearBorders(id)

{

// 清除onmouseover事件時表情圖片的邊框樣式

var imgBorder = document.getElementById(id);

imgBorder.style.borderStyle = "solid";

imgBorder.style.borderWidth = "thin";

imgBorder.style.borderColor = "white";

}

當鼠標離開一個表情圖片的時候清除它的邊框樣式則調用這個函數

列表5

function SetImage(editorId,path,e)

{

// 獲得單擊位置

var height = e.clientY + parseInt('5');

// 獲得被單擊圖片的高度

var offsetHeight = parseInt(e.offsetY);

height = height - offsetHeight;

// 獲得單擊位置（寬）

var width = e.clientX

// 獲得被單擊圖片的寬度

var offsetWidth = parseInt(e.offsetX);

width = width - offsetWidth;

// 存儲iframe的id

var finalDivId = editorId + '_content';

path = unescape(path);

// 從用戶的電腦裏插入一個圖片

window.open('UploadImages.aspx?path=' + path +

'&f=' + finalDivId,null,'width=500px,height=50px,titlebar=no,menubar=no,statusbar=no,toolbar=no,top='

+ height + 'left=' + width );

}

我們創建了一個新的被稱作UploadImages.aspx的webform，它來實現插入圖片的特性。當用戶單擊了插入圖片的圖標後，這個form被打開，它允許用戶從他/她的電腦內選擇一個圖片上傳到服務器從而實現把圖片插入到編輯器內的功能。這個webform還包括了兩個文本框，用於讓用戶指定他/她上傳圖片後圖片所顯示的寬度和高度。當這個webform打開的時候顯示如下

圖3

用戶已經可以瀏覽他/她的電腦選擇一個圖片並上傳到服務器了，我們是在後置代碼中處理文件上傳的。我提供了一個選項，可以讓管理員設置圖片上傳到服務器後所存放的目錄。我將在後置代碼的部分中詳細解釋這些。我們規定高度屬性的最小值爲100px，寬度屬性的最小值爲150px，並且這也是默認值

列表6

function insertsImage(imageurl,editorId,height,width)

{

opener.document.frames[editorId].focus();

if(imageurl != "" | editorId!= "")

{

imageurl = unescape(imageurl);

var imageurl = imageurl + '"' + "width=" + width + "px" + " " + "height="+ height + "px";

opener.document.frames[editorId].document.execCommand('InsertImage',false,imageurl);

}

opener.document.frames[editorId].focus();

}

當用戶點擊了插入圖片後將調用這段函數。在這個單擊事件中，我們上傳了文件並且通過javascript把這個圖片插入到編輯器中，顯示的寬度和高度就是我們所指定的

圖4

後置代碼
這部分我們將瞭解如何在後置代碼中實現上傳圖片的功能，並且將知道管理員如何設置圖片上傳的路徑。

列表7

public string FilePath

{

get

{

return _filePath;

}

set

{

_filePath = Server.HtmlEncode(Request.ApplicationPath + value);

}

上面的這個string類型的屬性用於讓管理員設置圖片上傳的默認路徑。接下來的列表將告訴你如何在你的webform中指定這個路徑。

列表8

string imagePath = "/UserImages";

((hamHtmlEditor)this.FindControl("HamHtmlEditor1")).FilePath = imagePath;

列表9

public string Location

{

get

{

return _location;

}

set

{

_location = value;

}

爲了使圖片上傳到web服務器後可以直接插入到編輯器裏，我們需要使用上面這個屬性，它用於獲得編輯器的ID

列表10

if (heightValidator.IsValid && widthValidator.IsValid)

{

string elementToInsert = Request.QueryString["f"];

if(UploadImage.PostedFile != null && UploadImage.PostedFile.ContentLength > 0)

{

try

{

string fileName = System.IO.Path.GetFileName(UploadImage.PostedFile.FileName);

string fileLocation = Request.QueryString["path"] + "/" + fileName;

this.ImagePath = Server.HtmlEncode(fileLocation);

this.Location = elementToInsert;

Button1.Enabled = false;

UploadImage.PostedFile.SaveAs(Server.MapPath(fileLocation));

}

catch(Exception ex)

{

Response.Write("<script language=javascript>alert('"+ex.Message.ToString().Replace(@"/",@"//")+"');</script>");

}

finally

{

Button1.Enabled = true;

}

上面這段代碼是寫在插入圖片按鈕的點擊事件裏的。它的作用是上傳圖片到指定的路徑，try catch塊用於處理異常事件。

注意：有一個要非常注意的地方就是ASPNET（注：windows 2003 下是NETWORK SERVICE）用戶是否有你的上傳目錄的寫入權限。

列表11

public bool ShowHeader

{

get

{

return _Header;

}

set

{

_Header = value;

}

這是一個Boolean類型的屬性。如果設置它爲false則工具欄不會顯示。

圖5

當你把ShowHeader屬性設置爲false的時候編輯器顯示如上。工具欄和其他的圖標都將被隱藏。

圖6

這就是增加了一個新的特性之後的編輯器的最終版本

結論
這個編輯器的版本只在IE中進行了測試。下一個版本中我將讓它在更多的瀏覽器中工作。如果你有增強這個編輯器功能的建議或者提出其中的bug，我將非常歡迎。我也會把它封裝成一個自定義控件，使你能更簡單的使用它。希望你能從本文中獲得一些有用的信息。

[原文源碼下載]

開發一個自己的HTML在線編輯器

聊天室關鍵技術[用戶斷線]處理

用Session當變量使用

session與cookie與Application

網頁防刷新重複提交、防後退解決方法

積累經驗，總結看到的好帖子。

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結