前言：
此时我们对“button onclick属性 jsp”都比较珍视，我们都想要分析一些“button onclick属性 jsp”的相关资讯。那么小编也在网络上搜集了一些关于“button onclick属性 jsp””的相关知识，希望朋友们能喜欢，同学们一起来了解一下吧！一、使用工具
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 = "; + 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;"><head> <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><body > <div> 输入框1<textarea id="idcardmsg">abc</textarea>（窗体大小调整时，会把窗体高度值更新到这里 ——实时更新） </br> 输入框2<textarea id="idcardmsg2"></textarea>（=输入框1的值，自动更新 ——非实时更新，快速调整窗口高度时可以看出效果差异） </div> <div> <button onclick="test1()">测试弹出框</button>(读取输入框1的值传递给C#进行winform弹窗) </br> <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); }; </script></body></html>三、运行界面界面如下图。
点击“测试弹出框”可以读取“输入框1”的值并由C#弹窗。点击“读取信息”可以读取C#定义参数并由JS弹窗。调整Winform应用程序窗口的大小，可以看到2个输入框的值都在随着变动。点击底部“提交”按钮，会把TinyMCE的内容提交到后台并进行C#弹窗。四、补充说明1. 代码已上传GitHub
地址：
2. 劝退提醒
使用Winform内嵌谷歌浏览器（CefSharp）的方法，生成的文件目录非常大，上面程序调试生成的文件夹接近300MB，因为几乎把开源的谷歌浏览器放进去了。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #button onclick属性 jsp
