【不止 VB】 QZhi HTML Editor：一个简易的 HTML 编辑器

QZhi

QZhi HTML Editor 简介  

QZhi HTML Editor 是一款轻量级的所见即所得编辑器，可用于编辑 HTML4 文档。您可以轻松快捷地编辑 HTML4 文档。此外，它还是快速生成小型网页的完美工具。使用 QZhi HTML Editor，您可以同时解决多项任务：

• 以所见即所得的方式编辑 HTML 文档
• 在同一窗体内设计网页/编辑源码/预览网页
  

本软件采用 Microsoft® Visual Basic® 6.0 语言编写，使得本软件较其他同类软件（如 BlueGriffon）更快速、更便捷。

软件特性

• 以所见即所得的方式编辑 HTML 文档。
• 无需编码，直接插入控件。
• Unicode 支持。
• 多窗体操作，十分便捷。
  

系统需求

硬件需求

• 处理器：166 MHz 或更快。
• 内存：至少 128 MB。
• 硬盘：至少 10 MB 空余。
• 显示屏：24 位色 Super VGA (1024 x 768) 或更高分辨率的监视器。
  

软件需求

• Microsoft® Windows® 2000 及更高版本的 Microsoft® Windows® 操作系统。
• Microsoft® Internet Explorer® 5.5 及更高版本的 Microsoft® Internet Explorer® 网络浏览器。
• Microsoft® Visual Basic® 6.0 运行库。
• Microsoft® Windows® Common Controls 5.0 控件集。（一定要用 5.0 版！）
  

注：
不建议您在 Windows 9x 上安装本软件，您应在支持 Unicode 的 Microsoft® Windows NT® 上安装本软件。

截图

QZhi HTML Editor v1.0.179-beta

下载链接
https://github.com/QZhiStudio/QZhi-HTML-Editor/

灵感来源

Microsoft Visual J++ 6.0 的 HTML 编辑器

Visual J++ 6.0 的 HTML 编辑器

又及：
本程序仅做抛砖引玉的尝试，在这个程序的基础上，您可以制作出 CHM 编辑器、Markdown 编辑器、BBCode 编辑器、LaTex 编辑器……
此外，作为一个英语一般、编程水平普通的初中学生，我的代码显然是存在很多不足之处的，如果我的程序有不足之处，恳请您指出。
谢谢！

美俪女神

不知道你是否可以获取/设置“源码”选项卡里那个TEXTBOX的内容。如果可以的话，给控件添加事件对应的JS函数名称应该很简单。

我发现你把所有窗口都融为一体了，很好。建议你把左边控件栏的宽度和下边信息栏的高度做成可调节的，防止在小屏幕电脑上碍眼。

每次看到“设计-源码-预览”这三联装选项卡时，我就想起了2001年的夏天，我在有冷气机的小学“多媒体计算机教学室”里使用FrontPage设计网页的情形。

美俪女神

你那个comctl32.ocx的版本是1.4的，VB6SP6自带的好像不是这个版本，导致VBP打开时报错。只要把VBP文件里的这一行：

1. Object={6B7E6392-850A-101B-AFC0-4210102A8DA7}#1.4#0; comctl32.ocx

复制代码

改为：

1. Object={6B7E6392-850A-101B-AFC0-4210102A8DA7}#1.3#0; comctl32.ocx

复制代码

就能在默认安装了VB6SP6的系统上打开了，编译自然也是没问题的。

美俪女神

你真的是初中生吗？这个软件的水平已经超过很多大学软件制作比赛的作品了。
顺带说两个建议：
1、软件界面改为MDI，不要用SDI。或者干脆就用“单窗口+窗口内的虚拟小窗口”。
2、给控件增加事件处理流程。比如可以给按钮添加个处理CLICK事件的JS代码。

戈登走過去

哇，好酷！
（这两个截图我都爱了

QZhi

QZhi HTML Editor Version 1.0.184 Beta
本版本修复了 QZhi HTML Editor Version 1.0.179 Beta 的已知问题。

• 修复了因 IE 速度过快而打印空白文件的问题。
• 修复了在编辑模式下仍打印网页而非源码的问题。
• 修改了帮助文件中的个别错字。
  

下载地址：https://github.com/QZhiStudio/QZhi-HTML-Editor/releases/tag/v1.0.184-beta

QZhi

戈登走過去 发表于 2024-2-5 10:20
哇，好酷！
（这两个截图我都爱了

其实我也没想到扁平风格的 Visual Studio 2022 图像库在拟物化的 Windows Vista 里竟然没有违和感……

QZhi

QZhi HTML Editor Version 1.0.191 Beta
本版本修复了 QZhi HTML Editor Version 1.0.184 Beta 的已知问题。

• 修复了没有及时销毁类的问题。
• 修复了在预览模式下文件正在加载时无法写入的问题。
• 修复了打开新页面时会新建 IE 窗口的问题。
  

gujin163

啥也不说了，帖子就是带劲！

美俪女神

从GITHUB上下载你的工程并打开，会提示找不到COMCTL32.OCX，你可以在一个只安装了VB6的干净虚拟机里试试。

顺带说句，你可以用SetParent把其他小窗口的内容全部挪动到主窗口里，然后用SetWindowLong来修改窗口样式。这样子就可以把你的程序改为伪MDI效果。

我自制的IDE就是用的这种土办法配合TAB控件，实现了类似VS的效果（工程列表、查找、编译输出窗口就一个，代码编辑窗口有很多个）。

QZhi

美俪女神 发表于 2024-2-5 18:09
从GITHUB上下载你的工程并打开，会提示找不到COMCTL32.OCX，你可以在一个只安装了VB6的干净虚拟机里试试。
...

啊！
我忘了，我用的是 VB5 的控件！（我懒得 CreateWindowExW）

QZhi

美俪女神 发表于 2024-2-5 17:41
你真的是初中生吗？这个软件的水平已经超过很多大学软件制作比赛的作品了。
顺带说两个建议：
1、软件界面 ...

把软件界面改成 MDI 还好处理，只要把

1. Begin VB.Form frmMenu

复制代码

改成

1. Begin VB.MDIForm frmMenu

复制代码

就行了

但是事件处理流程就不好处理了，如果真的要干，至少得做这几项工作：
1.获取网页的 element
2.遍历，依靠 id 获取每一个元素的 element
3.为每个 element 分配一个类
4.对每一个类进行事件处理

但是，并非所有的元素都是有 id 的。而且即使通过一定手段获取到了 element，也无法直接使用。
VB6 是没有 HtmlElement 类的（IHTMLElement 类也不支持直接处理事件），如果真要操作，得用不同的类，如 <input type="button"> 要使用 HTMLInputButtonElement 类或 HTMLInputElement 类。

像这样的类有这么多：

仅第三步就可以让整个软件的体积成倍增长，完成以上 4 个步骤约等于从 0 开始写一个 IDE。（又及：还要考虑 IE 的版本）

但这不是大问题，最坑的是有些 element 的事件根本无法获取！比如我在 frmCode 里定义的 eEditor 就始终无法获取到 onchange 事件。

所以，第二条建议我无法完成。

当然，以上只是我自己的见解，如有错误，恳请指出！

美俪女神

QZhi 发表于 2024-2-5 18:35
把软件界面改成 MDI 还好处理，只要把

改成

你误解我的意思了。比如我手动在网页上添加了一个按钮Button1，你会自动在后台帮我编写了如下代码：

1. <input type="button" name="Button1" value="test"></input>

复制代码

此时我又希望可以对Button1添加一个Click事件，希望你可以生成/修改为以下代码：

1. <script type="text/javascript">
   
2. function Button1_Click()
   
3. {
   
4.         alert("Button1_Click");
   
5. }
   
6. </script>
   
7. <input type="button" name="Button1" value="test" onclick="Button1_Click()"></input>

复制代码

QZhi

美俪女神 发表于 2024-2-5 19:03
你误解我的意思了。比如我手动在网页上添加了一个按钮Button1，你会自动在后台帮我编写了如下代码：

此 ...

第一个功能是目前有的，代码是由 IE 的生成器生成的，默认的效果是指派数字 ID。

至于第二个功能，我是真没有头绪……

美俪女神

QZhi 发表于 2024-2-5 19:11
第一个功能是目前有的，代码是由 IE 的生成器生成的，默认的效果是指派数字 ID。

至于第二个功能，我是 ...

对啊，我就是看到了有第一个功能，才希望有第二个功能。

不过我没仔细看你的代码，我以为HTML代码是你自己生成的，没想到是IE帮生成的。

目前没有头绪也也没关系，你还年轻，来日方长，有兴趣的话就慢慢研究吧。

QZhi

美俪女神 发表于 2024-2-5 19:15
对啊，我就是看到了有第一个功能，才希望有第二个功能。

不过我没仔细看你的代码，我以为HTML代码是你自 ...

我又看了一下 Visual J++ 的 HTML 编辑器，大概有了想法：

1.遍历 MSHTML 库，记录所有的类
2.依次遍历每一个类，将每一个方法、属性、事件记录在 TreeView 中
3.当用户选定一个控件，获取其 element 和 id
4.查看文档是否有 script 元素，如果没有就新建
5.将事件处理代码写入 script 元素

您有什么更好的建议吗？

QZhi

美俪女神 发表于 2024-2-5 19:03
你误解我的意思了。比如我手动在网页上添加了一个按钮Button1，你会自动在后台帮我编写了如下代码：

此 ...

Visual J++ 的 HTML 编辑器是这样的：

QZhi

QZhi HTML Editor Version 1.0.191 RC

• 修复了字符串转 HTML 实体得到负数的问题。
• 修复了打印源码和打印消息时不正确换行的问题。
• 修复了颜色选择器“取消”按钮按下没有反应的问题。
• 修复了“格式”菜单中“背景色”“前景色”按钮的图标在动态更改时模糊的问题。
• 修复了部分文档无法打印（预览）的问题。
• 修复了打印源码时不正确换行的问题。
• 修复了在低版本 IE 下消息列表无法自动滚动的问题。
• 修复取色器部分控件背景不透明的问题。
• 修复取色器初始化时不更新亮度条的问题。
• 修复取色器的“红色” Updown 控件因高度少 1 像素而渲染不全的问题。
• 改 SDI 界面为 MDI 界面。
• 更改了消息列表的字体。
• 新增了 WebBrowser.NavigateWarning 和 WebBrowser.NavigateError 两种消息类型。
• 增加了消息列表的保存和清空功能。
  

注：本版为 rc 版（但是帮助文档没有更新），如果没有错误，下一个版本将是正式版。

顺便放两张 MDI 版的图：

QZhi

美俪女神 发表于 2024-2-8 21:33
不知道你是否可以获取/设置“源码”选项卡里那个TEXTBOX的内容。如果可以的话，给控件添加事件对应的JS函数 ...

获取/设置“源码”选项卡里那个TEXTBOX的内容是可以的（早在 1.0.179 版之前就可以做到了），但是添加函数的功能能这样干吗？我担心会把代码插到注释里头去。

美俪女神

QZhi 发表于 2024-2-8 22:09
获取/设置“源码”选项卡里那个TEXTBOX的内容是可以的（早在 1.0.179 版之前就可以做到了），但是添加函 ...

你别老把我的帖子置顶啊，不然这个帖子的顺序都乱套了。

关于在什么位置插入JS，可以参考一下这个：https://www.runoob.com/js/js-howto.html