WebBrowser 控制元件設計模式設定

pb8發表於2010-01-02
Web控制元件設計模式


當使用此元件時，會自動應用設計模式，併為文件建立一個編輯模板。但是，作為參考，下面簡單說明這是如何實現的。

應用設計模式需要使用 COM 介面，新增一個 MSHTML 的 "Microsoft HTML Object Library" 的引用，並新增一個對 'MSHTML' 的 'using'。

在把改變寫入到 DOM 文件之前，有必要新增一個 body 到控制元件。要這樣做，你可以簡單地設定一些文字到 WebBrowser 控制元件的 DocumentText 屬性中。

webBrowser1.DocumentText = "<html><body></body></html>"
下面的程式碼可以取得新的 DomDocument COM 介面的引用，並設定設計模式為 "On"。

IHTMLDocument2 doc =webBrowser1.Document.DomDocument as IHTMLDocument2;doc.designMode = "On";
最後，我把 WebBrowser 控制元件的上下文選單替換掉，這樣 IE 瀏覽器的預設上下文選單就不會顯示出來。

webBrowser1.Document.ContextMenuShowing += new HtmlElementEventHandler(Document_ContextMenuShowing);
瀏覽器現在處於設計模式中，使用一個自定義方法來顯示指定的上下文選單。

格式化文字
使用 browser.Document 中的 ExecCommand 方法，你可以把格式和編輯功能應用到設計模式下的瀏覽器控制元件。

下面是一些例子：

public void Cut(){ webBrowser1.Document.ExecCommand("Cut", false, null);}public void Paste(){ webBrowser1.Document.ExecCommand("Paste", false, null);}public void Copy(){ webBrowser1.Document.ExecCommand("Copy", false, null);}
某些命令用於繫結(顯示)當前選區的格式。

public void Bold(){ webBrowser1.Document.ExecCommand("Bold", false, null);}public void Italic(){ webBrowser1.Document.ExecCommand("Italic", false, null);}
同步重新整理選定文字的格式按鈕
下面介紹一些比發出格式化命令到瀏覽器更有用的技巧。每 200 毫秒，我逐一查詢瀏覽器編輯選區的狀態，並據此設定工具欄格式按鈕的狀態。

private void timer_Tick(object sender, EventArgs e){ SetupKeyListener(); boldButton.Checked = IsBold(); italicButton.Checked = IsItalic(); underlineButton.Checked = IsUnderline(); orderedListButton.Checked = IsOrderedList(); unorderedListButton.Checked = IsUnorderedList(); linkButton.Enabled = SelectionType == SelectionType.Text; UpdateFontComboBox(); UpdateFontSizeComboBox(); if (Tick != null) Tick();}
你可能已經注意到這兒使用了一個 Tick 計時器事件。外部的元件可以訂閱此事件來更新 GUI 的狀態。舉例來說，它們將基於編輯器控制元件的狀態，重新整理“剪下/複製/貼上/撤銷/重複”(操作)的 Enabled 狀態。

我通過使用從 WebBrowser 控制元件返回的 COM 文件介面，來完成此任務，先使用：

IHTMLDocument2 doc = webBrowser1.Document.DomDocument as IHTMLDocument2;
然後，使用 queryCommandState  方法來確定當前選區的狀態：

public bool IsBold(){ return doc.queryCommandState("Bold");}public bool IsItalic(){ return doc.queryCommandState("Italic");}public bool IsUnderline(){ return doc.queryCommandState("Underline");}
連線按鈕和字型控制元件以一種簡單的方式管理，但我將會保留以程式碼檢測的方法。

取得焦點
讓控制元件取得焦點不一定是簡單的。 WebBrowser 控制元件本身不接受焦點。 WebBrowser 控制元件的文件也不接受焦點。但是，body 會取得焦點，可以假定有一個 body 元素在控制元件中。

private void SuperFocus(){ if (webBrowser1.Document != null &&  webBrowser1.Document.Body != null) webBrowser1.Document.Body.Focus();}
當然，你決不需要直接呼叫此方法。在控制元件上呼叫 Focus 方法，會把焦點放置到包含了 WebBrowser 控制元件的編輯器控制元件上。當接收到 GotFocus  事件時，編輯器控制元件會自動把焦點轉到 WebBrowser 控制元件文件的 body 上。

取得文字或 HTML
分別使用 BodyHtml 和 BodyText 方法，可以返回 HTML 和文字。

連線到元件程式集
在 Visual Studio 2005 中，你可以連線到一個程式集 (新增一個引用)，即使程式集是可執行的(檔案)。此編輯器是作為內嵌在窗體的元件來編寫的，因此你可以把這個元件新增到控制元件皮膚上，並把它拖放到你的應用程式中。此控制元件的名稱為 Editor，在名稱空間 Design 中。

結束語
.NET 2.0 中的 WebBrowser 控制元件可以作為一個有效的文字編輯器來使用。當你需要一個 HTML 編輯器控制元件時，它很有用。但是在某些範圍內，不能完全直接地使用 WebBrowser 控制元件來實現。本文試圖展示一些讓它工作的必要技巧

相關文章