Winform配合CefSharp集成TinyMCE并实现C#与JavaScript交互

lkme

人不远行，怎知世界之大。

想做一个自己的本地图文编辑器，TinyMCE看起来还不错，就想着集成进来，这里记录一下案例，包括实现了前后交互传值的方法。
项目已上传GitHub，地址： https:// github.com/CookByte/Cef Sharp-TinyMCE

一、使用工具

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. 编写前端代码。

<!DOCTYPE html>
<html style="overflow: hidden;">
    <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>
</head>
      输入框1<textarea id="idcardmsg">abc</textarea>（窗体大小调整时，会把窗体高度值更新到这里 ——实时更新）
      输入框2<textarea id="idcardmsg2"></textarea>（=输入框1的值，自动更新 ——非实时更新，快速调整窗口高度时可以看出效果差异）
    </div>
      <button onclick="test1()">测试弹出框</button>(读取输入框1的值传递给C#进行winform弹窗)
      <button onclick="test2()">读取信息</button>(读取C#定义的参数值，然后进行js弹窗)
    </div>
    <h1>TinyMCE快速开始示例</h1>
    <form id="myForm" method="post">
      <textarea id="mytextarea" name="TextAreaContent">编辑框：Hello, World!（编辑框的高度会随着窗体高度动态调整）</textarea>
      <!-- //button放在form里面，如果不加“;return false;”，点击提交后会清空数据。 -->
      <button onclick="formSubmit();return false;" type="submit" >提交</button>
    </form>
    <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();  //这个是编辑器方法，获取的是带有<p>的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);