一、使用工具
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. 编写前端代码。
<script src='tinymce.min.js'></script>
<script src="langs/zh_CN.js"></script>
<script type="text/javascript">
tinymce.init({
// mode : "exact",
// elements : "mytextarea",
selector: '#mytextarea',
language: 'zh_CN',
menubar: false, //不想要文件那一栏
// toolbar: false, //不想要加粗那一栏
promotion: false, //去掉右上角Upgrade更新提醒按钮
resize:true, //右下角有一个拖动标记，true（仅允许改变高度）, false（完全不让你动）, 'both'（宽高都能改变，注意引号）
// width: 300, //默认宽度，单位为像素（px）
// height: 300, //默认高度
// statusbar: false //隐藏状态栏，指的是编辑器最底下、左侧显示dom信息、右侧显示Tiny版权链接和调整大小的那一行。
branding: false, //设为false时，隐藏编辑器界面右下角的“Powered by Tiny”（官方汉化为：由Tiny驱动）字样。(状态栏右侧)
plugin: 'textpattern', //插件，支持简单的Markdown语法
textpattern_patterns: [
{start: '*', end: '*', format: 'italic'},
{start: '**', end: '**', format: 'bold'},
{start: '#', format: 'h1'},
{start: '##', format: 'h2'},
{start: '###', format: 'h3'},
{start: '####', format: 'h4'},
{start: '#####', format: 'h5'},
{start: '######', format: 'h6'},
{start: '1. ', cmd: 'InsertOrderedList'},
{start: '* ', cmd: 'InsertUnorderedList'},
{start: '- ', cmd: 'InsertUnorderedList'}
]
});
// 根据输入框1的数值动态更新输入框2和编辑器高度（每隔300ms,非实时)
setInterval(() => {
const formHeight = document.querySelector('#idcardmsg').value;
document.querySelector('#idcardmsg2').value = formHeight;
// 使用最新 formHeight 设置TinyMCE编辑框的高度
// tinymce.activeEditor.editorContainer.style.height = (formHeight -300) + 'px'; //动态更新编辑器的高度，公式可以按需调整，目的是确保底部“提交”按钮在合适的位置（非实时，若需要实时调整编辑器高度，可以注释掉此处代码，然后启用C#代码倒数第2行。这里只是展示一个方法）
}, 300); //300毫秒
</script>
输入框1（窗体大小调整时，会把窗体高度值更新到这里 ——实时更新）
输入框2（=输入框1的值，自动更新 ——非实时更新，快速调整窗口高度时可以看出效果差异）
(读取输入框1的值传递给C#进行winform弹窗)
(读取C#定义的参数值，然后进行js弹窗)
TinyMCE快速开始示例
<script>
function test1() {
var idcardmsg = document.getElementById("idcardmsg").value;
JsObj.showMsg(idcardmsg);
};
function test2() {
var result = JsObj.readMessage();
alert("js弹窗："+result);
};
function formSubmit() {
// var msg_content = document.getElementById("mytextarea").value; //这个原生方法，获取的编辑框原值，不是编辑器最新值
// var msg_content = tinyMCE.activeEditor.getContent(); //这个是编辑器方法，获取的是带有的HTML格式内容
// 获取编辑器不带HTML标记的纯文本内容的方法：
var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
var msg_content = activeEditor.selection.getContent( { 'format' : 'text' } );
var msg_alert = "提交成功，\n内容是："+ msg_content;
JsObj.showMsg(msg_alert);
};
</script>
三、运行界面
界面如下图。
- 点击“测试弹出框”可以读取“输入框1”的值并由C#弹窗。
- 点击“读取信息”可以读取C#定义参数并由JS弹窗。
- 调整Winform应用程序窗口的大小，可以看到2个输入框的值都在随着变动。
- 点击底部“提交”按钮，会把TinyMCE的内容提交到后台并进行C#弹窗。
四、补充说明
1. 代码已上传GitHub
地址：
https://github.com/Griked/CefSharp-TinyMCE
2. 劝退提醒
使用Winform内嵌谷歌浏览器（CefSharp）的方法，生成的文件目录非常大，上面程序调试生成的文件夹接近300MB，因为几乎把开源的谷歌浏览器放进去了。