一、使用工具
VS2022-Winform（.NET Framework 4.7.2）、CefSharp.WinForms（谷歌浏览器开源组件）、TinyMCE
二、实现步骤
1. 安装依赖组件CefSharp.WinForms
① 打开VS2022--顶部菜单“工具”--“NuGet包管理器”--“管理解决方案的NuGet程序包”。
② 搜索“CefSharp.WinForms”，并安装，步骤如下图。
③ 在Winform设计界面，拖拽ChromiumWebBrowser组件到窗口，步骤如下图。
2. 把下载的Tiny-MCE文件夹放到项目根目录（同.sln同目录）
这里以文件夹“@tinymce”为例，把案例的sample.html改成index.html放到@tinymce里面。
3. 编写实现的C#代码。
目标是：前端能调用C#方法，交互传值；既可以使用C#弹窗，也可以使用JS弹窗。
① 配置CefSharp显示的网页位置，并注册JS调用C#的对象JsObj。
注意：指定html位置的时候，如果在配置管理器修改了参数（比如x64改x86），可能导致调试时无法通过如下方法获取index.html文件的正确路径，可以删除一个“.Parent"再试，也可以用MessageBox.Show(url)打印路径确认文件位置是否正确。
public Form1()
{
InitBrowser();
InitializeComponent();
this.StartPosition = FormStartPosition.CenterScreen; // 设置窗体居中
}
public ChromiumWebBrowser browser;
public void InitBrowser()
{
CefSettings settings = new CefSettings();
CefSharp.Cef.Initialize(settings);
//指定html位置。注意：如果在配置管理器修改了参数（比如x64），可能导致调试时无法通过如下方法获取index.html文件的正确路径，可以删除一个“.Parent"再试，也可以用MessageBox.Show(url)打印路径确认文件位置是否正确。
string path = Directory.GetParent(Directory.GetCurrentDirectory()).Parent.Parent.FullName + @"\@tinymce\index.html"; // 这里注意parent搭配获取目录的方法，index.html是放在项目sln文件同目录内@tiny_mce文件夹里面的。
// string path = Path.GetFullPath("D:\\GitHub\\WindowsFormsApp4\\@tinymce\\index.html");
string url = "file://" + path;
// MessageBox.Show(url);
browser = new ChromiumWebBrowser(url.ToString());
browser.Dock = DockStyle.Fill; // 铺满
this.Controls.Add(browser);
// 注册JsObj对象，实现JS调用C#
CefSharpSettings.WcfEnabled = true;
browser.JavascriptObjectRepository.Settings.LegacyBindingEnabled = true; // 允许调用JS函数调用后端代码
browser.JavascriptObjectRepository.Register("JsObj", new getWinFormData(browser, this), isAsync: false, options: BindingOptions.DefaultBinder);
}
private void Form1_FormClosing(object sender, FormClosingEventArgs e)
{
CefSharp.Cef.Shutdown();
}
② 编写C#方法，用以前端JS调用。
// 自定义类（JS调用C#）
public class getWinFormData
{
private static ChromiumWebBrowser chromiumWebBrowser;
private static Form1 form1;
private int myId = 2;
private String text_str = "首发知乎";
private String startTime = "2023-05-10";
// 构造方法
public getWinFormData(ChromiumWebBrowser OriginachromiumWebBrowser, Form1 Originaform1)
{
chromiumWebBrowser = OriginachromiumWebBrowser;
form1 = Originaform1;
}
// 窗口加载完毕时需要出发的全局JS对象
public void OnFrameLoadEnd(object sender, FrameLoadEndEventArgs e)
{
if (e.Frame.IsMain)
{
chromiumWebBrowser.ExecuteScriptAsync(@"document.body.onmouseup = function()
{
JsObj.onSelected(window.getSelection().toString());
}");
}
}
public void showMsg(string msg)
{
//String Content = msg; // 后台接收前端提供的值，可以进行其它处理，比如本地存储；
MessageBox.Show("C#弹窗：" + msg);
}
public string readMessage()
{
return myId +"；"+ text_str + "；" + startTime;
}
public int getId()
{
return myId;
}
}③ 如下是实现：Winform窗体大小变化时，执行JS代码实时更新前端TinyMCE编辑器尺寸。
void Form1_SizeChanged(object sender, EventArgs e)
{
int formHeight = this.ClientSize.Height;
string jsCode =
$"document.querySelector('#idcardmsg').value = {formHeight};"
+ $"tinymce.activeEditor.editorContainer.style.height = {formHeight - 300} + 'px'" // 减去200是为了让底部的“提交”按钮在合适位置；公式可以按需调整。
;
browser.ExecuteScriptAsync(jsCode);
}这里注意，需要给Winform设计界面的窗口属性绑定事件。
4. 编写前端代码。
输入框1（窗体大小调整时，会把窗体高度值更新到这里 ——实时更新）
输入框2（=输入框1的值，自动更新 ——非实时更新，快速调整窗口高度时可以看出效果差异）
(读取输入框1的值传递给C#进行winform弹窗)
(读取C#定义的参数值，然后进行js弹窗)
TinyMCE快速开始示例
三、运行界面
界面如下图。
- 点击“测试弹出框”可以读取“输入框1”的值并由C#弹窗。
- 点击“读取信息”可以读取C#定义参数并由JS弹窗。
- 调整Winform应用程序窗口的大小，可以看到2个输入框的值都在随着变动。
- 点击底部“提交”按钮，会把TinyMCE的内容提交到后台并进行C#弹窗。
四、补充说明
1. 代码已上传GitHub
地址：
https://github.com/Griked/CefSharp-TinyMCE
2. 劝退提醒
使用Winform内嵌谷歌浏览器（CefSharp）的方法，生成的文件目录非常大，上面程序调试生成的文件夹接近300MB，因为几乎把开源的谷歌浏览器放进去了。