WinForm 上的富文本编辑器简直不要太少，虽然有 RichEdit，但是这个鬼极难用而且复杂，在插入图片和表格的时候简直抓狂，还要理解复杂的 RTF 格式。
我希望有一个文本控件，包括基本的格式设置，图片表格插入等，能够自定义打开文件，保存和插入图片等功能，并且它的依赖项要尽可能少，因为是 WinForm 控件，也不用需要跨 Linux 和 Osx 平台，只用在 Windows 下保持兼容就行。这么一来，似乎并没有好的免费控件可用了 ...
但是，Js 的这类控件就比比皆是了，有没有办法移到 C# WinForm 上来用呢，答案当然是 YES!
首先要显示 HTML页面和JS的执行，必须要由 WebBrowser 控件承载，所以我们的整个编辑器都会在 WebBrowser 中呈现。接下来是编辑器控件了，尽量轻量级，最好是美观点，文档全面，接口丰富的，我找到我用过的一款。
summernote https://github.com/summernote/summernote/
接下来是编辑器的界面了，创建一个 HTML 页面，呈现编辑器，并设置编译方式为嵌入的资源，将所有的脚本文件内容全部和样式内容写在这个 HTML 页面中，这样一来，页面可能达到惊人的几百 KB，不过这没关系，除了脚本之外，还会有字体资源，关于字体资源如何嵌入在 CSS 中，可以通过下列方式：
@font-face {
font-family: "name";
font-style: normal;
font-weight: normal;
src: url(data:font/truetype;charset=utf-8;base64,XXX);
}
需要注意的是 WebBrowser 是 IE 核心，所以只需要 eot 格式的字体即可。关于如何将字体生出你个 Base64 字符串，猛击 http://www.motobit.com/util/base64-decoder-encoder.asp
编辑器的事件，我们写成接口，由调用方自行实，分别是保存按钮、打开文件按钮、插入图片按钮，异常等事件。
public interface IKBrowserEventListener
{
void onSaveClicked();
void onOpenFileClicked();
void onInsertImageClicked();
void onError(Exception ex);
}
如何直接使用 WebBrowser 控件的话，会有一些奇怪的问题，比如阻止脚本错误执行的对话框依旧会执行 ... 可是直接使用 COM+ 接口 IWebBrowser2，需要引用 Microsoft Internet Controls。
public class KBrowser : System.Windows.Forms.WebBrowser
{
private SHDocVw.IWebBrowser2 Iwb2;
public KBrowser()
{
NewWindow += KBrowser_NewWindow;
}
private void KBrowser_NewWindow(object sender, System.ComponentModel.CancelEventArgs e)
{
KBrowser kb = sender as KBrowser;
string url = kb.StatusText;
Navigate(url);
e.Cancel = true;
}
protected override void AttachInterfaces(object nativeActiveXObject)
{
Iwb2 = (SHDocVw.IWebBrowser2)nativeActiveXObject;
Iwb2.Silent = true;
base.AttachInterfaces(nativeActiveXObject);
}
protected override void DetachInterfaces()
{
Iwb2 = null;
base.DetachInterfaces();
}
}
接下来编辑器控件可以用用户控件，拖一个 KBrowser即可，Dock 为 Fill 铺满整个控件。它至少拥有下列属性：
/// <summary>
/// 编辑器的事件监听器
/// </summary>
public IKBrowserEventListener KBrowserEventListener { get; set; }
/// <summary>
/// 获取或设置编辑器中Html值
/// </summary>
public string Html
{
get
{
try
{
return kBrowser1.Document.InvokeScript("getHtml", null).ToString();
}
catch (Exception ex)
{
onError(ex);
return "";
}
}
set
{
try
{
kBrowser1.Document.InvokeScript("setHtml", new string[] { value });
}
catch (Exception ex)
{
onError(ex);
}
}
}
在这个 Html 的属性中，包括了 JS 和 C# 的互调用代码，这里是在 C# 中调用 JS 的一个方法，并且一个有返回值但无参数，一个有参数但无返回值。
如果在 JS 里调用 C#，需要将类设置为 ComVisible(true)，应用到方法级不知是否也可以，没试过。然后 window.external.XXX() 的方式调用，XXX 是 C# 的方法。有没有参看重载就知道了。
在编辑器控件 OnLoad 时加载 Html 编辑器，因为是嵌入的资源，所以不是通过 File IO 的方式。
private void KEditor_Load(object sender, EventArgs e)
{
try
{
Stream sm = Assembly.GetExecutingAssembly().GetManifestResourceStream("Knote.Widgets.Resources.editor.html");
byte[] bs = new byte[sm.Length];
sm.Read(bs, 0, (int)sm.Length);
sm.Close();
UTF8Encoding con = new UTF8Encoding();
string str = con.GetString(bs);
kBrowser1.DocumentText = str;
}
catch (Exception ex)
{
onError(ex);
}
}
然后添加一些方法供 JS 调用，基本就是上述接口中的方法，调用前一定要判断是否空指针。
/// <summary>
/// 保存按钮点击的事件，请不要调用，而是使用监听器
/// </summary>
public void onSaveButtonClick()
{
if (KBrowserEventListener != null)
KBrowserEventListener.onSaveClicked();
}
/// <summary>
/// 打开文件按钮点击的事件，请不要调用，而是使用监听器
/// </summary>
public void onOpenFileButtonClick()
{
if (KBrowserEventListener != null)
KBrowserEventListener.onOpenFileClicked();
}
/// <summary>
/// 插入图片按钮点击的事件，请不要调用，而是使用监听器
/// </summary>
public void onInsertPictureButtonClick()
{
if (KBrowserEventListener != null)
KBrowserEventListener.onInsertImageClicked();
}
插入普通文本和插入 HTML 源代码。
/// <summary>
/// 插入一个节点，它将由 div 元素包裹
/// </summary>
/// <param name="html"></param>
public void InsertNode(string html)
{
try
{
kBrowser1.Document.InvokeScript("insertNode", new string[] { html });
}
catch (Exception ex)
{
onError(ex);
}
}
/// <summary>
/// 插入文本
/// </summary>
/// <param name="text"></param>
public void InsertText(string text)
{
try
{
kBrowser1.Document.InvokeScript("insertText", new string[] { text });
}
catch (Exception ex)
{
onError(ex);
}
}
为什么是 insertText 和 insertNode，这个是 JS 控件决定的，知道流程后，就可以封装任意编辑器了，最终完成效果如下，并且设计阶段也是所见即所得。
封装后只有一个 DLL，地址 https://github.com/yahch/kwig
