[发明专利]一种HTML网页源码的可视化编辑和生成方法

说明书

本发明公开了一种HTML网页源码的可视化编辑和生成方法：解析待编辑的初始HTML网页源码，为HTML标签添加扩展标识属性，生成标识HTML源码；解析标识HTML源码，将所有网页脚本/CSS样式标签替换为不重复的HTML注释标签，生成编辑HTML源码；读取标识HTML源码，插入可视化操作支持库和脚本/样式标签映射表，生成可视HTML源码；将可视HTML源码和编辑HTML源码载入网页，分别渲染为可视化操作网页和隐藏iframe；用户通过网页执行多种可视化操作；可视化操作支持库将用户的可视化操作变更信息同步至隐藏iframe中相同扩展标识的元素；可视化操作支持库从隐藏iframe中读取HTML内容文本，复原脚本/样式标签，生成可视化编辑结果HTML源码。解决了现有编辑器无法进行复杂HTML网页源码可视化编辑的问题。

技术领域

本发明涉及网页可视化编辑技术领域，具体涉及一种HTML网页源码的可视化编辑和生成方法。

背景技术

当前，已有很多基于web技术的HTML源码可视化编辑器，使用户能够以所见即所得的方式输入和编辑内容，为web应用提供了直观和友好的交互操作支持。

不过，这些编辑器仅能支持简单的HTML标签片段源码，无法支持复杂的HTML网页源码(包含网页脚本、CSS样式、引入库等)，对于一些即要支持可视化编辑HTML，又要支持插入网页脚本和CSS样式的web应用需求，则无法支持。

发明内容

为此，本发明提供一种HTML网页源码的可视化编辑和生成方法，以解决现有编辑器无法进行复杂HTML网页源码可视化编辑的问题。

为了实现上述目的，本发明提供如下技术方案：

本发明公开了一种HTML网页源码的可视化编辑和生成方法，所述方法为：

S1、解析待编辑的初始HTML网页源码，为HTML标签添加扩展标识属性，生成标识HTML源码；

S2、解析标识HTML源码，将其中所有网页脚本/CSS样式标签替换为不重复的HTML注释标签，生成编辑HTML源码，同时将上述替换内容保存为以HTML注释标签为关键字的脚本/样式标签映射表；

S3、读取标识HTML源码，插入可视化操作支持库和脚本/样式标签映射表，生成可视HTML源码；

S4、将可视HTML源码和编辑HTML源码载入网页浏览器，分别渲染为可视化操作网页和隐藏iframe；

S5、用户通过使用可视化操作网页内的可视化操作支持库提供的功能，执行插入、选中、编辑可视化操作；

S6、同步变更信息，可视化操作支持库记录用户的可视化操作变更信息，记录操作HTML元素的扩展标识属性值，将操作变更信息同步更新至隐藏iframe中具有相同扩展标识属性值的HTML元素；

S7、可视化操作支持库从隐藏iframe中读取HTML内容文本，复原脚本/样式标签，最终生成可视化编辑结果HTML源码。

进一步地，所述可视化操作支持库是提供可视化编辑操作功能的网页脚本库，功能包括：插入元素、选中元素、编辑内容、编辑样式。

进一步地，所述S5步骤中，可视化操作支持库将插入、选中、编辑操作即时渲染至可视化操作网页。

进一步地，所述同步变更信息过程中，插入网页脚本和CSS样式的操作，则为其生成一一对应的HTML注释标签插入至隐藏iframe，同时保存至脚本/样式标签映射表。

进一步地，所述S7步骤中，可视化操作支持库从隐藏iframe中读取HTML内容文本，删除其中所有HTML标签的扩展标识属性，将其中所有在脚本/样式标签映射表中存在的HTML注释标签，替换为对应的脚本/样式标签，最终生成可视化编辑结果HTML源码。

本发明具有如下优点：