基于QT的HTML编辑器的设计与实现毕业论文.doc

郑州大学毕业设计（论文） 题题 目：目：基于基于 Qt 的的 html 编辑器的设计与实现编辑器的设计与实现 指导教师：指导教师： 职称：职称： 学生姓名学生姓名： 学号学号： 专专 业业： 院院（系系）： 完成时间完成时间： 2012 年年 5 月月 10 日日 2012 年 5 月 10 日 目录目录 绪论绪论.I I ABSTRACTABSTRACT.IIII 1 1 绪论绪论 .1 1 1.1 课题研究背景和意义 .1 1.2 论文任务和各个章节要求本 .1 2 2 相关技术介绍相关技术介绍 .2 2 2.1 LINUX系统简介.2 2.2 QT简介 .3 3 3 HTMLHTML 编辑器相关技术详解编辑器相关技术详解 .5 5 3.1 QT的类和库 .5 3.2 信号与槽机制 .6 3.3 QTWEBKIT 的使用.7 3.5 QT的工具 QT DESIGNER和 QT助手 ASSISTANT.8 4 4 HTMLHTML 编辑器的需求分析编辑器的需求分析 .1010 4.1 调查分析 .10 4.2 设计功能结构图 .10 4.3 HTML编辑器的关键技术解析.11 5 5 HTMLHTML 编辑器的详细设计编辑器的详细设计 .1313 5.1 开发环境的构建 .13 5.2 HTML编辑器的设计流程.13 5.3 HTML编辑器的逐步实现.15 5.4 测试各个模块 .15 6 6 项目总结项目总结.1919 致谢致谢.2020 参考文献参考文献.2121 绪论绪论 电脑办公早已成为现代办公的主要使用方式，办公软件也是多种多样，像 Word、Excel，WPS 等。由于互联网的普及，我们每天都要从网上得到许多自己 想要的信息，这样就要有人不断地向网上发布大量的信息。现在许多办公方式 也都是在网络上进行操作的。大量的数据需要通过网络传输到服务器的数据库 上，这些工作都是需要打开网页来进行操作的，这就需要一种类似于 Word 的文 本处理软件，那么基于 html 的编辑器自然就是开发人员要考虑加入到软件或网 站上的了。 “html 编辑器”从字面上看就知道是一种将文章在进行排版、插图等操作 后保存成 html 格式的一种编辑器。这样从网页上打开的文档就是已经排好版的 一篇文章了。本设计用到的技术 Qt 是诺基亚开发的一个跨平台的 C+图形用户 界面应用程序框架。它提供给应用程序开发者建立的图形用户界面所需的所用 功能。Qt 是完全面向对象的，非常容易扩展，并且允许真正地组件编程。 本文以一个真实的 html 为例，从 html 的现状谈起，结合实际用户需求， 基于 QT，linux 系统等知识系统说明 QT 开发软件流程，设计的 html 编辑器占 用内存小，对系统配置要求不高，适合于系统资源受限的机器上使用。 关键词 linux，Qt，html 编辑器 I ABSTRACABSTRACT T The computer is the main use of the modern office,office software is also emerging, such as Word, Excel,and WPS.With the technological development of the Internet,People almost want get a lot of the information from the Internet every time ,and there are also a lot of the information had at the internet,This work is Need to open the page to operate,this requires a similar Word text-processing software.So natural is the Html-based editor developers to consider. HTML editor literally an,editor to know a text during the typesetting,illustration and other operations save in HTML format,Open document from a web page is to row a good version of an article,Qt is used in this design developed by Nokia and a cross- platform C + + graphical user interface application framework. It provides a graphical user interface to the application developer to establish the required functionality. Qt is fully object-oriented, very easy to extend, and allow the programming of real components. To a real html example, html status quo about the actual user needs, the software of the QT development process based on the QT, linux knowledge. Keywords:linux Qt,html editor; 0 1 1 绪论绪论 随着网络技术的飞速发展，计算机技术的不断成熟，各专业专业方面软件 越来越多，可谓是层出不穷，计算机开发语言也不断更新，开发工具也日渐增 多，由于 linux 的开源特点，市场份额不断增大，支持的设备也原来越多，Qt 做为一个优秀的开发工具，将开源继承并发扬，作为计算机专业学生，必须熟 悉掌握其开发流程并运用其开发软件思想，本设计利用设计 html 编辑器为对象， 利用 Qt 开发的 html 编辑器占用内存较少，简单易用，并且可以作为浏览器使 用。 1 1. .1 1 课题研究背景和意义课题研究背景和意义 就 html 编辑器来说，有 FCKeditor 在线编辑器，eWebEdit 编辑器， xhEditor 编辑器，Amaya 编辑器等等，他们直接用 textarea 标签优点：速度 快，提交方便，可以用 UBB 标签来弥补不能所见所得缺点，可以很直观，可以 做出各种效果。但是，他们但是要么只适合 IE 浏览器或者是对 js 要求高。过 去，如果是纯静态的网站，那么可能不会出现 html 编辑器这个词汇，因为记事 本就可以完成任务。但现在做的网站，最底的标准也是动态的，所以说这个时 候不管是动态还是动态生静态的网站都离不开 html 编辑器 说起 html 编辑器 作为学生最熟悉的应该是 Dreamweave 了，是个原本由 Macromedia 公司所开发 的名网站开发工具。它使用所见即所得的接口，亦有 html 编辑的功能。但是在 所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到真正想要的 效果；代码难控制比如制作一张表格也要几分钟，完全符合要求可能需要几十 分钟，甚至更多时间。所有的 html 代码都在用户监控下产生，但是由于编辑器 的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干 净、准确的 html 代码，又具备所见所得的高效率、直观性，一直是人们的梦想。 1.21.2 论文任务和各个章节要求本论文任务和各个章节要求本 本论文的设计目的是在掌握 Qt 开发软件流程，利用 C+面向对象的原则， 并运用 SHELL 编程技巧，DESIGER 设计器，深入了解 Qt 类的使用，利用所学知 识设计一款有基本功能的 html 编辑器，本设计开发是基于 Linux2.6 内核的 Ubuntu9.04 系统为开发平台，以 Qt 做为开发工具设计。各个章节基本要求如 下:第一章，概要对市面上的 html 编辑的分析和本课题研究的背景和意义。第 二章介绍相关技术 Qt 和 linux。第三章，html 代码编辑器相关技术 Qt 的类， Qtwebkit 的，信号和槽技术和 Qt 的工具的深入详细剖析和用法。第四章是对 html 编辑器器的需求分析；第五章是 html 编辑器的详细设计流程，从环境的 搭建到基本界面的生成有一步一步实现，并且测试每一个模块；第六章是项目 总结，总结本项目自己学到的知识和心得体会。 1 2 2 相关技术介绍相关技术介绍 2.12.1 LinuxLinux 系统简介系统简介 Linux 得名于计算机业余爱好者芬兰人 Linus Torvalds（林纳斯托瓦兹） 。 Linux 是一种自由和开放源码的类 Unix 计算机操作系统。他们有非常深的历史 渊源（如图 2.1 所示） 图 2.1 Unix 和 Linux 历史渊源 在此不大篇幅介绍其区别，严格来讲，Linux 这个词本身只表示 Linux 内核， 但人们已经习惯了用 Linux 来形容整个基于 Linux 内核，并且使用 GNU 工程各 种工具和数据库的操作系统目前存在着许多不同的 Linux 例如 FedoraCore,Debian,Mandrake,Ubuntu,Red Hat,红旗 Linux 等等，本设计是用 Ubuntu9.04 版本，它们全都使用了 Linux 内核，linux 内核版本（如 2.2 图所 示） 2 图 2.2 Linux 内核版本发布历史 Linux 操作系统是自由软件和开放源代码发展中最著名的例子。只要遵循 GNU 通用公共许可证(General Public License),任何人和机构都可以自由地使 用 Linux 的所有底层源代码，也可以自由地修改和再发布。使用 GNU 工程各种 工具和数据库的操作系统（也被称为 GNU/ Linux）,Linux 可以被移植到多种硬 件平台，这对受内存、时间限制的研究与开发项目有很大吸引力的。可以在宿 主机平台上开发然后移植到具体的硬件上，加快了项目的开发过程。 2.22.2 QtQt 简介简介 Qt 是诺基亚开发的一个跨平台的 C+图形用户界面应用程序框架（其前身 是挪 Trolltech 公司）。它提供给应用程序开发者建立艺术级的图形用户界面 所需的所用功能。Qt 是完全面向对象的，非常容易扩展，并且允许真正地组件 编程,人们所熟知的 Linux 下面的 KDE 环境就是基于 Qt 开发而成的,Qt 支持下 列操作系统: Windows 95/98，Windows xp，Linux 等等，Qt 的良好封装机制使 得 Qt 的模块化程度非常高，可重用性较好，对于用户开发来说是非常方便的。 Qt 支持大量 API，Qt 包括多达 250 个以上的 C+ 类,Qt 对各个模块进行了良好 的封装使各模块可重用性非常好；优良的跨平台特性，使用 Qt 类编写的程序可 以实现“一次编码，到处编译”，极大的降低了跨平台开发的难度，Qt 开放源 代码，并且提供自由软件的用户协议。使得它可以被广泛地应用在各平台上的 开放源代码软件开发中。Qt 提供三种授权方式。三种授权方式的功能、性能都 3 没有什么区别，区别仅仅在于授权协议的不同。LGPL 和 GPL 是免费发布，商业 版则需收取授权费。 Qt 的商业版-Qt 商业授权适用于开发专属和/或商业软件。此版本适用于 不希望与他人共享源代码，或者遵循 GNU 宽通用公共许可证（LGPL）2.1 版或 GNU GPL 3.0 版条款的开发人员。提供了技术支援服务。可以任意的修改 Qt 的 源代码，而不需要公开。 Qt 的 LGPL -Qt 4.5.0 及以后的版本开始遵循 GNU LGPL。LGPL 允许链结 到它的软件使用任意的许可证，可以被专属软件作为类库引用、发布和销售。 可以购买支援服务。 Qt 的 GPL- 如果您希望将 Qt 应用程序与受 GNU 通用公共许可证（GPL） 3.0 版本条款限制的软件一同使用，或者您希望 Qt 应用程序遵循该 GNU 许可证 版本的条款，则此版本 Qt 适用于开发此类 Qt 应用程序。可以购买支援服务 Qt 附带工具有 QtDesigner-提供扩充 Qt Designer 的类别，QtHelp- 协助 整合线上文件到应用程式中,QtTest- 提供单元测试框架和鼠标和键盘类比功 能,对于对象间通信 Qt 采用了一种全新并且可选的被称为“信号与槽” 的对 象间通信机制，通过一个对象信号的发射，另一个槽函数的响应，使各个对象 之间的通信安全而且高效。 Qt 的这些特点使它非常适合于真正的构件编程， 同时使各个组件之间的协同工作变得十分简单，并且 Qt 是直接基于 Xlib 的， 不依赖 Motif 工具包， 所以它的执行效率比一般的基于平台的代码的执行效 率要高。 4 3 3 htmlhtml 编辑器相关技术详解编辑器相关技术详解 3.13.1 Q Qt t 的类和库的类和库 Qt 的 QWidget 类: 本 html 设计器是利用 widge 作为顶级容器设计图形化界 面。Qt 的图形使用者接口的基础是 QWidget。Qt 中所有类型的 GUI 组件如按钮、 标签、工具列等都继承自 QWidget，而 QWidget 本身则为 QObject 的子类别。 Widget 负责接收鼠标，键盘和来自窗口系统的其他事件，并描绘了自身显示在 屏幕上。每一个 GUI 组件都是一个 widget，widget 还可以作为容器，在其内包 含其他 Widget。Qwidget 不是一个抽象类别。并且可以被放置在一个已存在的 使用者接口中;若是 Widget 没有指定父 Widget，当它显示时就是一个独立的视 窗或是一个顶层 widget。QWidget 显示能力包含了透明化及 Double- Buffering。Qt 提供一种托管机制，当 Widget 于建立时指定父物件，就可把自 己的生命周期交给上层物件管理，当上层物件被释放时，自己也被释放。确保 物件不再使用时都会被删除。 Qt 的 QMainWindow 类：本 html 编辑器用 MainWindow 设计菜单栏。 QMainWindow 类提供一个有菜单条、锚接窗口（例如工具条）和一个状态条的 主应用程序窗口。主窗口通常用在提供一个大的中央窗口部件（例如文本编辑 或者绘制画布）以及周围菜单、工具条和一个状态条。QMainWindow 经被继承， 因为这使得封装中央部件、菜单和工具条以及窗口状态变得更容易。继承使创 建当用户点击菜单项或者工具条按钮时被调用的槽成为可能。也可以使用 Qt 设 计器来创建主窗口，本 html 设计器就是用 QMainWindow 设计其菜单条。 Qt 的 QAction 类和 QMenu 类：本 html 编辑器用 QAction 类和 QMenu 类的功 能完成菜单栏的设计，QAction 类提供了一个可以同时出现在菜单和工具条上 的抽象用户界面操作。在图形用户界面应用程序中很多命令可以通过菜单选项、 工具条按钮和键盘快捷键调用。因为同一个操作将会被执行，而与它的调用方 法无关，并且因为菜单和工具条必须保持同步，所以提供一个操作这样的命令 很有用。一个操作可以被添加到菜单和工具条中并且将会自动使它们同步。例 如，如果用户按下“加粗”工具条按钮， “加粗”菜单项将会自动被选中。 QAction 可以包含图标、菜单文本、快捷键、状态条文本、这是什么文本和工 具提示。它们可以分别通过 setIconSet()、setText()、setMenuText()、 setToolTip(),setStatusTip()、setWhatsThis()和 setAccel()来设置。 Qt 的的布局管理:html 编辑器用 Qt 自带的布局管理器，在创建的窗口中， 为了方便地管理其中的控件，而诞生了布局管理器。将各种控件按照实际需要， 放在布局管理器中，可以方便地对其进行管理。此后，窗口大小变化时，其将 会自动进行调整变化。如果你将自己创建的控件放在了布局管理器中，那么再 想手工的改变控件的大小时就不有自主了。Qt 提供的布局管理类有 QHBoxLayout、QVBoxLayout、QGridLayout、QStackLayout 4 种，如图 3.3 所 示 5 图 3.3 Qt 布局类 因为布局管理器已经掌控了你的控件，自动替你进行管理了，不需要你进行移 动和调整大小了。如果你觉着布局管理器管理的不够好，那么你可以通过 “breaking layouts”来打破原来的布局，自己重新手工布局也行。 3.23.2 信号与槽机制信号与槽机制 信号和槽机制是 Qt 的核心机制，要精通 Qt 编程就必须对信号和槽有所 了解。信号和槽是一种高级接口，应用于对象之间的通信，它是 Qt 的核心特 性，也是 Qt 区别于其它工具包的重要地方。信号和槽是 Qt 自行定义的一种 通信机制，它独立于标准的 C/C+ 语言，因此要正确的处理信号和槽，必须借 助一个称为 moc（Meta Object Compiler）的 QT 工具，该工具是一个 C+ 预 处理程序，它为高层次的事件处理自动生成所需要的附加代码。信号/槽机制是 Qt 的一个中心特征并且也许是 Qt 与其它工具包的最不相同的部分。在图形用 户界面编程中，我们经常希望一个窗口部件的一个变化被通知另一个窗口部件。 Qt 利用信号 signals/slots）机制取代传统的回调来进行物件之间的沟通。回 调是指一个函数的指针，所以如果你希望一个处理函数通知你一些事件，你可 以把另一个函数（回调）的指针传递给处理函数。处理函数在适当的时候调用 回调。回调有两个主要缺点。首先他们不是类型安全的。我们从来都不能确定 处理函数使用了正确的参数来调用回调。因此容易造成进程崩溃，另外一个问 题是，回调这种方式紧紧的绑定了图形用户接口的功能元素，因而很难把开发 进行独立的分类。然而 QT 的信号和槽机制是当操作事件发生的时候，物件会发 送出信号（signal）通知所有 slot 接收 signal，尽管它并不知道那些函数定 义 slot，而 slot 也同样不知道要接收怎样的 signl,信号和槽机制真正实现了 封装的概念，当某个信号对其客户或所有者发生的内部状态发生改变，信号被 一个对象发射。只有 定义过这个信号的类及其派生类能够发射这个信号。当一 个信号被发射时，与其相关联的槽将被立刻执行，就象一个正常的函数调用一 样。信号 -槽机制完全独立于任何 GUI 事件循环。只有当所有的槽返回以后发 射函数（emit）才返回。 如果存在多个槽与某个信号相关联，那么，当这个信 号被发射时，这些槽将会一个接一个地 执行，但是它们执行的顺序将会是随机 的，不确定的，我们不能人为地指定哪个先执行、哪 个后执行。信号与槽之间， 则透过 QObject 的静态方法 connect 来连结，连接的时候还需要用到 SIGNAL（）和 SLOT（）两个宏。信号和槽的连接方法如图 3.4 所示： 6 图 3.4 信号和槽连接方式 信号在任何执行点上皆可发射，甚至可以在槽里再发射另一个讯号，讯号与槽 的连结不限定为一对一的连结，一个讯号可以连结到多个槽或多个讯号连结到 同一个槽，甚至讯号也可连接到讯号。为了加快开发流程，Qt 提供了丰富的命 令和图形工具，Qt Createor:轻量级 Qt/C+ IDE 开发环境；qmake 跨平台构建 工具，Qt Desiger 界面设计师，Qt Assistant Qt 文件 可以当作 Qt 的 API 使 用。 3.33.3 QtwebkitQtwebkit 的使用的使用 QtWebKit 的超文本标记语言（html） ，可扩展超文本标记语言（XHTML）和 可伸缩矢量图形（SVG）文件，使用级联样式表（CSS）和 JavaScript 的脚本风 格渲染提供的设施，QtWebKit 的基于开源的 WebKit 引擎。其起源可追溯到 K Desktop Environment (KDE)。WebKit 项目催生了面向移动设备的现代 Web 应 用程序。虽然设备本身的能力和形态因素都相当重要,但移动用户最热衷的仍然 是内容。如果移动用户可用的内容只是 Internet 用户可用内容的一个很小的 子集，那么用户体验充其量也只能划分为二等。WebKit 还应用在了桌面的 Safari 浏览器内，该浏览器是 Mac OS X 平台默认的浏览器。不管我们讨论的 是桌面版本还是 iPhone 或 Android 上的浏览器引擎，WebKit 均优先支持 HTML 和 CSS 特性。WebKit 引擎比 Gecko 引擎更受程序员欢迎的原因，除了 其引擎的高效稳定，兼容性好外，其源码结构清晰，易于维护,其中， WebViewDatabase 是 WebKit 模块中针对 SQLiteDataba 对象的封装，用于存储 和获取运行时浏览器保存的缓冲数据、历史访问数据、浏览器配置数据等。该 对象是一个单实例对象，通过 getInstance 方法获取 WebViewDatabase 的实例。 WebViewDatabase 是 WebKit 模块中的内部对象，仅供 WebKit 框架内部使用。 WebKit 开源项目网站上可以找到更多的 WebKit 本身的信息 WebKit 是一个开源 的浏览器引擎，与之相应的引擎有 Gecko（Mozilla Firefox 等使用的排版引 7 擎）和 Trident（也称为 MSHTML，IE 使用的排版引擎） 。同时 WebKit 也是苹 果 Mac OS X 系统引擎框架版本的名称，主要用于 Safari，Dashboard，Mail 和其他一些 Mac OS X 程序。WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS，当年苹果比较了 Gecko 和 KHTML 后，仍 然选择了后者，就因为它拥有清晰的源码结构、极快的渲染速度。QtWebkit 就 是 webkit porting 到 Qt 的平台上。常见的网页浏览器的功能，默认和其他设 置可以配置通过 QWebSettings 类。它可以提供所有 QWebPage 实例通过默认设 置的默认。个别属性可以是 overidden 页面对象的具体设置。那么 Qt 的集成 webkit 能够带来哪些优势呢： （1）快速创建包含实时网络内容和服务的应用程序。 （2）在一个应用程序中集成网络和本地内容。 （3）可以在不同平台上运行开发的 web 应用。 3 3.5.5 QtQt 的工具的工具 QtQt DesignerDesigner 和和 QtQt 助手助手 AssistantAssistant Qt Designer 是使用 Qt 组件设计和生成图形用户接口的 Qt 工具.可在所见 即所得的方式下组合定制 Widget 或窗口,并可使用不同的样式和分辨率 (resolution)进行测试. 使用 Qt Designer 生成的 Widget 和窗体与程序代码无 缝整合,使用 Qt 的信号和槽机制,可方便的向图形元素指定行为.所有在 Qt Designer 中设置的属性都可以动态的与代码同步.而且,利用 Widget 增强和定 制插件特性,可以在 Qt Designer 中使用自定义的组件. 启动起来的 QtDesigner 如下图 3.5 所示 8 图 3.5 Qt Designer 界面 Qt 的 Assistant 当作 Qt 助手，将提出一个标准的主窗口风格的应用程序的菜 单栏和工具栏。如图 3.6 所示 图 3.6 Qt Assistant 打开界面 左侧的导航窗口称为“侧栏” ，并在右侧，占用了大部分的空间，是文档窗口。 默认情况下，Qt 的参考文档的主页显示在文档窗口。通过左侧侧栏进行搜索， 点击侧边栏上的“索引”选项卡（或按 Ctrl +） 。在“寻找”行编辑，输入一 个字，例如“lineedit” 。当键入时，发现 API 中存在的话，显示的文本会变色 匹配，双击它或按 Enter 将显示相关页面。 9 4 4 htmlhtml 编辑器的需求分析编辑器的需求分析 4 4.1.1 调查分析调查分析 根据对市场上的 html 编辑器分析和调查，并仔细咨询过一些专业的计算机 人员，最后根据自己客观技术水平的限制，现阶段知识水平做出一个有基本功 能的 html 编辑器 最后确定下编辑器的如下功能 （1）打开本地存在的 html 文件 （2）连接到 WWW 网或者 FTP 网站实现浏览器功能 （3）清空 html 编辑区 （4）预览 html 代码效果 （5）保存 html 代码 （6）退出 html 编辑器 4 4.2.2 设计设计功能结构图功能结构图 根据上述要求画出其功能结构图如 4.1 所示： 图 4.1 html 编辑器功能结构图 10 4.3 html 编辑器的关键技术解析编辑器的关键技术解析 项目实现解析 html 代码的主要功能是调用 Webkit 类实现的。Webkit 源代 码由三大模块组成 1.WebCore，2.WebKit，3.JavaScript。当输入一个 html 文 件，WebCore 的职责是解析每个 html Tag，以及它们之间的从属关系，生成一 棵树状的数据结构（DOM Tree），然后结合 html 文件中指定的 CSS 定义，确定 DOM Tree 中每个节点的在整个页面中的位置，以及颜色字体等等。布局与渲染 效果的确定，以属性和属性值的形式，存放在另一棵树状数据结构中，这另一 棵树称之为 Rendering Tree。通常情况下，Rendering Tree 的结构与 DOM Tree 大致相同，基本上 DOM Tree 里面每一个节点，在 Rendering Tree 里都有 对应的节点。QWebView 用于浏览网页。一个 QWebView 实例 QWebPage。 QWebPage 提供一个页面中访问文档的结构，描述的功能，如帧，导航历史记录， 并编辑内容的“撤消/重做栈。html 文件可以嵌套在一个框架中使用的框架。 在 html 中的个别帧表示使用 QWebFrame 类。本类包括 JavaScript 窗口对象的 桥梁，并可以使用 QPainter 绘制。每个 QWebPage 有一个 QWebFrame 对象作为 其主框架，主框架可能包含许多子框架。从网页内，可通过个别元素的 HTML 文 档 DOM JavaScript 接口。此 API 相当于在 QtWebKit 的由 QWebElement 代表。 QWebElement 对象得到使用 QWebFrame findAllElements（）和 findFirstElement（）与 CSS 选择器查询的功能。 信号和槽机制是 Qt 编程的基本。在这次设计中，信号和槽技术支撑起这个 程序的所有功能。无论是菜单激发，按钮，还是生成预览效果，都离不开信号 和槽技术，信号和槽技术使得编程人员不需要知道对象相互关系就可以帮助对 象绑定在一起。声明信号和槽，并且实现发出的信号和槽。槽几乎和普通的 C+成员函数完全一样。它们都可以是虚函数(virtual)；它们都可以被重载 (overload)；它们都可以是公共的(public)，保护的(protected)或者私有的 (private)；它们都可以像其他 C+成员函数一样被调用；他们的参数都可以是 任何类型的。唯一的区别是，槽还可以被连接到信号，它将在每次信号发出后 自动的被调用。当事件发生时，某个部件（或对象）就会发射信号。比如，当 一个按钮部件被点击时，它就会发出“被点击“这个信号。开发者可以选择创 建一个函数，并使用 connect()来把这个信号与槽关联起来。Qt 的信号与槽机 制并不要求这些相关的类互相了解，这就使得开发可以高度重用变得更容易。 由于信号与槽是类型安全的，类型错误会以警告的方式（被编译器）报告出来 并且不会引起程序崩溃。在应用程序运行期间的任何时候，信号与槽的连接都 可以被添加或移除。它们可以在信号被立即或者安排到以后去发射时建立起来， 而且可以用于不同对象间的多线程应用中。信号与槽机制是使用标准 C+实现 的。本次设计中具体用到的信号和槽如下： connect(centralWidget- webView,SIGNAL(loadFinished(bool),this,SLOT(updateTextEdit(); connect(openUrlAct, SIGNAL(triggered(), this, SLOT(openUrl(); connect(saveAct, SIGNAL(triggered(), this, SLOT(save(); connect(exitAct, SIGNAL(triggered(), this, SLOT(close(); connect(aboutAct, SIGNAL(triggered(), this, SLOT(about(); 11 connect(aboutQtAct, SIGNAL(triggered(), qApp, SLOT(aboutQt(); 通过以上信号和槽函数实现 html 编辑器菜单栏的功能。 12 5 5 htmlhtml 编辑器的详细设计编辑器的详细设计 5.15.1 开发环境的构建开发环境的构建 本设计是在安装有 Ubuntu 的 9.04 为宿主机开发，安装 Qt4.7 版本，并用 普通用户的权限切换到家目录用命令 vi .bashrc，在末尾加上代码如图 5.1： 图 5.1 构建环境添加代码截图 5 5. .2 2 htmlhtml 编辑器的设计流程编辑器的设计流程 （1）用 Qt Desiger 设计器设计基本界面,如图 5.2 所示： 13 图 5.2 QtDesiger 设计器设计的基本界面 （2）用代码生成菜单栏和各个菜单项并连接各个槽函数，核心代码如下所示： 设计菜单项的核心代码图 5.3 和图 5.4 如下图所示： 图 5.3 设计菜单项 1 图 5.4 设计菜单项 2 把设计好的菜单项添加到菜单栏如图 5.5 所示： 14 图 5.5 添加各个菜单项到菜单栏 5 5. .3 3 htmlhtml 编辑器的逐步实现编辑器的逐步实现 （1） 基本界面的实现QtDesiger 设计器。编辑区用来编辑 html 代码， 使用的用 QPlainTextEdit 控件，html 预览区是用来显示网页的用 QWebView 控 件，两个按钮用 QPushButton 控件，布局形式（顺序不可打乱）： 两个按钮采用水平布局 按钮和 QPlainTextEdit 采用垂直布局 整个采用垂直布局 （2）用代码跑起基本界面，运用 Qt 编程知识，编辑 previewer.h，previewer.cpp 和 main.cpp 函数，跑起基本界面。 （3）详细功能的实现：用 QMainWindow 作为顶极容器，利用其提供的 菜 单条设计菜单选项和菜单，并把菜单选项加入到菜单中去，设计各个槽函数， 连接其功能，由于 Qt 的良好封装性，html 代码的预览直接调用 Qt 中类实现其 功能。 5.5.4 4 测试各个模块测试各个模块 (1)跑起基本界面 如图 5.6 所示： 15 图 5.6 测试基本界面是否生效 (2)看菜单栏是否成功（如图 5.7,5.8 所示） 图 5.7 File 菜单 图 5.8 Help 菜单 (3)手动编辑一个简单的 html 程序预览（如图 5.9 所示） 16 图 5.9 测试手动编辑的 html 代码 (4)链接 URL 地址看是否成功：连接 WWW 网站：依次打开 File-Open URL(如下图 5.10，5.11 所示)： 图 5.10 测试打开菜单项 图 5.11 测试打开 URL 点击 OK 键后可以连接百度主页(如图 5.12 所示)： 17 图 5.12 打开百度主页 18 6 6 项目总结项目总结 通过两个月的努力，在老师和同学的帮助下顺利完成 html 编辑器的编写 和毕业论文。这个总结，为我在郑州大学四年本科生活划上一个完美的句号。 我选的题目是 html 编辑器，之所以选这个题目，是因为我想用我学习过的知识 编写一个相对完美软件，刚刚开始的时候，题目定下来了，但是内容却一再让 我陷入迷茫，该如何下手？从哪儿作为切入点？用什么语言作为设计语言？等 等一系列困难，在真正做起来的时候却发现自己的知识太少，很多知识掌握不 牢固，很多知识虽然在理论上