嵌入式html编辑器的设计和实现

嵌入式HTML编辑器的设计和实现摘要随着编程技术的日益大众化,普遍化,大量的编程语言被更多的人们所掌握,HTML语言作为一种简单易懂的标签语言更是倍受编码爱好者的青睐。编码语言的普及化增高随之带来的是对于编辑器功能的需求提高。一款好的编辑器不仅要实现最基本的功能，将代码语言编译成计算机可识别的机器语言；还需要具有舒适友好的编译环境界面和方便的文本处理功能。这样的编辑器有助于提高编码者的编辑效率还能提高初学者继续学习下去的兴趣。因此，为了更加方便自己的编码，提高自己的编码效率，所以自己设计实现了一款简单的可视化HTML编辑器。编辑器中实现解释标签功能主要是使用了QT中的WEBKIT技术，在该模块中主要有三个类分别为QWEBVIEW、QWEBPAGE和QWEBVIEW,它们其中包含的方法就可实现HTML标签的解释功能，并可实现网页的逆解析过程，可视化界面中实现网页的浏览也是利用了这一技术，因此，这一技术是本编辑器使用的核心技术。在搭建可视化编辑器的过程中使用了大量QT中封装的类，其中最大的一个类是管理布局栈类，将水平布局和垂直布局放在其中，这样就可较方便的实现不同的布局相互切换，这样就可根据编程者的个人喜好去改变界面的布局了。本论文中重要介绍了项目的研发背景，所完成的功能和研发过程，重点讲解了主要技术、设计思想、解决方案。关键词HTML编辑器；WEBKIT；可视化界面；设计；EMBEDDEDHTMLEDITORDESIGNANDIMPLEMENTATIONABSTRACTWITHTHEGROWINGPOPULARITYOFPROGRAMMINGTECHNIQUES,GENERALIZATIONALOTOFPROGRAMMINGLANGUAGESAREMOREPEOPLETOGRASP,HTMLLANGUAGEASANEASYTOUNDERSTANDLANGUAGEISMUCHFAVOREDBYTHEENCODINGLOVERSTHEINCREASEDPOPULARITYOFCODEDLANGUAGEISEDITEDANDBROUGHTDEMANDFORIMPROVEDFUNCTIONALITYAGOODEDITORNOTONLYTOACHIEVETHEMOSTBASICFUNCTION,THECODEISEDITEDINTOMACHINELANGUAGERECOGNIZABLEITALSONEEDTOHAVEACOMFORTABLEENVIRONMENTFRIENDLYINTERFACEANDEASYTOEDITTEXTPROCESSINGFUNCTIONSSUCHEDITORSHELPINCREASEEDITINGEFFICIENCYCODINGBEGINNERSWHOCANRAISETHEINTERESTTOCONTINUELEARNINGFOREVERTHEREFORE,INORDERTOMOREEASILYENCODETHEIROWNTOIMPROVETHEIRCODINGEFFICIENCY,SOTHEIRDESIGNANDIMPLEMENTATIONOFASIMPLEVISUALHTMLEDITOREDITORACHIEVEDMAINLYEXPLAINEDLABELSUSINGTHEQTWEBKITTECHNOLOGY,THEMODULEHASTHREEMAINCATEGORIESNAMELYQWEBVIEW,QWEBPAGEANDQWEBFRAMEWHICHCONTAINSMETHODSTHATTHEYCANACHIEVEEXPLAINTHEFUNCTIONALITYOFHTMLTAGS,ANDTOACHIEVEINVERSEPARSINGTHEPAGE,VISUALINTERFACEISALSOIMPLEMENTEDINWEBBROWSERSTAKEADVANTAGEOFTHISTECHNOLOGY,SOTHISTECHNOLOGYISTHECORETECHNOLOGYUSEDINTHEEDITORUSETHEVISUALEDITORTOBUILDTHECOURSEINALOTOFQTTYPEOFPACKAGE,THELARGESTOFWHICHISTHEMANAGEMENTOFACLASSSTACKCLASSLAYOUT,THEHORIZONTALANDVERTICALLAYOUTINWHICHTHELAYOUT,SOYOUCANACHIEVEMORECONVENIENTTOSWITCHBETWEENDIFFERENTLAYOUTSTHISCANBEBASEDONTHEPERSONALPREFERENCESOFTHEPROGRAMMERTOCHANGETHELAYOUTOFTHEINTERFACETHISPAPERDESCRIBESTHEDEVELOPMENTOFANIMPORTANTPROJECTBACKGROUND,FUNCTIONANDDEVELOPMENTPROCESS,DONETOHIGHLIGHTTHEMAINTECHNICAL,DESIGNIDEAS,SOLUTIONSKEYWORDSHTMLEDITORWEBKITCLASSDESIGN目录摘要IABSTRACTII1引言111研究现状112主要研究的目的及内容113研究方法及设计思路1131研究方法1132设计思路12应用需求分析与可行性分析321应用需求分析322运行需求分析323其他需求分析324可行性分析3241经济可行性3242技术可行性4243运行可行性4244时间可行性4245法律可行性425程序开发步骤43相关技术简介631QTCREATOR简介632WEBKIT模块详析6321QWEBVIEW类6322QWEBPAGE类7323QWEBFRAME类733HTML语言介绍84系统分析941程序中使用的类及成员9411类名9412QT中的类名10413QT函数中的成员函数名及成员变量1042基础主控流程图1343成员槽函数流程图1544类图195系统设计2151概要设计2152系统结构设计2153详细设计21531可视化主界面设计21532可视化菜单设计24533逻辑代码设计336系统调试与测试3561程序调试3562程序的测试35621测试的重要性及目的35622测试的步骤36623测试的主要内容36结束语39参考文献40致谢41外文原文42中文翻译621引言11研究现状编译器设计最近的发展包括首先，编译器包括了更加复杂算法的应用程序它用于推断或简化程序中的信息；这又与更为复杂的程序设计语言的发展结合在一起。其中典型的有用于函数语言编译的HINDLEYMILNER类型检查的统一算法。其次，编译器已越来越成为基于窗口的交互开发环境（INTERACTIVEDEVELOPMENTENVIRONMENT，IDE）的一部分，它包括了编辑器、连接程序、调试程序以及项目管理程序。这样的IDE标准并没有多少，但是对标准的窗口环境进行开发已成为方向。另一方面，尽管近年来在编译原理领域进行了大量的研究，但是基本的编译器设计原理在近20年中都没有多大的改变，它现在正迅速地成为计算机科学课程中的中心环节。现在随着语言的发展，编译器也呈现出井喷式的趋势，整个编译器市场呈现出百家争鸣的态势。其中有些编译器界面设计精美舒适友好，但是功能不够完善；有些编译器功能强大，但操作过于复杂冗余；能作到面面具到的编译器是少之又少；更有些商业编译器还需要付费。因此影响了编程技术的普及广度。因此有许多代码程序员开始自己设计并实现符合自己使用习惯的编译器。这种趋势必将继续发展下去。HTML语言作为一种标签解释类语言在当前发展情况下,很少有专门的编辑器,一般情况下使用记事本工具进行编辑然后保存为HTML扩展名的文件，再使用浏览器打开才能查看编辑结果。这样就造成了过程操作上的繁琐，导致程序员的工作效率不高，会造成整个项目流程不能顺畅的进行下去。这些都是传统的HTML编辑过程的弊端。因此，本项目主要就是为了解决传统HTML的编写过程中编辑界面和展示界面分离的弊端，以提高工作效率。12主要研究的目的及内容本课题的主要目的是使HTML代码的编辑更清晰化，透明化，便于操作，使编辑过程和结果展示处于同一界面之上。通过功能模块的优化组合实现不同的编程细节，使编辑过程实现最大程度的便利,并能自动匹配标签,使编辑代码过程出错率降至最低。使用面向对象的编程理念，将编译器的主窗口封装成类。并将编译器的功能抽象为函数封装于主窗口类中。使用QTCREATER工具，调用QT封装成的函数去实现可视化的编程，并且实现HTML的正向编译、网页内容的逆向编译和编写窗口与展示窗口的布局改变。13研究方法及设计思路131研究方法随着编程技术的普及，开发出功能强大、界面友好舒适且操作简单的HTML编辑器就迫在眉睫了。针对上述问题，采用软件工程的开发原理，依据软件流程过程规范，按照需求分析、概要设计、详细设计、程序编码、测试、软件应用、软件维护等过程开发了一个HTML的编辑器。采用QTCREATOR作为开发工具，基于C语言并大量使用QT中封装的类及类的成员变量和成员函数，保证了程序运行的效率和编译的正确性。132设计思路（1）程序应满足HTML代码的正向解析和逆向解析，可以根据编辑者需求改变编辑框和展示框的布局，满足熟练编程人员和新手的日常编辑需求，并达到操作过程中的直观，方便，实用等要求；（2）系统采用模块化程序设计方法，既便于程序功能的各种组合和修改，又便于以后新功能的加入和程序的升级；（3）程序应具备基本的文本编辑功能；（4）尽量采用代码去完成界面的设计和布局，这样有利于界面控件精细化设计更有利于保存界面的美观与完整性，有益于去改动升级编译器的外观界面。2应用需求分析与可行性分析改变传统的的HTML编辑过程和展示过程异步的局面，是有效提高HTML语言编辑效率的好方法，并且为程序员提供一个舒服适合自己的编辑界面也是提高程序员编辑效率的方法，因此此编辑器应具备基本的文本编辑器的功能如改变字体大小、类型、颜色，编辑器还需要具有一个特殊功能即展示框浏览器功能，还需要具有界面布局的改变功能。21应用需求分析硬件处理器COREI5M480267GHZ双核笔记本处理器内存3GBDDR31333MHZ/DDR31333MHZ硬盘WDCWD5000BEKT60KA9T0500GB/7200转/分程序软件QTCREATOR481UBUNTU1204LTS系统的性能要求通常指系统需要的存储容量以及后援存储，重新启动和安全性,运行效率等方面的考虑。硬件系统环境CORE5600、1GMB（RAM）、120GB（HD）。系统运行时对数据的保密性要求不高对一般的数据不要求进行加密。此外，对其它软件几乎没有依赖性，程序健壮性较好22运行需求分析硬件条件酷睿CPU、512MRAM、20G硬盘以上的PC机。软件条件UBUNTU1204QTCREATOR以上23其他需求分析本系统有较好的可维护性、可靠性、可理解性、效率。易于用户理解和操作。可维护性包括了可读性、可测试性等含义。可靠性通常包括正确性和健壮性。开发过程中，在各种矛盾的目标之间作权衡，并在一定的限制的条件下（经费、时间、可用的软、硬件资源等），使上述各方面最大限度的得到满足。24可行性分析241经济可行性经济可行性研究是对组织的经济现状和投资能力进行分析，对程序建设运行和维护费用进行估算，对程序建成后可能取得的社会和经济效益进行估计。由于本程序是作为毕业设计由我自己开发的，在经济上的投入甚微，程序建成之后将为自己和同学编译HTML代码提供很大的方便，估算新程序的开发费用和今后的运行、维护费用，表21开发项目软硬件需求表估计新程序将获得的效益，并将费用与效益进行比较，看是否有利。开发、运行和维护费用主要包括软件开发费用由自己开发，则该项费用可以计入下面的人员费用一项；培训费用，饭费，住宿费；消耗品费用无。所有开支都不大，只需维持自己的生活所需费用，所以经济上是可行的。242技术可行性技术可行性要考虑现有的技术条件是否能够顺利完成开发工作，软硬件配置是否满足开发的需求等。HTML编译器用的是C开发语言，使用QTCREATOR编译环境编译，调试也相对简单，当前的计算机硬件配置也完全能满足开发的需求，因此在技术上是绝对可行的。软件方面由于C语言是相对底层的面向对象的编程语言，且保留有指针这种特殊类型,它们速度快、编写简单、容量大、可靠性能高、价格低，完全能满足系统的需求。243运行可行性对新编译器运行后给现行编译器带来的影响（包括编程习惯、编程效率、工作环境等）进行估计和评价。同时还应考虑现有编码者使用、新特性的补充，分析在给定时间里能否完成预定的程序开发任务等。运行可行性是对编程习惯的影响，编程效率和环境对程序的适应性及编码者对程序新特性的了解学习计划的可行性。当前对于已经形成根深蒂固编码习惯的编码者来说改变编码风格有些困难，但有适合自己的新特性产生时也是可以接受的；对于新手来说去适应并形成程序的编码习惯是很容易的，所以在程序的运行上是可行性的。本程序的开发使用QTCREATOR的编译环境，主要运用其中的WEBKIT模块技术实现核心的编译过程。244时间可行性从时间上看，在实训的的时间里学习了相关知识，并开发了HTML编译器，时间上是有点紧，有些功能不够完善且界面也不够美观，但大体功能已经都实现，通过两个月的设计实现项目基本完成。245法律可行性所有技术资料都为合法。开发过程中使用的开源开发工具不存在知识产权问题。未抄袭任何已存在的HTML编译器，不存在侵犯版权问题。开发过程中，是以开发编译器模型为目的的未涉及任何法律责任。综上所述，本程序的开发从技术上、从经济上、从法律上都是完全可靠的。25程序开发步骤一般说来，这种程序的开发大致可经过概要设计和详细设计两过程。上述各个过程排列成一个严格的线性开发序列，在每个工作过程中均可产生完整的技术文档作为下一阶段工作的指导和依据，每一阶段都应对文档进行评审，确信该阶段工作已完成并达到要求后才能进入下一阶段，同时在以后的工作中不能轻易改变前面经过评审的成果。上述开发方式的主要优点是便于开发工作的组织和管理，并且可大大降低程序开发的复杂性。国内外许多程序开发的实例都证明这是一种行之有效的开发方式。国外曾有人对一些软件项目开发各阶段的工作量进行了统计，结果表明，在开发过程中各工作阶段所占全部工作量的比重分别达到系统分析系统设计编程模块调试系统调试2015202520。由此可见，程序编写在开发工作中只占很小比例，而调试工作却占整个开发工作量的一半左右，因此“系统开发就是编程”的习惯说法显然是片面的。另据统计，在建立管理信息系统的三个阶段中，总体规划和系统开发阶段的工作量约占整个工作量的2/3，而运行、维护阶段要占1/3，这说明一个管理信息系统开发后，仍应十分重视它的维护工作，以便使程序不断完善并充分发挥其作用。3相关技术简介31QTCREATOR简介QTCREATOR的是一个跨平台的IDE（集成开发环境），以量身打造的QT开发人员的需求。是QT项目的一部分。先进的代码编辑器QTCREATOR的重点是提供功能，可帮助新QT用户启动和运行速度更快，同时也促进经验丰富的QT开发人员的生产力。用C、QML和ECMASCRIPT的支持代码编辑器快速的代码导航工具语法高亮和代码完成在您键入静态代码检测和风格的提示支持源代码重构上下文敏感的帮助代码折叠括号匹配和括号选择模式可视化调试器该可视化调试器的C是知道许多QT类的结构，从而提高了其显示QT的数据清楚地能力。此外，QTCREATOR的显示从GDB的清晰和简明的方式的原始信息。中断程序的执行。通过该计划的行由行或指令由指令步骤。设置断点。检查调用栈内容，观察家，以及局部和全局变量。GUI设计师集成的GUI布局和形式建造者为C项目，它允许您快速设计，并使用通过，将在你的应用程序中使用相同的部件屏幕上的形式建立窗体和对话框。形式是全功能的，并且他们可以立即预览，以确保它们的外观和感觉完全按您预期。32WEBKIT模块详析QTWEBKIT的依赖于QTGUI。QWEBVIEW可以用于打开多个网页，而里面具体的网页对象是QWEBPAGE，QWEBPAGE通过MAINFRAME（）方法可以得到。321QWEBVIEW类QWEBVIEW类提供了用于查看和编辑网页的小工具。QWEBVIEW是主要部件组成QTWEBVIEW的网页浏览模块。它可以用在各种应用程序中显示从因特网获取的网页内容。一个网站可以用LOAD函数加载到QWEBVIEW类中。像所有的QTWIDGET控件都需要借助SHOW来显示。并且SETURL也可以被用于加载一个网站。如果有完善的HTML内容，也可以使用SETHTML来代替。当视图开始加载时，LOADSTARTED函数会发送一个信号。每当网络视图中的一个元素正在完成加载时，LOADPROGRESS函数就会发送一个信号，如嵌入图像，脚本等。当视图已经完成加载后，LOADFINISHED会发出一个信号，返回的参数TRUE或FALSE，表示成功与失败。PAGE函数返回一个指向网页的对象的指针。可以使用QWEBSETTINGS类的成员函数SETTINGS去修改WEB视图的设置。使用QWEBSETTINGS类可以修改如JAVASCRIPT和插件图31WEBKIT等的默认字体，启用或禁用功能。一个HTML文件的TITLE属性可以用TITLE访问对应属性。此外，网站还可以指定一个图标ICON属性，ICON属性可以使用ICON函数获得。如果TITLE和ICON属性发生改变时，函数TITLECHANGED和TITLECHANGED会发送对应信号。TEXTSIZEMULTIPLIER可以修改在网页视图中显示的整体文本大小。更多的功能，例如重新加载视图，选定的文本复制到剪贴板，或者粘贴到视图，也封装在内部的QACTION类的对象内，这些可以通过PAGEACTION函数返回到QACTION类的对象的。这些操作可以通过使用TRIGGERPAGEACTION函数去触发，这些操作可以直接添加到工具栏或菜单中去。QWEBVIEW类维持着这些操作的返回状态，但是允许操作属性的修改，如文本和图标。一个QWEBVIEW类可以通过PRINT函数打印在QPRINTER类中。这个函数被定义为槽函数，并且可以被QPRINTPREVIEWDIALOG类的PAINTREQUESTED函数发送的信号所连接。如果需要提供的网站，允许用户打开新的窗口，如弹出窗口的支持，可以继承QWEBVIEW类并且重新实现CREATEWINDOW函数。322QWEBPAGE类QWEBPAGE类提供了一个对象来查看和编辑网页文件。QWEBPAGE有主框架负责网页内容，设置导航的链接和操作的历史。这个类可以和QWEBFRAME类在一起使用，以提供功能像类QWEBVIEW在AWIDGETLESS环境。QWEBPAGE的API与QWEBVIEW的非常相似，例如被提供的常见功能，如ACTION（QWEBVIEW类的PAGEACTION方法）、TRIGGERACTION、FINDTEXT和SETTINGS。更多的QWEBVIEW类中的函数可以在QWEBPAGE的主框架中，可以通过MAINFRAME函数找到。例如QWEBPAGE类中的LOAD、SETURL和SETHTML可以使用QWEBFRAME类去访问。当网页开始加载时LOADSTARTED函数会发出信号。每当网页中的一个元素正在完成加载时，LOADPROGRESS函数就会发送一个信号，如嵌入图像，脚本等。当网页内容已经完成加载后，LOADFINISHED会发出一个信号，独立于脚本执行，返回的参数TRUE或FALSE，表示成功与失败。323QWEBFRAME类QWEBFRAME类表示一个WEB页面的框架。QWEBFRAME表示内部网页中的框架，每个QWEBPAGE对象包含至少一个框架，想要获得就使用QWEBPAGEMAINFRAME函数，额外的框架使用HTMLOR元素去构建。一个框架可以使用LOAD或SETURL去加载，另外，如果有完善的HTML内容，也可以使用SETHTML来代替。PAGE函数返回一个指向网页对象的指针。该QWEBFRAME类还提供了方法来检索目前由框架加载的URL（如URL），以及作为URL最初请求被加载（如REQUESTEDURL），这些方法使得有可能在URL之前和之后的DNS解析或重定向检索在加载过程中发生。如果加载成功，该REQUESTEDURL也匹配到URL添加到框架历史（QWEBHISTORY）。一个HTML文件的TITLE属性可以用TITLE访问对应属性。此外，网站还可以指定一个图标ICON属性，ICON属性可以使用ICON函数获得。如果TITLE和ICON属性发生改变时，函数TITLECHANGED和TITLECHANGED会发送对应信号。TEXTSIZEMULTIPLIER可以修改在网页视图中显示的整体文本大小QWEBFRAME对象被创建，并且被网页控制。当一个新的框架被创建，信号就会发给网页的FRAMECREATED函数。有多种方法可以检查一个框架的内容，HITTESTCONTENT函数可以被用来找到坐标元素，DOCUMENTELEMENT、FINDALLELEMENTS、FINDFIRSTELEMENT，可以用来访问底层DOM树。一个QWEBFRAME类可以通过PRINT函数打印在QPRINTER类中。这个函数被定义为槽函数，并且可以被QPRINTPREVIEWDIALOG类的PAINTREQUESTED函数发送的信号所连接。33HTML语言介绍HTML或超文本标记语言是用来制作网页的标准标记语言。HTML是写在HTML元素组成的尖括号标记（如）的形式。HTML标签最常用来像和对，虽然有些标签代表空元素，所以是不成对的，例如。在一对的第一个标签是开始标签，第二个标签是结束标记（他们也被称为开放标签和结束标签）。WEB浏览器的目的是读取HTML文档和它们组合成可见的或可听的网页。浏览器不显示HTML标记，而是使用标签来解释页面的内容。HTML描述了网站的结构语义以及线索呈现，使之成为一种标记语言，而不是一种编程语言。HTML元素形成的所有网站的基石。HTML允许图像和对象将要被嵌入，并且可以用于创建交互式表单。它提供了表示为文字，如标题，段落，列表，链接，报价和其他物品的结构语义来创建结构化文档的方法。它可以嵌入语言编写的（如JAVASCRIPT）影响的HTML网页的行为脚本。WEB浏览器也可以指层叠样式表（CSS）来定义文本和其他材料的外观和布局。W3C的，维护者的HTML和CSS的标准，鼓励使用CSS在明确表象的HTML。HTML有很多的版本，下面介绍一下其发展史。HTML20这已作为一个IETFRFC于1995年，由一些浏览器如马赛克得到了支持。HTML32这个版本是第一个W3C建议。它有更广泛的浏览器支持（部分原因是因为有很多更多的浏览器）。它成为1997年1月的建议。HTML40和HTML4011997年12月，W3C发布这个升级为HTML32的建议。它增加了更多的功能和标签并提供了三个版本过渡性的，严格的，和框架。这是更新到4011999年12月有一些变化的规范。XHTML10XHTML10是HTML401的XML的下一个规则的改写，它已作为一项建议是由W3C于2000年1月它有更严格的语法，并要求所有的XHTML是有效的，良好的，以正确显示。大多数WEB浏览器呈现XHTML10文档相同的，因为它们呈现HTML401文档。HTML5HTML5开始被开发在2004年，当W3C的HTML工作组决定合并的HTML和XHTML树做的HTML纯粹的基于XML的语言。这让设计师和谁想要一个更灵活的解决方案与选择放弃或创建自己的新规范的浏览器厂商。他们创造了一种称为WEB超文本应用技术工作组或WHATWG新组。HTML5在2008年成为一个W3C工作草案。4系统分析41程序中使用的类及成员411类名PREVIEWER（实体类）MAINWINDOW（主窗口类）以下为主要类中使用的方法名APPLICATION类中的方法（无成员变量）INTEXEC进入主事件循环等待退出函数发送信号PREVIEWER类中的方法（无成员变量）PUBLICPREVIEWER构造函数参数及初值QWIDGETPARENT0PUBLICVOIDON_PREVIEWBUTTON_CLICKED点击编译按钮发生的事件函数（槽函数）MAINWINDOW类中的方法及成员变量PUBLICMAINWINDOW构造函数（无参）PRIVATEVOIDOPEN打开文件函数（槽函数）PRIVATEVOIDOPENURL打开地址输入栏函数（槽函数）PRIVATEVOIDABOUT打开程序介绍窗口函数（槽函数）PRIVATEVOIDSAVE保存编辑好的文本内容函数（槽函数）PRIVATEVOIDUPDATETEXTEDIT显示解释后网页内容的函数（槽函数）PRIVATEVOIDCREATEACTIONS创建事件函数即成员变量赋值函数PRIVATEVOIDCREATEMENUS创建菜单事件函数PRIVATEVOIDSETSTARTUPTEXT文本框初始化文本函数PRIVATEPREVIEWERCENTRALWIDGET编辑器类的指针对象PRIVATEQMENUFILEMENU文件菜单指针PRIVATEQMENUHELPMENU帮助菜单指针PRIVATEQACTIONOPENACT打开文件事件指针PRIVATEQACTIONOPENURLACT打开网址事件指针PRIVATEQACTIONSAVEACT保存文本事件指针PRIVATEQACTIONEXITACT退出事件指针PRIVATEQACTIONABOUTACT关于帮助事件指针PRIVATEQACTIONABOUTQTACT关于QT帮助事件指针以下为槽函数的名称PREVIEWER类中具有以下一个槽函数PUBLICVOIDON_PREVIEWBUTTON_CLICKED点击解释按钮发生事件函数MAINWINDOW类中具有以下若干槽函数PRIVATEVOIDOPEN打开文件函数PRIVATEVOIDOPENURL打开地址输入栏函数PRIVATEVOIDABOUT打开程序介绍窗口函数PRIVATEVOIDSAVE保存编辑好的文本内容函数PRIVATEVOIDUPDATETEXTEDIT显示解释后网页内容的函数412QT中的类名QMAINWINDOW（主窗体类）QMENU（菜单类）QACTION（活动类）QWIDGET（窗口事件反应类）QMESSGEBOX（信息打印类）QMENUBAR（菜单列表类）QFILEDIALOG（文件对话类）QFILE（文件类）QIODEVICE（输入输出设备类）QTEXTSTREAM（文本流类）QINPUTDIALOG（输入对话类）QLINEEDIT（行编译类）QPLAINTEXTEDIT（文本编译类）QWEBVIEW（网页浏览类）QWEBFRAME（网页框架类）QAPPLICATION（应用程序类）QABSTRACTTRANSITION（抽象转换类）QOBJECT（实体类）QSTRING（字符串类）QWEBPAGE（网页类）QDIALOG（对话类）QCOREAPPLICATION（核心应用程序类）413QT函数中的成员函数名及成员变量QMAINWINDOW类中的方法名（无成员变量）VOIDSETCENTRALWIDGET设置主窗口的中心组件QMENUBARMENUBAR创建下拉列表VOIDSHOW显示图形化界面QMENU类中的方法名（无成员变量）QACTIONADDACTION下拉列表中添加选项及对应事件QACTIONADDSEPARATOR在一个下拉列表中分区域QACTION类中的方法名（无成员变量）VOIDSETSHORTCUT设置选项的对应快捷键VOIDSETSTATUSTIP初始化下拉列表中选项键的状态标签QMESSGEBOX类中的方法名（无成员变量）VOIDABOUT弹出文本提示框STANDARDBUTTONINFORMATION弹出一个信息提示框ENUMSTANDARDBUTTON标准按键QMENUBAR类中的方法名（无成员变量）QMENUADDMENU菜单栏中增加选项下拉列表QACTIONADDSEPARATOR划分隔线QFILEDIALOG类中的方法名（无成员变量）QSTRINGGETOPENFILENAME打开目录选取所需打开的文件QFILE类中的方法名（无成员变量）BOOLOPEN打开文件流QIODEVICE类中的方法名（无成员变量）READOLNY宏只读WRITEONLY宏只写QSTRINGERRORSTRING输出错误信息QTEXTSTREAM类中的方法名（无成员变量）QSTRINGREADALL读取所有文件内容QINPUTDIALOG类中的方法名（无成员变量）QSTRINGGETTEXT得到文本QSTRINGGETSAVEFILENAME打开保存目录，保存到所需的目录内QLINEEDIT类中的方法名（无成员变量）ENUMECHOMODE设置怎样显示输入的文本QPLAINTEXTEDIT类中的方法名（无成员变量）VOIDSETPLAINTEXT将打开的文件中的内容写入文本输入框VOIDTOPLAINTEXT将HTML转换成纯文本QWEBVIEW类中的方法名（无成员变量）BOOLLOADFINISHED发送网页加载完成的信号VOIDSETURL清空浏览器并加载新输入的网址QWEBPAGEPAGE返回一个潜在的网页指针VOIDSETHTML将字符串内容编译成HTML语言QAPPLICATION类中的方法名（无成员变量）INTEXEC进入主事件循环等待退出函数发送信号QABSTRACTTRANSITION类中的方法名（无成员变量）VOIDTRIGGERIED触发器函数QOBJECT类中的方法名（无成员变量）BOOLCONNECT将槽函数和对应可视化组件用信号关联起来QSTRINGTR字符串消除歧义，使其统一化QSTRING类中的方法名（无成员变量）BOOLISEMPTY判断是空QWEBPAGE类中的方法名（无成员变量）QWEBFRAMEMAINFRAME返回网页的框架结构QWEBFRAME类中的方法名（无成员变量）QSTRINGTOHTML将网页逆编译成HTML语言42基础主控流程图以上是打开文本槽函数的流程图，调用了QFILEDIALOG类，弹出了打开文本对话框程序启动编译器可视化界面启动Y文本框输入操作N菜单栏点击选择在输入框中HTML语言的输入Y。输入完成点击完成键N。菜单栏点击选择在菜单栏中选择用户需要的功能Y打开FILE选项N打开HELP选项NNY显示框中显示编辑后的网页界面Y点击关闭按钮N继续其他操作N程序关闭Y在HELP下拉列表中选择所需功能在FILE下拉列表中选择所需功能YABOUTNABOUTQTY打开，保存，打开地址N关闭显示项目介绍显示QT的帮助文档YNNYNY打开，打开地址N保存YYNY图41主控流程图43成员槽函数流程图图2打开函数的流程图图3打开文件流程图开始GETOPENFILENAMED打开文件目录ISEMPTY文件打开成功结束NQFILE的对象FILE初始化YOPENREADONLY打开的文件为可读弹处错误提示框UNABLETOOPENFILEINFORMATIONN生成文件流对象QTEXTSTREAMY读取文件流READALL将读取的文件流信息写入文本编辑框SETPLAINTEXTOPEN图42打开文件流程图以下流程图为打开文本函数的流程图，弹出打开文件对话框，描述了打开HTML文本文件的过程。以上两个流程图为打开网址函数的流程和逆解析函数的流程。打开网址的过程是弹出网址对话框后进行的操作。开始QWEBFRAME的对象创建，获得网页信息将QWEBFRAME的对象获得的网页逆编译成HTNL语言文本将获得的文本打印到窗口文本框中结束UPDATETEXTEDITOPENURL开始得到输入栏中的网址字符串GETTEXTOK选项网址字符串为空ISEMPTYY通过输入的网址打开对应网站SETURL结束YNN图43逆解析流程图图44逆解析流程图以上流程图为保存文本函数的流程图，弹出保存文件对话框，描述了保存文本信息的过程。开始SAVE获取并转换用户在文本框中的输入HTML为纯文本获得保存文本的文件名GETSAVEFILENAME文件名是空ISEMPTY生成文件流对象QTEXTSTREAMQFILE的对象FILE初始化结束打开文件为可写OPENWRITEONLYNY将文本内容写入文件流中弹处错误提示框UNABLETOOPENFILEINFORMATIONNY图45保存函数的流程图44类图SETCENTRALWIDGETVOIDMENUBARQMENUBARQMAINWINDOWMAINWINDOWCREATEACTIONSVOIDCREATMENUSVOIDSETSTARTUPTEXTVOIDOPENVOIDOPENURLVOIDABOUTVOIDSAVEVOIDUPDATETEXTEDITVOIDCENTRALWIDGETPREVIEWERFILEMENUQMENUHELPMENUQMENUOPENACTQACTIONSAVEACTQACTIONOPENURLACTQACTIONEXITACTQACTIONABOUTACTQACTIONABOUTQTACTQACTIONMAINWINDOWADDACTIONQACTIONADDSEPARATORQACTIONQMENUQWIDGETPREVIEWERON_PREVIEWBUTTON_CLICKEDVOIDPREVIEWERSETSHORTCUTVOIDSETSTATUSTIPQACTIONEXECQAPPLICATIONABOUTVOIDINFORMATIONSTANDARDBUTTONSTANDARDBUTTONENUMINTQMESSAGEBOXADDMENUQMENUADDSEPARATORQACTIONQMENUBARGETOPENFILENAMEQSTRINGQFILEDIALOGOPENBOOLQFILEERRORSTRINGQSTRINGREADOLNYWRITEONLYQIODEVICEREADALLQSTRINGQTEXTSTREAMGETTEXTQSTRINGGETSAVEFILENAMEQSTRINGQINPUTDIALOGECHOMODEENUMINTQLINEEDITSETPLAINTEXTVOIDTOPLAINTEXTVOIDQPLAINTEXTEDITLOADFINISHEDBOOLSETURLVOIDPAGEQWEBPAGESETHTMLVOIDQWEBVIEWQWEBFRAMESTANDARDBUTTONISEMPTYBOOLQSTRINGMAINFRAMEQWEBFRAMEQWEBPAGETRIGGERIEDVOIDQABSTRACTTRANSITIONCONNECTBOOLTRQSTRINGQOBJECTTOHTMLQSTRINGQWEBFRAMEQDIALOGQCOREAPPLICATION图46主要类的类图以上为本程序中主要使用的类的类图，其中有26个类，其中QT中所有的类的父类是QOBJECT类，其中主要内容是信号和槽、良好的对象属性、有力的事件和事件过滤器、国际化字符设计、定时器为GUI的事件提供毫秒级的支持、优秀的对象树结构、当对象销毁时指针自动设置为0等这些东西。再一个有很多子类的父类就是QWIDGET类，窗口部件是用户界面的一个原子它从窗口系统接收鼠标、键盘和其它事件，并且在屏幕上绘制自己的表现。每一个窗口部件都是矩形，并且它们按Z轴顺序排列的。一个窗口部件可以被它的父窗口部件或者它前面的窗口部件盖住一部分。它俩是其中两个最重要的类。5系统设计本编译器不仅要求能完成编译功能和逆向编译功能，而且还要界面舒适和友好。因此，对于一个成功的编译器设计，功能模块和界面模块的设计是关键。51概要设计在系统需求分析阶段，搞清楚了软件“做什么”的问题，形成了目标程序的逻辑模型。现在我们所要做的就是要把软件“做什么”的逻辑模型变换为“怎么做”的物理模型，即着手实现程序的需求。首先，我们需要描述的是程序的总的体系结构。本编辑器核心就是为了实现HTML标签的解释和逆解析，主要需要实现的功能就是文本编辑功能和界面布局改变的功能。前者是基本功能是该项目的目的决定的，而后者则是为了使编程者更好、更舒适的去完成编程任务，也就是完成软件界面友好性的设计，这个也是本软件的特点。本编辑器能实现人机交互的地方有三个部分即菜单栏、文本编辑框和结果展示框，用户就是通过这几个有机组合的部分去和机器配合。最终实现HTML的编辑器的功能。52系统结构设计程序的概要设计中最重要的就是程序的模块化。模块化是指解决一个复杂问题时自项向下逐层把软件程序划分成若干个模块的过程。每个模块完成一个特定的功能，所有的模块按某种方法组织起来，成为一个整体，完成整个程序所要求的功能。将程序划分为多个模块是为了降低软件程序的复杂性，提高可读性、可维护性，但模块的划分不能是任意的，应尽量保持其独立性。也就是说，每个模块只完成系统要求的独立的子功能，并且与其他模块的联系最少且接口简单，即尽量做到高内聚低耦合，提高模块的独立性，为设计高质量的软件结构奠定基础。在程序的概要设计中采用结构化设计以需求分析阶段产生的数据流图为基础，按一定的步骤映射成软件结构。首先将整个程序化分为几个小问题，小模块。然后，进一步细分模块，添加细节。53详细设计531可视化主界面设计对于一个好的HTML编译器，不仅要求功能强大、操作简单，还要有良好的设计风格和令人舒适的界面。编辑和显示界面非常重要，因为它可以带来更高的代码编辑效率，有利于编码者更好的享受编码的乐趣。本项目中的HTML编辑器的可视化界面包括了文本编辑框、结果显示窗口和菜单栏，它们组成了本HTML编辑器的基本界面框架。本编辑器的界面可以实现所有需要的基本功能。但它的外观还有待改变和提高，可以增添上一些好看的图片和插画；边框也可以从令人突兀的直线和尖角改变成更加具有亲和力的曲线和圆角，这些都是现有可视化界面可改进的地方。FORMFORM以下代码为QWIDGET的类的具体实现，其中包含了窗口的长宽规格，代码逻辑如下00911688窗口标题的结构代码如下FORMQTHORIZONTAL文本编辑窗口的代码如下HTMLEDITOR图51可视化化界面清空按钮可以清空文本编辑框中所有文本内容，清空按钮的代码如下CLEAR编译按钮可以解析文本框中的标签代码，编辑按钮代码如下PREVIEW浏览窗口可以浏览解析后的HTML标签，浏览窗口实现的代码如下HTMLPREVIEWABOUTBLANKQWEBVIEWQWIDGETQTWEBKIT/QWEBVIEWCLEARBUTTONQPLAINTEXTEDIT对象的实现代码如下PLAINTEXTEDITCLEAR566535665398551以上代码为可视化界面的设计代码，设计的是垂直布局的界面。532可视化菜单设计FILE菜单中有保存选项、打开选项、打开网页选项、退出选项EDIT菜单中有撤消、剪切、复制、粘贴选项VIEW菜单中有垂直布局和水平布局两个选项FORMAT菜单中有改变文字颜色选项、改变文字大小选项、改变字体选项、改变字型选项。HELP菜单中有关于编辑器的介绍和关于QT的介绍菜单设计代码槽函数和按键建立联系的代码VOIDMAINWINDOWCREATEACTIONSOPENACTNEWQACTIONTR“/OPEN选项OPENACTSETSHORTCUTSQKEYSEQUENCEOPENOPENACTSETSTATUSTIPTR“OPENANEXISTINGHTMLFILE“CONNECTOPENACT,SIGNALTRIGGERED,THIS,SLOTOPENOPENURLACTNEWQACTIONTR“/OPENURL选项OPENURLACTSETSHORTCUTTR“CTRLU“OPENURLACTSETSTATUSTIPTR“OPENAURL“CONNECTOPENURLACT,SIGNALTRIGGERED,THIS,SLOTOPENURLSAVEACTNEWQACTIONTR“/SAVE选项SAVEACTSETSHORTCUTSQKEYSEQUENCESAVESAVEACTSETSTATUSTIPTR“SAVETHEHTMLFILETODISK“CONNECTSAVEACT,SIGNALTRIGGERED,THIS,SLOTSAVEEXITACTNEWQACTIONTR“E/EXIT选项EXITACTSETSTATUSTIPTR“EXITTHEAPPLICATION“EXITACTSETSHORTCUTSQKEYSEQUENCEQUITCONNECTEXITACT,SIGNALTRIGGERED,THIS,SLOTCLOSEUNDOACTNEWQACTIONTR“/UNDO选项CONNECTUNDOACT,SIGNALTRIGGERED,THIS,SLOTUNDOCOPYACTNEWQACTIONTR“/COPY选项CONNECTCOPYACT,SIGNALTRIGGERED,THIS,SLOTCOPYPASTEACTNEWQACTIONTR“/PASTE选项CONNECTPASTEACT,SIGNALTRIGGERED,THIS,SLOTPASTECUTACTNEWQACTIONTR“/CUT选项CONNECTCUTACT,SIGNALTRIGGERED,THIS,SLOTCUTZITIACTNEWQACTIONTR“/ZITI选项CONNECTZITIACT,SIGNALTRIGGERED,THIS,SLOTZITICOLORACTNEWQACTIONTR“/COLOR选项CONNECTCOLORACT,SIGNALTRIGGERED,THIS,SLOTCOLOR图52可视化菜单BOLDACTNEWQACTIONTR“/BOLD选项CONNECTBOLDACT,SIGNALTRIGGERED,THIS,SLOTBOLDITALICACTNEWQACTIONTR“/ITALIC选项CONNECTITALICACT,SIGNALTRIGGERED,THIS,SLOTITALICUNDERLINEACTNEWQACTIONTR“/UNDERLINE选项CONNECTUNDERLINEACT,SIGNALTRIGGERED,THIS,SLOTUNDERLINEVERTICALACTNEWQACTIONTR“/VERTICAL选项CONNECTVERTICALACT,SIGNALTRIGGERED,THIS,SLOTVERTICALHORIZONTALACTNEWQACTIONTR“/HORIZONTAL选项CONNECTHORIZONTALACT,SIGNALTRIGGERED,THIS,SLOTHORIZONTALABOUTACTNEWQACTIONTR“/