你的位置:首页 > 软件开发 > ASP.net > NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器

NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器

发布时间:2016-06-13 01:03:17
经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布。应广大群友的要求,现已将NanUI的全部代码开源。GitHub: https://github.com/NetDimension/NanUIRelease: https://gi ...

经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布。应广大群友的要求,现已将NanUI的全部代码开源。

GitHub: https://github.com/NetDimension/NanUI

Release: https://github.com/NetDimension/NanUI/releases

这次发布的是一个相对稳定的版本,解决和改善了如下问题:

  • 页面随机白屏问题(主要原因是GC自动回收后,造成内存地址不可读)
  • NanUI编译版本改为.NET 4.0 Client Profile
  • 托上面那条改进的福,NanUI现在支持Windows XP了
  • 不再支持本地CEF运行支持文件,现在支持文件都需要在线下载安装,当然也可以手动下载离线包安装,但是不论那种方式,CEF都安装到一个共享的位置。CEF运行库只需下载安装一次,不会多次下载。

欢迎下载把玩,也欢迎进群讨论,群号241088256。

下面,进入我们的正题,使用NanUI以及手边的各种开源库制作一个所见即所得的Markdown编辑器。

NanUI系列目录

  • NanUI for Winform发布,让Winform界面设计拥有无限可能
  • NanUI for Winform 使用示例【第一集】——山寨个代码编辑器
  • NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器

NanUI for Winform 使用示例【第二集】

做一个所见即所得的Markdown编辑器

NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器

在本集中,使用了如下开源技术来方便的组建我们的“所见即所得Markdown编辑器”:

  • bootstrap
  • codeMirror
  • jquery
  • jquery.splitter.js
  • markdown-js
  • github-markdown.css

利用Nuget,获取上列的各种库不是难题。如效果图所示,我们可以方便的利用这些开源库来设计出心仪的页面。在此着重讲解网页前端和后台C#通信的技术。后面的文章里,凡是HTML、CSS和JS的内容我将称他们为“前端”、涉及C#编程的地方我会称他们为“后端”。

如图所示,软件将要与C#后端交互的几个地方有:

  • 代码编辑框
  • 新建文件按钮
  • 打开文件按钮
  • 保存文件按钮

在C#后端,建立HostEditor类来处理由前端发送回来的按钮事件。该类继承自基类JSObject,这个类负责与CEF的V8环境处理各种数据和对象。

 1 class HostEditor:JSObject 2 { 3   frmMain MainFrame; 4   internal HostEditor(frmMain main) 5   { 6     MainFrame = main; 7  8     AddFunction("setCleanState").Execute += SetCleanState; 9 10     AddFunction("newFile").Execute += NewFile;11 12     AddFunction("openFile").Execute += OpenFile;13 14     AddFunction("saveFile").Execute += SaveFile;15   }16 17   private void SaveFile(object sender, Chromium.Remote.Event.CfrV8HandlerExecuteEventArgs e)18   {19     var contents = e.Arguments.FirstOrDefault(p => p.IsString);20     var result = false;21     if (contents != null)22     {23       result = MainFrame.SaveFile(contents.StringValue);24 25 26     }27 28     if (result)29     {30       e.SetReturnValue(this.GetCfrObject(new31       {32         success = true,33         fileName = MainFrame.CurrentFile.Name34       }));35     }36     else37     {38       e.SetReturnValue(this.GetCfrObject(new39       {40         success = false41       }));42     }43   }44 45   private void OpenFile(object sender, Chromium.Remote.Event.CfrV8HandlerExecuteEventArgs e)46   {47     var contents = e.Arguments.FirstOrDefault(p => p.IsString);48     string result = null;49     if (contents != null)50     {51       result = MainFrame.OpenFile(contents.StringValue);52     }53 54     if (!string.IsNullOrEmpty(result))55     {56       e.SetReturnValue(this.GetCfrObject(new57       {58         success = true,59         fileName = MainFrame.CurrentFile.Name,60         contents = result61       }));62 63     }64     else65     {66       e.SetReturnValue(this.GetCfrObject(new67       {68         success = false69       }));70     }71   }72 73   private void NewFile(object sender, Chromium.Remote.Event.CfrV8HandlerExecuteEventArgs e)74   {75     var contents = e.Arguments.FirstOrDefault(p => p.IsString);76     var result = false;77     result = MainFrame.NewFile(contents.StringValue);78 79     e.SetReturnValue(CfrV8Value.CreateBool(result));80   }81 82   private void SetCleanState(object sender, Chromium.Remote.Event.CfrV8HandlerExecuteEventArgs e)83   {84     if(e.Arguments.Length>0 && e.Arguments[0].IsBool)85     {86       MainFrame.isClean = e.Arguments[0].BoolValue;87     }88   }89 }

原标题:NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器

关键词:winform

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录