Wysiwyg-редактор с использованием контрола WebBrowser в приложении Windows Forms (.NET 2.0)
Задача: разработать простой wysiwyg-редактор для работы с html-документами в Windows Forms приложении.
Для решения поставленной задачи можно воспользоваться контролом WebBrowser, который позволяет внедрять Internet Explorer в WinForms-приложения.
Таким образом у нас будет готовый функционал для отображения html-документов. Но как решить главную задачу, связанную с визуальным редактированием?
Обратим внимание, что в интерфейсе IHTMLDocument2 существует свойство designMode, которое позволяет переводить документ во встроенный режим редактирования.
В итоге получается простой wysiwyg-редактор.
Приступим к разработке:
- В Visual Studio 2005 создадим новый проект "Windows Application"
- Подключим ссылку (Add Reference) на библиотеку COM - Microsoft HTML Object Library (mshtml.tlb)
- Разместим на форме контролы WebBrowser, ToolStrip, OpenFileDialog, SaveFileDialog и кнопки для открытия файла, сохранения и переключения режима отображения
- Напишем следующий код:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.IO;
namespace HtmlDesigner
{
public partial class frmMain : Form
{
// переменная, которая отвечает за режим отображения
private bool isDesignMode = false;
public frmMain()
{
InitializeComponent();
}
// открытие файла - отображаем с помощью WebBrowser
private void btnOpen_Click(object sender, EventArgs e)
{
if (opFile.ShowDialog() == DialogResult.OK)
{
webBrowser1.Navigate(opFile.FileName);
}
}
// обработчик события полной загрузки документа
// если наступает данное событие и включен режим дизайна, то автоматически переводим документ в режим дизайна
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
if (isDesignMode)
{
switchDesign();
}
}
// переключение в режим редактирования
private void ddbDesignOn_Click(object sender, EventArgs e)
{
isDesignMode = ddbDesignOn.Checked ? false : true;
ddbDesignOn.Checked = isDesignMode;
switchDesign();
}
private void switchDesign()
{
if (webBrowser1.Document != null)
{
// приводим к интерфейсу IHTMLDocument2
mshtml.IHTMLDocument2 currentDoc = (mshtml.IHTMLDocument2)webBrowser1.Document.DomDocument;
// переключение режимов
currentDoc.designMode = isDesignMode ? "On" : "Off";
}
}
// сохранение изменений в файл с указанием кодировки документа
private void btnSave_Click(object sender, EventArgs e)
{
if (svFile.ShowDialog() == DialogResult.OK)
{
StreamWriter writer = new StreamWriter(svFile.FileName, false, Encoding.GetEncoding(webBrowser1.Document.Encoding));
mshtml.HTMLDocument currentDoc = (mshtml.HTMLDocument)webBrowser1.Document.DomDocument;
writer.Write(currentDoc.documentElement.outerHTML);
writer.Close();
}
}
}
}
Пример работы приложения:

Исходный текст проекта: htmldesigner.zip
|