[HTML編輯器]C#編寫的HTML編輯器：原理篇

作者：光腳丫思考 時間：12/23/2009 1:51:00 PM

一開始就覺得HTML編輯器這玩意應該是很高深莫測的。隨隨便便就想整一個應該不是一件容易的事情。後來對WebBrowser控制元件有了一些瞭解，不過都是很膚淺的瞭解。只知道用這個控制元件就能夠在自己的程式中搞一個WEB瀏覽器之類的東西，從來沒有想過HTML編輯器也可以使用這個控制元件來實現。也就是說這個WebBrowser控制元件不僅僅能夠用來顯示HTML文件，而且也可以用來編輯HTML文件。當然了，這些功能微軟已經都提供給我們了。所需要做的就是按照那個規則去編寫自己的程式碼了。我想HTML編輯器的實現方式不應該只有這一種，只是我們不會就是了！^_^

先來看看我自己實現的這個小軟體，介面如下圖：

超級簡單的小軟體吧！

那個【文字下拉選單】是用來修改字型的，【加粗】按鈕是用來將字型加粗，或者讓其減肥的，【下劃線】按鈕則是為選中的文字加減下劃線的。最後那個【顯示原始碼】按鈕主要是為了看看修改之前和修改之後的HTML原始碼都做了那些改變。其他就沒什麼了。

下方的那塊大的空白區域，就是WebBrowser控制元件了，既是用來顯示HTML文件，也是用來編輯HTML文件的，在這裡只用作編輯器。

接著來看原始碼吧……

預設情況下，WebBrowser並沒有處於編輯模式，所以還不能對其文件進行編輯處理的。為了使其處於編輯狀態，可以在窗體載入事件的方法中新增如下程式碼：

private void MainForm_Load(object sender, EventArgs e) { this.webBrowser.DocumentText = string.Empty; this.webBrowser.Document.ExecCommand("EditMode", false, null); this.webBrowser.Document.ExecCommand("LiveResize", false, null); }

特別注意那個綠粗線畫的部分(EditMode)，這是關鍵點。不過似乎也不要忽略了為DocumentText賦值，不要讓這個值為null，否則的話連Document也null了，到時想要執行ExecCommand這個方法那是不成的。這點是在我編寫程式碼的時候無意發現的，它給我異常了。

有了上面這段程式碼，然後就會發現WebBrowser可以進行編輯了，開始有點像TextBox了，能夠輸入文字之類的東西了。

至於如何從系統中獲取所有的字型，並且將它新增到下拉選單中等等之類的程式碼就自己去看吧。接下來要看的是如何修改文件。先閱讀下面的程式碼：

private void BoldButton_Click(object sender, EventArgs e) { this.webBrowser.Document.ExecCommand("Bold", false, null); }

這段程式碼是那個【加粗】按鈕的Click事件處理程式碼。其中使用了Document物件的ExecCommand方法。第一個引數指定了要設定Bold，也就是字型的粗細。第三個引數是用來為第一個引數指定的屬性設定的值。Bold不需要這個引數值，所以為null。有些屬性需要這個值，比如FontName，在這個引數中就需要指定字型。具體細節參考MSDN。

說到這裡，基本上也就明白是怎麼回事了。

那麼可以設定的屬性都有那些呢？可以去這個網站自行檢視：

http://msdn.microsoft.com/en-us/library/ms533049(VS.85).aspx

有很多很多的！^_^

最後將完整程式碼附上：

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace HtmlEditor { public partial class MainForm : Form { public MainForm() { InitializeComponent(); } private void MainForm_Load(object sender, EventArgs e) { this.webBrowser.DocumentText = string.Empty; this.webBrowser.Document.ExecCommand("EditMode", false, null); this.webBrowser.Document.ExecCommand("LiveResize", false, null); foreach (FontFamily font in FontFamily.Families) { this.FontNamesComboBox.Items.Add(font.Name); } } private void BoldButton_Click(object sender, EventArgs e) { this.webBrowser.Document.ExecCommand("Bold", false, null); } private void ShowHtmlSourceButton_Click(object sender, EventArgs e) { MessageBox.Show(this.webBrowser.DocumentText); } private void FontNamesComboBox_SelectedIndexChanged(object sender, EventArgs e) { this.webBrowser.Document.ExecCommand("FontName", false, this.FontNamesComboBox.Text); } private void UnderlineButton_Click(object sender, EventArgs e) { this.webBrowser.Document.ExecCommand("Underline", false, null); } } }