Windows フォームの最も単純な HTML エディターは<div contenteditable="true"></div>、WebBrowserコントロールに を表示することです。次のような一般的な HTML テキスト編集機能のサポートが組み込まれています。
- Ctrl+B選択範囲を太字にする
- Ctrl+I選択範囲を斜体にする
- Ctrl+U選択範囲に下線を付ける
- Ctrl+Aすべてのテキストを選択するには
- Ctrl+C選択範囲をコピー
- Ctrl+X選択範囲を切り取る
- Ctrl+V選択範囲を貼り付ける
- Ctrl+Kリンクを挿入する
ただし、ユーザー エクスペリエンスを向上させるために、DOM オブジェクトを信頼してそのメソッドdocumentを使用WebBrowerしexecCommand、、、、、、、、、、、などのコマンドを簡単にBold実行できます。ItalicUnderlineInsertOrderedListInsertUnorderedListInsertImageFormatBlockForeColorBackColor
たとえば、次のコマンドは順序付きリストを挿入します。
webBrowser1.Document.ExecCommand("InsertOrderedList", false, null);
例 - Windows フォーム HTML エディター
ここでは、C# アプリケーションの例を共有し、HTML エディターを簡単に実装できることを示します。
public class HtmlEditor
{
WebBrowser webBrowser;
private dynamic doc;
private dynamic contentDiv;
public HtmlEditor(WebBrowser webBrowserControl, string htmlContent)
{
webBrowser = webBrowserControl;
webBrowser.DocumentText = @"<div contenteditable=""true""></div>";
webBrowser.DocumentCompleted += (s, e) =>
{
doc = webBrowser.Document.DomDocument;
contentDiv = doc.getElementsByTagName("div")[0];
contentDiv.innerHtml = htmlContent;
};
}
public string HtmlContent => contentDiv.InnerHtml;
public void Bold() { doc.execCommand("bold", false, null); }
public void Italic() { doc.execCommand("italic", false, null); }
public void Underline() { doc.execCommand("underline", false, null); }
public void OrderedList() { doc.execCommand("insertOrderedList", false, null); }
public void UnorderedList() { doc.execCommand("insertUnOrderedList", false, null); }
public void ForeColor(Color color)
{
doc.execCommand("foreColor", false, ColorTranslator.ToHtml(color));
}
public void BackColor(Color color)
{
doc.execCommand("backColor", false, ColorTranslator.ToHtml(color));
}
public void InsertImage(Image image)
{
var bytes = (byte[])new ImageConverter().ConvertTo(image, typeof(byte[]));
var src = $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
doc.execCommand("insertImage", false, src);
}
public void Heading(Headings heading)
{
doc.execCommand("formatBlock", false, $"<{heading}>");
}
public enum Headings { H1, H2, H3, H4, H5, H6 }
}
この HTML Editor クラスを使用するには、 にWebBrowserコントロールをForm用意し、次のようにエディターを初期化するだけで十分です。
HtmlEditor editor;
private void Form1_Load(object sender, EventArgs e)
{
var html = @"Some html content";
editor = new HtmlEditor(webBrowser1, html);
}
次に、 a を使用して使用ToolStrip可能なコマンドを表示し、コマンドを実行できます。例えば：
private void OrderedListButton_Click(object sender, EventArgs e)
{
editor.OrderedList();
}
private void ImageButton_Click(object sender, EventArgs e)
{
using (var ofd = new OpenFileDialog())
{
ofd.Filter = "Image files|*.png;*.jpg;*.gif;*.jpeg;*.bmp";
if (ofd.ShowDialog() == DialogResult.OK)
{
using (var image = Image.FromFile(ofd.FileName))
{
editor.InsertImage(image);
}
}
}
}