CN104714989A - 在浏览器中动态存取和可视化编辑web页面的方法 - Google Patents

Abstract

本发明涉及一种在浏览器中动态存取和可视化编辑WEB页面的方法，该方法按照以下步骤进行的：A、服务器在可编辑页面建立有特定功能的脚本；B、客户端触发编辑事件；C、服务器响应编辑事件，载入页面编辑的脚本代码；D、载入鼠标右键菜单系统；载入鼠标事件和/或键盘事件；E、建立无模式对话框体现的菜单窗口，通过获取窗口句柄，建立根据选中对象的类型进行菜单窗口中菜单的自动切换的体系；F、删除用于将脚本载入本页面的代码，保持页面的原貌；G、服务器将处理后的页面送到客户端的浏览器中；H、将编辑完成的页面设置保存到网络或保存到本地。该方法不需要网页的编辑者掌握专业的网页制作知识，极大的降低了网页创作的门槛。

Description

在浏览器中动态存取和可视化编辑WEB页面的方法

技术领域：

本发明涉及一种WEB页面编辑技术，特别是在一种浏览器中动态存取和可视化编辑WEB页面的方法。

背景技术：

当前，所有对页面进行可视化编辑的方法都集中在单机形式的软件中，例如Frontpage和Dreamwaver。基本的思路都是在本地计算机上编辑网页，然后将编辑好的网页上传到合适的网络空间中。这对网页的编辑者提出了很高的要求，需要具有相当的Internet和HTML的知识，很大地限制了创建网页的推广范围。而后来出现的辅助样板出现的实时网页内容的编辑，只能提供有限的样板，同样不方便用户动态存取和可视化编辑WEB页面。

发明内容：

针对现有技术存在的缺陷，本发明提供一种在浏览器中动态存取和可视化编辑WEB页面的方法，不需要网页的编辑者掌握专业的网页制作知识，就可以在网络上随时创建和编辑网页。

本发明的技术方案是：

一种在浏览器中动态存取和可视化编辑WEB页面的方法，其特征在于按照以下步骤进行的：

A、服务器在可编辑页面建立有特定功能的脚本，所述特定功能包括编辑功能、鼠标功能和/或键盘功能；

B、客户端触发编辑事件；

C、服务器响应编辑事件，载入页面编辑的脚本代码；

D、载入鼠标右键菜单系统；载入鼠标事件和/或键盘事件；

E、建立无模式对话框体现的菜单窗口，通过获取窗口句柄，建立根据选中对象的类型进行菜单窗口中菜单的自动切换的体系；

F、删除用于将脚本载入本页面的代码，保持页面的原貌；

G、服务器将处理后的页面送到客户端的浏览器中；

H、将编辑完成的页面设置保存到网络或保存到本地；所述保存到网络为将内存中的全部代码进行编码并上传到服务器，调用服务器对应脚本并对接收内容进行解码后将内容存储到对应的文件中；所述保存到本地为将当前页面在内存中的全部代码写入一个新窗口，并调用系统命令，将当前页面保存到本地电脑中用户指定的位置。

上述在步骤D或E后建立选取对象/对象组的范围方框对象。

上述在步骤D或E后建立处理选中对象/对象组的透明遮罩对象。

上述步骤E中还包括建立源代码窗口，所述源代码窗口中含有用户查看、修改、拷贝页面或页面中某个对象的源代码。

技术效果：

通过选中该网页并在右键菜单中选择“编辑”。服务器的对应于“打开文件“功能的脚本就会启动，读出选中的网页并在网页末尾追加对应于编辑功能的客户端脚本，将处理后的页面送到浏览器中。该页面从视觉角度和原有页面完全相同，但是已经被添加了编辑功能，从而实现浏览器中动态存取和可视化编辑。

菜单窗口可以完成的功能主要是对页面各种对象的各种属性的修改，客户此时可以编辑这个页面，所有可以编辑的功能都已经在本地页面的代码中包含，比如剪切、复制、粘贴、删除本系统建立的内容，增加图片，背景音乐之类的功能，编辑的结果存放在一个自定义的对象中，该对象保存的代码就是以后生成页面的代码的主体；源代码窗口可以完成的功能是便于用户直接查看、修改、拷贝页面或页面中某个对象的源代码；帮助窗口可以提供给用户基本的操作说明，提供帮助信息。

在用户编辑完成后，可以选择“保存到网络”或“保存到本地”。“保存到网络”会将当前页面在内存中的全部代码进行编码并上传到服务器，调用服务器中对应于“保存文件”的脚本。对应的服务器脚本会对接收到的内容进行解码，检查路径的合法性，并将内容存储的对应的文件中，这样用户就可以通过URL地址访问页面了；“保存到本地”会将当前页面在内存中的全部代码写入一个新窗口，并调用系统命令，生成一个本地HTML文件，打开Windows的保存文件对话框，将当前页面保存到用户指定的本地电脑中的任意位置。

本发明一种浏览器中动态存取和可视化编辑WEB页面的方法不需要在本地电脑上安装任何软件，只需要使用标准的、已经在Windows系统中预装的IE浏览器，就可以在网络上随时创建和编辑网页，极大的降低了网页创作的门槛。

附图说明：

图1为本发明一种浏览器中动态存取和可视化编辑WEB页面的方法流程图；

具体实施方式：

下面结合附图对本发明做进一步的说明。

图1是本发明一种浏览器中动态存取和可视化编辑WEB页面的方法流程图。整个过程如下：

首先是在客户端中客户请求编辑一个新页面。

然后服务器的对应于“打开文件“功能的脚本就会启动，读出选中的网页并在网页末尾追加对应于编辑功能的客户端脚本，服务器端生成一个空页面，服务器在可编辑页面建立有特定功能的脚本，所述特定功能包括编辑功能、鼠标功能和/或键盘功能，(所述脚本可以基于特定的PHP语言，通过e_open.php这个文件末尾加的客户端脚本实现的在客户端的编辑，采用Javascript还是PHP作为应用于WEB客户端的活动脚本语言)。服务器在空页面末尾追加具有编辑功能的脚本，使得页面看上去是一个空页面，实际尾部包含很多代码使该页面能够在客户端被编辑，编辑的原理就是使用VML，是IE自带的一个对象具有编辑功能，而且源代码对用户不可见，生成的网页代码的主体也是基于VML标记的代码，不是真正意义上客户端看到的页面的源代码。

服务器将生成的页面给客户端；浏览器会在新窗口显示获得的页面，页面中被服务器脚本动态添加进来的客户端脚本开始运行，主要的工作如下：

a)服务器响应编辑事件，载入需要直接在本页面完成的编辑功能的脚本代码。

b)建立鼠标右键菜单系统。

c)在本页面建立复杂的事件系统，大规模重定义鼠标事件和键盘事件。

d)建立选取对象/对象组的范围方框对象。

e)建立处理选中对象/对象组的透明遮罩对象。

f)弹出以无模式对话框体现的菜单窗口，传递本页面的句柄，并建立菜单窗口中菜单的根据选中对象的类型进行自动切换的体系。

g)在脚本内容全部载入内存后，删除用于将脚本载入本页面的代码以保持页面的原貌，这个动作是服务器脚本为页面添加脚本的逆动作。

弹出的菜单窗口则需要获取父页面的句柄，和父页面建立联系，准备编辑父页面中对象的属性；载入所有编辑功能代码，父页面本身完成的功能代码除外；建立字体对象、颜色对象、边框属性组合菜单等各种编辑使用的实时对象。

服务器将处理后的页面送到客户端的浏览器中，用户对页面进行编辑。主页面本身的主要编辑功能如选中对象；移动对象；改变对象尺寸；剪切、复制、粘贴、删除本系统建立的内容；粘贴从其它应用程序中建立的内容；改变对象显示的层次；改变对象的锁定状态；改变对象的组合状态；插入各种页面对象，例如文本、图片、多媒体、向量图形等等；编辑文本；弹出菜单窗口，菜单窗口可以完成的功能主要是对页面各种对象的各种属性的修改，目前涉及到的功能大约530个；弹出源代码窗口，源代码窗口可以完成的功能是便于用户直接查看、修改、拷贝页面或页面中某个对象的源代码；弹出帮助窗口，帮助窗口可以提供给用户基本的操作说明，提供帮助信息；将编辑完毕的页面提交到服务器保存；将编辑完毕的页面保存本地电脑。

在用户编辑完成后，可以选择“保存到网络”或“保存到本地”。“保存到网络”会将当前页面在内存中的全部代码进行编码并上传到服务器，调用服务器中对应于“保存文件”的脚本，对应的服务器脚本会对接收到的内容进行解码，检查路径的合法性，服务器端在这段代码的基础上添加一些HTML代码，并将内容存储的对应的文件中，也就是将其保存到服务器的某个位置，这样用户就可以通过URL地址访问页面了；“保存到本地”会将当前页面在内存中的全部代码写入一个新窗口，并调用系统命令，利用页面对象中的代码作为主体，添加一些HTML代码之后生成一个本地HTML文件，打开Windows的保存文件对话框，将当前页面保存到用户指定的本地电脑中的任意位置。

Claims (4)

1.一种在浏览器中动态存取和可视化编辑WEB页面的方法，其特征在于按照以下步骤进行的：

A、服务器在可编辑页面建立有特定功能的脚本，所述特定功能包括编辑功能、鼠标功能和/或键盘功能；

B、客户端触发编辑事件；

C、服务器响应编辑事件，载入页面编辑的脚本代码；

D、载入鼠标右键菜单系统；载入鼠标事件和/或键盘事件；

E、建立无模式对话框体现的菜单窗口，通过获取窗口句柄，建立根据选中对象的类型进行菜单窗口中菜单的自动切换的体系；

F、删除用于将脚本载入本页面的代码，保持页面的原貌；

G、服务器将处理后的页面送到客户端的浏览器中；

H、将编辑完成的页面设置保存到网络或保存到本地；所述保存到网络为将内存中的全部代码进行编码并上传到服务器，调用服务器对应脚本并对接收内容进行解码后将内容存储到对应的文件中；所述保存到本地为将当前页面在内存中的全部代码写入一个新窗口，并调用系统命令，将当前页面保存到本地电脑中用户指定的位置。

2.根据权利要求1所述一种在浏览器中动态存取和可视化编辑WEB页面的方法，其特征在于所述在步骤D或E后建立选取对象/对象组的范围方框对象。

3.根据权利要求1所述一种在浏览器中动态存取和可视化编辑WEB页面的方法，其特征在于所述在步骤D或E后建立处理选中对象/对象组的透明遮罩对象。

4.根据权利要求1所述一种在浏览器中动态存取和可视化编辑WEB页面的方法，其特征在于所述步骤E中还包括建立源代码窗口，所述源代码窗口中含有用户查看、修改、拷贝页面或页面中某个对象的源代码。