CN103853737A - Html内容可视化编辑方法及*** - Google Patents

Abstract

本发明提供了一种HTML内容可视化编辑方法及***，其中，所述方法包括：获取所要编辑的HTML内容碎片；对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误。所述***包括：获取模块、定位标记模块、编辑模块和判断模块。本发明用于解决现有技术中若不熟悉HTML代码等网页编辑语言而无法对网页进行编辑的问题。

Description

HTML内容可视化编辑方法及***

技术领域

本发明涉及可视化编辑方法及***，尤其涉及一种HTML内容可视化编辑方法及***。

背景技术

随着计算机的日益普及，互联网的蓬勃发展，使得计算机使用者能够通过访问各种网站中的网页来获取所需要的讯息。而网站中的各个网页通常是网站编辑者通过HTML语言（HyperText Markup Language，超文本标记语言）设计出来的。

目前，需要通过HTML代码来设计网站必须熟悉专业的HTML代码。

发明人在实现本发明的过程中发现，现有技术至少存在以下的缺点和不足：

HTML代码较为复杂，若不熟悉HTML代码等网页编辑语言而无法对网页进行编辑。

发明内容

本发明所要解决的技术问题是提供一种HTML内容可视化编辑方法和***，以解决现有技术中若不熟悉HTML代码等网页编辑语言而无法对网页进行编辑的问题。

本发明公开的具体技术方案如下：

获取所要编辑的HTML内容碎片；

对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；

对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；

通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误。

优选的，所述对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层的步骤包括：

发布引擎，以及输出所述HTML内容碎片；

查找所述HTML内容碎片的碎片标记；

依据所述碎片标记，生成所述HTML内容碎片的页面浮层。

优选的，所述HTML内容碎片的页面浮层的显示方式为全页预览或局部预览的方式。

本发明还提供了一种HTML内容可视化编辑***，包括：

获取模块，用于获取所要编辑的HTML内容碎片；

定位标记模块，用于对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；

编辑模块，用于对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；

判断模块，用于通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误。

优选的，所述定位标记模块具体用于：

发布引擎，以及输出所述HTML内容碎片；

查找所述HTML内容碎片的碎片标记；

依据所述碎片标记，生成所述HTML内容碎片的页面浮层。

优选的，所述***还包括：

显示模块，用于显示所述HTML内容碎片的页面，所述HTML内容碎片的页面浮层的显示方式为全页预览或局部预览的方式。

与现有技术相比，本发明具有以下优点：

1）让编辑人员在零接触HTML代码的情况下完成内容更新。

2）简化操作步骤，将模板创建和碎片创建最大程度自动化完成；

3）摆脱HTML代码，在可视化的界面中通过鼠标点击的方式实现模板制作和碎片创建的自动化；

4）在可视化的界面中通过鼠标点击的方式直接进入碎片编辑界面；

5）实现碎片编辑或模板制作都能在同一个界面中完成，避免画面频繁切换。

附图说明

图1是现有技术中网页内容维护的流程图；

图2是本发明实施例一种HTML内容可视化编辑方法的流程图；

图3是本发明又一实施例一种HTML内容可视化编辑方法的流程图；

图4是本发明一种HTML内容可视化编辑方法的具体实例的示意图；

图5是本发明实施例一种HTML内容可视化编辑***的结构图；

图6是本发明又一实施例一种HTML内容可视化编辑***的结构图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

参见图1，是现有技术中网页内容维护的流程图。

从图1中，可以获知现有技术中，网站内容的更新和维护通常依赖于CMS（Content Management System，网站内容管理***），做法是：网站技术支持人员和内容管理人员共同约定，为了便于内容更新，将网页划分为一个个区块，技术支持人员将这些区块制作成碎片，在CMS***中录入碎片信息，并在模板中添加碎片标识。这样就完成了模板制作和创建碎片的整个过程。网站编辑人员需要对网页内容进行不定期更新，通常的做法是进入CMS***的碎片列表，从众多碎片目录中找到需要更新内容的碎片，进入碎片编辑页面修改碎片内容，提交并发布。

从图1中可以看出：现有HTML内容可视化编辑方法的缺陷是：网页内容维护人员即内容编辑人员在在需要更新页面某一个区块的内容时，首先得了解这个区块所对应的是哪个碎片，再进入CMS***中从一层一层碎片目录中找到这个碎片才能进行能容更新，最后回到网页刷新网页检查内容显示是否正常；这个过程存在两个问题：需要在多个窗口来回切换、新的内容编辑人员需要完全掌握各个区块和碎片的对应情况；很显然这增加了人力成本，提高了内容编辑人员的操作门槛；无法实现局部预览；虽然可实现全页预览，但是速度慢，影响工作效率；编辑人员直接面对HTML代码，直接编辑HTML代码，这对编辑人员的技术要求有较高要求，而且容易出错。

综上所述，传统做法的缺点归纳为：操作繁琐，操作界面切换频繁，技术门槛高，易出错，不直观。

参见图2，是本发明实施例一种HTML内容可视化编辑方法的流程图。

S201、获取所要编辑的HTML内容碎片；

S202、对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；

S203、对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；

S204、通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误。

内容可视化编辑：一个网页根据功能结合标签可划分为一个个矩形区块，每个矩形区块被称为“碎片”，每个碎片的内容都需要编辑人员单独来维护，包括录入和更新；对这些碎片的维护称之为“编辑碎片”。传统的编辑碎片的方式是在内容管理***的碎片列表中找到想要编辑的碎片，然后进行内容更新，这种对网站内容维护的方式属于非可视化编辑。可视化编辑就是编辑人员能在网页中看到一个个碎片区块，点击这些区块就可以进入该区块的内容管理界面，实现对内容的更新。

本实施例通过获取所要编辑的HTML内容碎片；对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误；实现了编辑人员在零接触HTML代码的情况下完成内容更新。

参见图3，是本发明又一实施例一种HTML内容可视化编辑方法的流程图。

S301、获取所要编辑的HTML内容碎片；

S302、对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；其中，所述S302、对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层的步骤具体可以包括：

S3021、发布引擎，以及输出所述HTML内容碎片；

S3022、查找所述HTML内容碎片的碎片标记；

S3023、依据所述碎片标记，生成所述HTML内容碎片的页面浮层。

S303、对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；

S304、通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误。

其中，所述HTML内容碎片的页面浮层的显示方式为全页预览或局部预览的方式。

本实施例通过获取所要编辑的HTML内容碎片；对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误；不仅实现了编辑人员在零接触HTML代码的情况下完成内容更新；还实现了在可视化的界面中通过鼠标点击的方式实现模板制作和碎片创建的自动化。

参见图4，是本发明一种HTML内容可视化编辑方法的具体实例的示意图。

首先，在进行HTML内容可视化编辑之前，需要先实现对HTML模板的可视化制作及编辑过程，具体过程如下所述：

网站编辑提出制作页面的需求后提交给美工设计制作，制作好的只是最原始的HTML，最终需要更新内容后发布到服务器。为了便于日后的内容更新，需要技术支持人员根据一定的逻辑把网页划分为若干区块，并将这些区块制作碎片存储到后台。这样就形成了模板和碎片，模板和碎片结合编辑人员录入的数据通过发布引擎发布到前端服务器。

网页中通过javascript脚本能跟踪鼠标经过或点击的位置查找到该位置的页面元素节点，并列出该节点的所有父节点。

列出所有父节点是为了方便修正选取的节点，鼠标移动到节点列表中的任何一级节点，在页面上都会高亮显示该节点所覆盖的区域，这样可帮助模板制作人员准确定位到需要制作成碎片的区块。

选取的高亮区域就是需要制作成碎片的区域，点击“生成碎片”按钮前端javascript脚本程序就会读取到该区域的html代码段发送到后台CMS，根据之前选择的碎片配置信息，存储到后台数据库，返回该碎片的标识信息，同时脚本程序会自动替换模板里的那一段HTML代码为碎片标识；在可视化编辑视图中该HTML代码的根节点上将会增加自定义属性“cmpp_params”，该属性标记的作用就是标识该节点已经被创建为碎片了；这样就实现了制作碎片和在模板中标识碎片一次性自动完成。

标识了碎片的区域表面漂浮一个半透明的div浮层，该浮层高亮显示，并绑定鼠标点击事件，点击该浮层可进入碎片配置窗口。当需要修改模板、增加碎片、修改碎片配置、删除碎片时可在模板编辑视图中进行。模板编辑视图的初始化原理是：模板在可视化编辑初始化时，脚本程序会便利网页中所有包含碎片标记“cmpp_params”的节点，给这些节点的元素添加半透明浮层，并高亮显示。模板制作人员可点击这些浮层对碎片进行再配置。

制作模板创建碎片是同步进行的，而且无需接触html代码，只需要用鼠标在网页中点取就可自动生成碎片存储到后台CMS***，这正是 “可视化编辑”的展现。

模板可视化制作和编辑中，不仅实现了鼠标在网页移动时，前端脚本能准确查找到鼠标经过的HTML节点，通过点击鼠标能准确选取到节点；还实现了给节点添加碎片标记，碎片标记决定了网页中已经制作成碎片的区块；其中，高亮飘浮的半透明浮层就是其对应碎片的配置入口。

然后，对HTML内容进行可视化编辑，具体过程如下所述：

制作好的模板包含了所有碎片的标识信息，可借助发布页面引擎将模板结合碎片和数据发布成和真实网页一模一样的HTML代码输出到碎片编辑视图中，并在碎片节点上附上碎片标记；通过前端脚本遍历所有节点，查找出带有碎片编辑的节点，并在节点元素表面添加高亮显示的半透明浮层，点击浮层可在本页弹出碎片编辑窗口，内容编辑人员就可以在碎片编辑窗口中更新内容、预览内容。

碎片可视化编辑中，不仅实现了给页面HTML节点添加自定义碎片标识；这些标识决定了在可视化界面中碎片的位置，即编辑入口；标识信息中的各项参数决定了碎片的编辑地址；还实现了前端脚本对碎片标记的扫描，并计算出有碎片标记的节点在浏览器中的坐标位置，位置决定了半透明浮层是否正确完整覆盖在碎片内容之上。

模板制作：对网页划分区块，并制作成一个个方便内容更新的碎片的过程。把一个html网页制作成一个个碎片有两种方式，一种是通过HTML中的预定义的碎片标签，由***自动识别并创建碎片，然后由二次开发人员完成最后的碎片配置工作。另一种就是通过鼠标在页面上选取元素来生成碎片并完成碎片配置。

模板可视化编辑：每个矩形区块被称为“碎片”，把一个网页划分为若干区块，并对每个区块给予碎片代码标识，这些碎片代码标识的集合以及没有划分为碎片的原始HTML称之为“模板”， 发布引擎将模板和内容数据按照既定的发布逻辑即可生成网页。传统的模板编辑方法是面对网页HTML代码，用手工填写的方式划分和标识碎片标记。而模板的可视化编辑则面对的是在浏览器中打开的网页，通过鼠标点击选取的方式自动完成碎片标识和碎片存储工作。

参见图5，是本发明实施例一种HTML内容可视化编辑***的结构图。

所述***主要包括：

获取模块51，用于获取所要编辑的HTML内容碎片；

定位标记模块52，用于对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；

编辑模块53，用于对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；

判断模块54，用于通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误。

本实施例通过获取模块，用于获取所要编辑的HTML内容碎片；定位标记模块，用于对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；编辑模块，用于对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；判断模块，用于通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误；实现了编辑人员在零接触HTML代码的情况下完成内容更新。

参见图6，是本发明又一实施例一种HTML内容可视化编辑***的结构图。

所述定位标记模块52具体用于：

发布引擎，以及输出所述HTML内容碎片；

查找所述HTML内容碎片的碎片标记；

依据所述碎片标记，生成所述HTML内容碎片的页面浮层。

所述***还包括：

显示模块61，用于显示所述HTML内容碎片的页面，所述HTML内容碎片的页面浮层的显示方式为全页预览或局部预览的方式。

本实施例通过获取模块，用于获取所要编辑的HTML内容碎片；定位标记模块，用于对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；编辑模块，用于对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；判断模块，用于通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误；不仅实现了编辑人员在零接触HTML代码的情况下完成内容更新；还实现了在可视化的界面中通过鼠标点击的方式实现模板制作和碎片创建的自动化。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于***或装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上对本发明所提供的一种HTML内容可视化编辑方法及***，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所做的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (6)

1.一种HTML内容可视化编辑方法，其特征在于，包括：

获取所要编辑的HTML内容碎片；

对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；

对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；

通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误。

2.根据权利要求1所述的方法，其特征在于，所述对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层的步骤包括：

发布引擎，以及输出所述HTML内容碎片；

查找所述HTML内容碎片的碎片标记；

依据所述碎片标记，生成所述HTML内容碎片的页面浮层。

3.根据权利要求1或2所述的方法，其特征在于，所述HTML内容碎片的页面浮层的显示方式为全页预览或局部预览的方式。

4.一种HTML内容可视化编辑***，其特征在于，包括：

获取模块，用于获取所要编辑的HTML内容碎片；

定位标记模块，用于对所述HTML内容碎片进行定位标记，生成所述HTML内容碎片的页面浮层；

编辑模块，用于对所述HTML内容碎片的页面浮层进行碎片编辑，以生成相应的碎片；

判断模块，用于通过判断所述相应的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的碎片成功入库，则触发相应的碎片内容发布；若判断结果为所述相应的碎片入库失败，则输出判断结果为错误。

5.根据权利要求4所述的***，其特征在于，所述定位标记模块具体用于：

发布引擎，以及输出所述HTML内容碎片；

查找所述HTML内容碎片的碎片标记；

依据所述碎片标记，生成所述HTML内容碎片的页面浮层。

6.根据权利要求4或5所述的***，其特征在于，所述***还包括：

显示模块，用于显示所述HTML内容碎片的页面，所述HTML内容碎片的页面浮层的显示方式为全页预览或局部预览的方式。

Images