转载：开源了一个Html5版本的类word，wps类似的工具以及静夜思

wangtiantian 2020-03-21 08:50:40

原作者：http://bbs.2ccc.com/topic.asp?topicid=580946

一套文档排版功能的代码，刚把代码提交到开源平台，基于Html5的Canvas，有需要的可以看看
https://gitee.com/HCView/HCView-H5
或
https://github.com/59079096/HCView-H5
或直接访问示例网站 http://hcview.cn/ 本着开源的名义所以代码没有压缩和本身服务器太low所以第一次打开会慢，另外请使用谷歌内核浏览器可得到最佳效果。

一点感慨：
这套文档排版软件做了也有几年了，一直是开源的方式，目前有3个版本，Delphi，C#，Html5，对你没看错，是用三套不同的语言实现了完全相同的功能，基于QT的C++版本打算在下半年开始，如果你对其他版本的排版代码有兴趣，可以访问上面的链接(去掉HCView-H5就能看到其他的语言的代码)。目前以医疗行业电子病历系统中使用这套代码的人居多，有国内排名前十的医院用，也有我从没听过的乡镇卫生院用。也有用在文档管理系统中的。

我想多说说H5的版本，也算是自己从桌面向web转换的一点产出吧。
我不熟悉html和css，也没精力和时间学习，为实现几个语言的功能和代码维护方便，必需要有统一的方法和函数以及实现，所以在C#的版本中我自己实现了一个和Delphi里一样的Canvas来处理GDI层面的事情，在Html5版本中我也重点使用Html5的Canvas做UI处理，总共用了约1万行js代码封装实现了类似VCL的框架，所以你会看到Application.js、Control.js、Form.js、StdCtrls.js、Graphics.js等等和VCL体系类似的单元，我使用了ES6的面向对象的语法，由于js是弱类型的语言，我基于原生的js类型封装了一些delphi和C#下的常见类型，如TObject、TPoint、TRect、TList，TStream，TInt8，TInt16，TInt32等等(可到System.js里看到全部)，也封装了TControl、TWinControl、TPanel、TButton、TLable、TEdit、TCombobox、TCheckBox、TPopupMenu、TScrollBar、TForm、TDialog等等有界面的控件(见Control.js、ExtCtrls.js、StdCtrls.js)，以及TPersistent、TComponent、TTimer、TAnimate等等无界面的控件，为实现和鼠标键盘交互，把浏览器的页面事件监听后封装，实现了KeyDown、KeyPress、MouseDown、MouseMove、MouseUp等等事件，让这些和我喜欢的Delphi里使用时的方法一样，通过input元素实现了和输入法的交互产生了ime.js，因为有自成的体系，所以写了clipboard.js实现了自己的剪切板并能和浏览器交互，当然还有最重要的Application.js以及整个框架运行的环境Kernel.js，web程序有css来描述样式，我用一个theme.js来完成，现在它还不能和css交互，我有计划让它和css交互。我也想把这个框架用IDE或者拖拉控件的有设计期概念的机制来处理，所以在TComponent里预留了可视化设计时属性事件的机制，我不知道以后还有没有机会来把预留的这些功能来实现，因为目前我需要的东西都算是完成了。

在完成上面这些功能的过程中，我阅读了无数次delphi自己的VCL体系代码，每每感叹Delphi是如此的优秀，自己是如此的“无知”，尤其是当我看明白delphi的Canva是如何把多次的pen、brush、font的属性修改仅在绘制时通过集合的加减运算得出需要处理的更新时，我一度觉得自己对基础知识的运用都不及格，更加失落的是这可能是最后一次这么仔细的咂摸Delphi源码的机会了。

我没有研究过别的js框架，我也不清楚我写的这个对大家有没有什么意义，虽然接下来几个月还要不断的完善和重构，但至少它让我提升了设计能力，并完成了我H5版本的目标，如果能对大家有用对行业有贡献那就是更好了。

...全文