1.本发明文档编辑
技术领域：
：，具体为一种基于浏览器的ofd文件显示和编辑方法。
背景技术：
：：2.ofd是开放式版式文档，是我国国家标准《gb/t33190-2016电子文件存储与交换格式版式文档》定义的我国版式文档格式。3.所谓“版式文档”，是指它描述的页面内容具有固定的位置、大小、颜色等外观信息，确保页面内容在所有终端的显示效果完全固定、一致。4.ofd文件作为一种版式文档，要求显示效果完全固定、一致，导致很多人习惯性的忽略了ofd文件本身的编辑需求，导致现在缺乏一种基于浏览器的所见即所得的编辑ofd文件的方法。5.目前，还没有基于浏览器端的ofd编辑器，只有ofd阅读器。6.现有的浏览器端的ofd阅读器，都没有编辑功能，只有显示功能，现有的获取新的样式的ofd文件方法，都是基于桌面端应用的，有以下几种：7.1.用word等流式文档编辑生成相应的流式文档后，通过服务器端转化为ofd文件，从而获取新的ofd文档。因为流式文档样式标准与ofd文档的标准不一样，导致转换后的ofd文件在样式上始终有偏差。尤其是ofd文字排版的格式与word不一样，导致生成的ofd文件文字排版异常。常常同一段的文字内容，会被拆分成很多独立的段落。8.另外，例如发票等特殊的排版场景，word是很难实现的，从而导致ofd文件的发票等的排版，需要手工的解压ofd文件，直接到xml文件中去修改相应的属性，然后再压缩生成ofd才行。非常的不方便。9.2、使用其它的桌面端的pdf编辑器，创建pdf文件，然后转化为ofd文件。如福昕pdf编辑器。10.针对以上问题，所以就需要一种基于浏览器的ofd文件显示和编辑方法。技术实现要素：11.本发明的目的在于提供一种基于浏览器的ofd文件显示和编辑方法；根据ofd的文件层次组织结构和数据结构标准，构建由javascript实现的虚拟ofd文件；然后根据虚拟ofd文件，创建web编辑器；通过web编辑器，修改虚拟ofd文件；最终实现所见即所得的ofd文件的编辑功能。12.具体按以下步骤执行；13.s1:在浏览器端创建默认虚拟ofd文件，具体按照ofd的文件层次组织结构和数据结构标准，构建由javascript实现的虚拟ofd文件；14.s2:根据虚拟ofd文件，创建web编辑器；15.s3:通过web编辑器，选取ofd文件；16.s4:解析ofd文件；17.s5:重置虚拟ofd文件；18.s6:重置编辑器进行编辑ofd文件。19.进一步，在步骤s2中，web编辑器组件是一个javascript的类或对象，可以完整的绑定所有的ofd标准的数据结构，也能绑定上述创建的虚拟ofd文件，以及虚拟ofd文件的各层的对象。20.其中web编辑器包括菜单栏、控制栏、内容区、属性栏等高级组件，这些组件本质上都是由编辑器组件的抽象类创建的具体类。21.web编辑器包括基于编辑器组件的抽象类创建的头部菜单栏、左侧控制栏、文档编辑栏和右侧属性栏高级组件，其中左侧控制栏包括大纲、页面缩略图、模板缩略图和组织结构，文档编辑栏设有包括web文档组件、web页面组件、web图层组件和web组件组件，其中文档编辑栏的各个层级与ofd文件的各个层级相对应，在创建相应层级的编辑器对象时，将虚拟ofd文件的对应层级的对象作为参数传入web编辑器的层级组件中。22.其中右侧属性栏包括文档属性、页面属性和控件属性；绑定对应虚拟ofd文件层级的属性，进行编辑ofd文件的属性。23.在创建相应层级的web编辑器对象时，将虚拟ofd文件的对应层级的对象作为参数传入web编辑器的层级组件中。传入虚拟ofd文件的相应层级的对象的同时，将其属性转化为该编辑器对应层级的组件的属性。从而使各层级的web编辑器组件和ofd文件的文件层次组件结构形成一一对应的映射关系。由于web的文档编辑区已经绑定了虚拟ofd文件，从而可以直接修改虚拟ofd文件，实现ofd的编辑功能。24.进一步，文档编辑区执行渲染方法，生成与ofd文件对应的dom树，把ofd文件内容在浏览器端渲染出来。25.进一步，在步骤s6中，在web编辑器中进行编辑ofd文件，其中文档编辑栏包括web组件，所述web组件包括webdocument组件、webpage组件、weblayer组件和webdocument组件。26.进一步，在步骤s3中，选取ofd的文件，具体包括是xml文件和图片、视频、签章和注释的内容的文件，然后在步骤s4中，将ofd文件各层级的xml文件内容解析为符合ofd数据结构标准的格式，导入到对应到ofd虚拟文件的web编辑器中。27.进一步，右侧属性栏包括文档属性、页面属性和控件属性三个层级；分别对应控制到ofd文档、页面、图元三个层次，具体通过设置属性栏组件events，监听浏览器的操作，根据ofd标准将键入的内容添加到对应ofd的对象或属性中。28.进一步，在web编辑器内容区域添加新的控件；创建web组件的同时，在相应层级的虚拟ofd文件中增加新的ofd图元对象，以而达到在虚拟ofd文件中增加图元对象的目的。29.与现有技术相比，本发明的有益效果是：30.1、基于ofd标准创建的能够直接生成ofd文件的数据结构，即虚拟ofd文件，基于虚拟dom树创建的web编辑器组件的数据结构，能够直接在浏览器端渲染，并监听浏览器操作。通过两者的映射关系，最终实现了在浏览器端的ofd文件的编辑功能。31.2、在浏览器端选取ofd文件，把ofd文件的内容显示出来，选择相应的控件或配置属性控制项，配合鼠标和键盘进行拖动、拉伸、输入、删除等操作，即可对ofd文件进行所见即所得的编辑，整个过程不需要服务器端的支持。附图说明32.为了更清楚地说明本发明实施方式的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。33.图1是本发明的方法流程示意图；34.图2是本发明的虚拟ofd文件和web编辑器的映射图；35.图3是本发明的虚拟编辑器的组件结构示意图；36.图4是本发明的虚拟ofd文件组件结构图。具体实施方式37.为使本发明实施方式的目的、技术方案和优点更加清楚，下面将结合本发明实施方式中的附图，对本发明实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式是本发明一部分实施方式，而不是全部的实施方式。基于本发明中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。因此，以下对在附图中提供的本发明的实施方式的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施方式。基于本发明中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。38.请参阅图1-4，一种基于浏览器的ofd文件显示和编辑方法；39.包括以下步骤：如图1，40.s1:在浏览器端创建默认虚拟ofd文件，具体按照ofd的文件层次组织结构和数据结构标准，构建由javascript实现的虚拟ofd文件；s2:根据虚拟ofd文件，创建web编辑器；41.s3:通过web编辑器，选取ofd文件；42.s4:解析ofd文件；43.s5:重置虚拟ofd文件；44.s6:重置编辑器进行编辑ofd文件。45.本实施例中，在步骤s2中，web编辑器组件是一个javascript的类或对象，可以完整的绑定所有的ofd标准的数据结构，也能绑定上述创建的虚拟ofd文件，以及虚拟ofd文件的各层的对象。46.本发明模拟文件层次组织结构和文件数据结构，使用javascript实现对应的的虚拟文件夹类和虚拟文件。然后按照ofd的标准组织起来创建虚拟ofd文件。47.ofd的文件层次组织结构，基于包含了父节点和子节点的虚拟文件夹的抽象类实现。ofd的虚拟文件的数据结构，基于包含了虚拟文件夹的父节点和符合ofd标准数据结构的子节点组成的虚拟文件的抽象类实现。虚拟ofd文件组件结构如图4。48.如图3，其中web编辑器包括菜单栏、控制栏、内容区、属性栏等高级组件，这些组件本质上都是由编辑器组件的抽象类创建的具体类。49.其中控制栏包括大纲、组件结构、页面缩略图、模板缩略图等；分别控制ofd文档的大纲、组织结构、页面树、模板树等。通过设置对应组件的events属性，监听浏览器操作，可以编辑相应的虚拟ofd文件的内容。50.编辑器的属性控制栏相关的属性绑定了虚拟ofd文件对应的内容。属性栏包括文档属性、页面属性、控件属性等三个层级；分别控制到ofd文档、页面、图元三个层次。设置属性栏组件events，监听浏览器操作，如键盘输入后，保存时，根据ofd标准将键入的内容添加到对应ofd的对象或属性中。删除时，如果选中了控件，会在编辑器内容区域删除选中的对象。相关编辑操作能同步修改虚拟ofd文件，这样也能实现相应的编辑目的。51.web编辑器包括基于编辑器组件的抽象类创建的头部菜单栏、左侧控制栏、文档编辑栏和右侧属性栏高级组件，其中左侧控制栏包括大纲、页面缩略图、模板缩略图和组织结构，文档编辑栏设有包括web文档组件、web页面组件、web图层组件和web组件组件，其中文档编辑栏的各个层级与ofd文件的各个层级相对应，在创建相应层级的编辑器对象时，将虚拟ofd文件的对应层级的对象作为参数传入web编辑器的层级组件中。52.其中右侧属性栏包括文档属性、页面属性和控件属性；绑定对应虚拟ofd文件层级的属性，进行编辑ofd文件的属性。53.在创建相应层级的web编辑器对象时，将虚拟ofd文件的对应层级的对象作为参数传入web编辑器的层级组件中。传入虚拟ofd文件的相应层级的对象的同时，将其属性转化为该编辑器对应层级的组件的属性。从而使各层级的web编辑器组件和ofd文件的文件层次组件结构形成一一对应的映射关系。其中虚拟ofd文件和web编辑器的简略映射图,具体如图2,54.由于web的文档编辑区已经绑定了虚拟ofd文件，从而可以直接修改虚拟ofd文件，实现ofd的编辑功能。55.在web编辑器中进行编辑ofd文件，其中文档编辑栏包括web组件，所述web组件包括webdocument组件、webpage组件、weblayer组件和webdocument组件。选中web组件时，同步能获取到其绑定的虚拟ofd文件的对应层级的对象。通过设置web组件的events属性，设置组件dom的监听事件，监听浏览器操作，如拖动、拉伸等鼠标操作，可以获取到控件的位置、样式等等信息，将这些信息转化为虚拟ofd文件的对象的属性，虚拟ofd文件就产生了变化，从而能实现相应的编辑目的。56.右侧属性栏包括文档属性、页面属性和控件属性三个层级；分别对应控制到ofd文档、页面、图元三个层次，需要新增控件时，具体通过选中某个控件菜单，拖动放入某个页面，即可在页面中新增控件。57.设置菜单组件的events属性，监听浏览器操作，编辑器选取菜单后，在编辑器内容区域可以添加新的控件；创建web组件的同时，会在相应层级的虚拟ofd文件中增加新的ofd图元对象。从而达到在虚拟ofd文件中增加图元对象的目的。58.由于web编辑器各层级组件与虚拟ofd文件的各层级对象有绑定关系，这样通过web编辑器组件的events属性设置的监听事件，浏览器就能获取到虚拟ofd文件的对应的层级和结构的对象，通过以上操作方式即可对虚拟ofd文件进行相应的编辑。59.本实施例中，web编辑器组件的抽象类的数据结构如下：60.自定义的虚拟dom树的实现方式，tagname表示对应的真实dom的标签名称；classname表示该组件的具体类名；dom表示该组件的真实dom；childnodes表示该组件的子节点；events表示监听事件；render方法为渲染方法，将组件本身和组件子节点的真实dom渲染出来。当调用render方法时，会以迭代的方式，创建编辑器组件的所有子节点和子节点对应的真实dom节点；setpropobj表示设置属性方法；removepropobj表示移除某个属性的方法；addchild表示添加子节点；removechild表示移除某节点；61.所有编辑器组件都继承以上抽象类。62.编辑器组件包括基础组件和高级组件。63.基础组件就是基于dom标签创建的组件,其包括html标签组件和svg标签组件。64.其中，html标签包括65.div/span/ul/li/button/input/image/table/textareaheading/sel等；66.svg标签包括svg/path/line/rect/ellipse/circle/text/linear-gradient/defs等。在基础组件的基础上，创建编辑器的高级组件。67.高级组件基于基础组件创建，同时兼顾ofd标准数据结构。本发明不再有任何基于真实dom的直接操作，所有的操作都是在编辑器组件上进行的。编辑器组件在监听dom操作的同时也能对的ofd数据结构进行操作。由于ofd标准的数据结构和浏览器的dom数据结构是不一致的，如果直接使用浏览器的dom数据结构，则ofd的数据结构中的很多信息是无法完全实现出来的。本发明使用编辑器组件以解决上述问题。本质上，编辑器组件是一个javascript的类或对象，可以完整的绑定所有的ofd标准的数据结构，本发明也能绑定上述创建的虚拟ofd文件，以及虚拟ofd文件的各层的对象。68.本实施例中，文档编辑区执行渲染方法，生成与ofd文件对应的dom树，把ofd文件内容在浏览器端渲染出来。69.本实施例中，在步骤s3中，选取ofd的文件，具体包括是xml文件和图片、视频、签章和注释的内容的文件件，然后在步骤s4中，将ofd文件各层级的xml文件内容解析为符合ofd数据结构标准的格式，导入到对应到ofd虚拟文件的web编辑器中。70.以上所述仅为本发明的优选实施方式而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。当前第1页12当前第1页12
技术领域：
：，具体为一种基于浏览器的ofd文件显示和编辑方法。
背景技术：
：：2.ofd是开放式版式文档，是我国国家标准《gb/t33190-2016电子文件存储与交换格式版式文档》定义的我国版式文档格式。3.所谓“版式文档”，是指它描述的页面内容具有固定的位置、大小、颜色等外观信息，确保页面内容在所有终端的显示效果完全固定、一致。4.ofd文件作为一种版式文档，要求显示效果完全固定、一致，导致很多人习惯性的忽略了ofd文件本身的编辑需求，导致现在缺乏一种基于浏览器的所见即所得的编辑ofd文件的方法。5.目前，还没有基于浏览器端的ofd编辑器，只有ofd阅读器。6.现有的浏览器端的ofd阅读器，都没有编辑功能，只有显示功能，现有的获取新的样式的ofd文件方法，都是基于桌面端应用的，有以下几种：7.1.用word等流式文档编辑生成相应的流式文档后，通过服务器端转化为ofd文件，从而获取新的ofd文档。因为流式文档样式标准与ofd文档的标准不一样，导致转换后的ofd文件在样式上始终有偏差。尤其是ofd文字排版的格式与word不一样，导致生成的ofd文件文字排版异常。常常同一段的文字内容，会被拆分成很多独立的段落。8.另外，例如发票等特殊的排版场景，word是很难实现的，从而导致ofd文件的发票等的排版，需要手工的解压ofd文件，直接到xml文件中去修改相应的属性，然后再压缩生成ofd才行。非常的不方便。9.2、使用其它的桌面端的pdf编辑器，创建pdf文件，然后转化为ofd文件。如福昕pdf编辑器。10.针对以上问题，所以就需要一种基于浏览器的ofd文件显示和编辑方法。技术实现要素：11.本发明的目的在于提供一种基于浏览器的ofd文件显示和编辑方法；根据ofd的文件层次组织结构和数据结构标准，构建由javascript实现的虚拟ofd文件；然后根据虚拟ofd文件，创建web编辑器；通过web编辑器，修改虚拟ofd文件；最终实现所见即所得的ofd文件的编辑功能。12.具体按以下步骤执行；13.s1:在浏览器端创建默认虚拟ofd文件，具体按照ofd的文件层次组织结构和数据结构标准，构建由javascript实现的虚拟ofd文件；14.s2:根据虚拟ofd文件，创建web编辑器；15.s3:通过web编辑器，选取ofd文件；16.s4:解析ofd文件；17.s5:重置虚拟ofd文件；18.s6:重置编辑器进行编辑ofd文件。19.进一步，在步骤s2中，web编辑器组件是一个javascript的类或对象，可以完整的绑定所有的ofd标准的数据结构，也能绑定上述创建的虚拟ofd文件，以及虚拟ofd文件的各层的对象。20.其中web编辑器包括菜单栏、控制栏、内容区、属性栏等高级组件，这些组件本质上都是由编辑器组件的抽象类创建的具体类。21.web编辑器包括基于编辑器组件的抽象类创建的头部菜单栏、左侧控制栏、文档编辑栏和右侧属性栏高级组件，其中左侧控制栏包括大纲、页面缩略图、模板缩略图和组织结构，文档编辑栏设有包括web文档组件、web页面组件、web图层组件和web组件组件，其中文档编辑栏的各个层级与ofd文件的各个层级相对应，在创建相应层级的编辑器对象时，将虚拟ofd文件的对应层级的对象作为参数传入web编辑器的层级组件中。22.其中右侧属性栏包括文档属性、页面属性和控件属性；绑定对应虚拟ofd文件层级的属性，进行编辑ofd文件的属性。23.在创建相应层级的web编辑器对象时，将虚拟ofd文件的对应层级的对象作为参数传入web编辑器的层级组件中。传入虚拟ofd文件的相应层级的对象的同时，将其属性转化为该编辑器对应层级的组件的属性。从而使各层级的web编辑器组件和ofd文件的文件层次组件结构形成一一对应的映射关系。由于web的文档编辑区已经绑定了虚拟ofd文件，从而可以直接修改虚拟ofd文件，实现ofd的编辑功能。24.进一步，文档编辑区执行渲染方法，生成与ofd文件对应的dom树，把ofd文件内容在浏览器端渲染出来。25.进一步，在步骤s6中，在web编辑器中进行编辑ofd文件，其中文档编辑栏包括web组件，所述web组件包括webdocument组件、webpage组件、weblayer组件和webdocument组件。26.进一步，在步骤s3中，选取ofd的文件，具体包括是xml文件和图片、视频、签章和注释的内容的文件，然后在步骤s4中，将ofd文件各层级的xml文件内容解析为符合ofd数据结构标准的格式，导入到对应到ofd虚拟文件的web编辑器中。27.进一步，右侧属性栏包括文档属性、页面属性和控件属性三个层级；分别对应控制到ofd文档、页面、图元三个层次，具体通过设置属性栏组件events，监听浏览器的操作，根据ofd标准将键入的内容添加到对应ofd的对象或属性中。28.进一步，在web编辑器内容区域添加新的控件；创建web组件的同时，在相应层级的虚拟ofd文件中增加新的ofd图元对象，以而达到在虚拟ofd文件中增加图元对象的目的。29.与现有技术相比，本发明的有益效果是：30.1、基于ofd标准创建的能够直接生成ofd文件的数据结构，即虚拟ofd文件，基于虚拟dom树创建的web编辑器组件的数据结构，能够直接在浏览器端渲染，并监听浏览器操作。通过两者的映射关系，最终实现了在浏览器端的ofd文件的编辑功能。31.2、在浏览器端选取ofd文件，把ofd文件的内容显示出来，选择相应的控件或配置属性控制项，配合鼠标和键盘进行拖动、拉伸、输入、删除等操作，即可对ofd文件进行所见即所得的编辑，整个过程不需要服务器端的支持。附图说明32.为了更清楚地说明本发明实施方式的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。33.图1是本发明的方法流程示意图；34.图2是本发明的虚拟ofd文件和web编辑器的映射图；35.图3是本发明的虚拟编辑器的组件结构示意图；36.图4是本发明的虚拟ofd文件组件结构图。具体实施方式37.为使本发明实施方式的目的、技术方案和优点更加清楚，下面将结合本发明实施方式中的附图，对本发明实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式是本发明一部分实施方式，而不是全部的实施方式。基于本发明中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。因此，以下对在附图中提供的本发明的实施方式的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施方式。基于本发明中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。38.请参阅图1-4，一种基于浏览器的ofd文件显示和编辑方法；39.包括以下步骤：如图1，40.s1:在浏览器端创建默认虚拟ofd文件，具体按照ofd的文件层次组织结构和数据结构标准，构建由javascript实现的虚拟ofd文件；s2:根据虚拟ofd文件，创建web编辑器；41.s3:通过web编辑器，选取ofd文件；42.s4:解析ofd文件；43.s5:重置虚拟ofd文件；44.s6:重置编辑器进行编辑ofd文件。45.本实施例中，在步骤s2中，web编辑器组件是一个javascript的类或对象，可以完整的绑定所有的ofd标准的数据结构，也能绑定上述创建的虚拟ofd文件，以及虚拟ofd文件的各层的对象。46.本发明模拟文件层次组织结构和文件数据结构，使用javascript实现对应的的虚拟文件夹类和虚拟文件。然后按照ofd的标准组织起来创建虚拟ofd文件。47.ofd的文件层次组织结构，基于包含了父节点和子节点的虚拟文件夹的抽象类实现。ofd的虚拟文件的数据结构，基于包含了虚拟文件夹的父节点和符合ofd标准数据结构的子节点组成的虚拟文件的抽象类实现。虚拟ofd文件组件结构如图4。48.如图3，其中web编辑器包括菜单栏、控制栏、内容区、属性栏等高级组件，这些组件本质上都是由编辑器组件的抽象类创建的具体类。49.其中控制栏包括大纲、组件结构、页面缩略图、模板缩略图等；分别控制ofd文档的大纲、组织结构、页面树、模板树等。通过设置对应组件的events属性，监听浏览器操作，可以编辑相应的虚拟ofd文件的内容。50.编辑器的属性控制栏相关的属性绑定了虚拟ofd文件对应的内容。属性栏包括文档属性、页面属性、控件属性等三个层级；分别控制到ofd文档、页面、图元三个层次。设置属性栏组件events，监听浏览器操作，如键盘输入后，保存时，根据ofd标准将键入的内容添加到对应ofd的对象或属性中。删除时，如果选中了控件，会在编辑器内容区域删除选中的对象。相关编辑操作能同步修改虚拟ofd文件，这样也能实现相应的编辑目的。51.web编辑器包括基于编辑器组件的抽象类创建的头部菜单栏、左侧控制栏、文档编辑栏和右侧属性栏高级组件，其中左侧控制栏包括大纲、页面缩略图、模板缩略图和组织结构，文档编辑栏设有包括web文档组件、web页面组件、web图层组件和web组件组件，其中文档编辑栏的各个层级与ofd文件的各个层级相对应，在创建相应层级的编辑器对象时，将虚拟ofd文件的对应层级的对象作为参数传入web编辑器的层级组件中。52.其中右侧属性栏包括文档属性、页面属性和控件属性；绑定对应虚拟ofd文件层级的属性，进行编辑ofd文件的属性。53.在创建相应层级的web编辑器对象时，将虚拟ofd文件的对应层级的对象作为参数传入web编辑器的层级组件中。传入虚拟ofd文件的相应层级的对象的同时，将其属性转化为该编辑器对应层级的组件的属性。从而使各层级的web编辑器组件和ofd文件的文件层次组件结构形成一一对应的映射关系。其中虚拟ofd文件和web编辑器的简略映射图,具体如图2,54.由于web的文档编辑区已经绑定了虚拟ofd文件，从而可以直接修改虚拟ofd文件，实现ofd的编辑功能。55.在web编辑器中进行编辑ofd文件，其中文档编辑栏包括web组件，所述web组件包括webdocument组件、webpage组件、weblayer组件和webdocument组件。选中web组件时，同步能获取到其绑定的虚拟ofd文件的对应层级的对象。通过设置web组件的events属性，设置组件dom的监听事件，监听浏览器操作，如拖动、拉伸等鼠标操作，可以获取到控件的位置、样式等等信息，将这些信息转化为虚拟ofd文件的对象的属性，虚拟ofd文件就产生了变化，从而能实现相应的编辑目的。56.右侧属性栏包括文档属性、页面属性和控件属性三个层级；分别对应控制到ofd文档、页面、图元三个层次，需要新增控件时，具体通过选中某个控件菜单，拖动放入某个页面，即可在页面中新增控件。57.设置菜单组件的events属性，监听浏览器操作，编辑器选取菜单后，在编辑器内容区域可以添加新的控件；创建web组件的同时，会在相应层级的虚拟ofd文件中增加新的ofd图元对象。从而达到在虚拟ofd文件中增加图元对象的目的。58.由于web编辑器各层级组件与虚拟ofd文件的各层级对象有绑定关系，这样通过web编辑器组件的events属性设置的监听事件，浏览器就能获取到虚拟ofd文件的对应的层级和结构的对象，通过以上操作方式即可对虚拟ofd文件进行相应的编辑。59.本实施例中，web编辑器组件的抽象类的数据结构如下：60.自定义的虚拟dom树的实现方式，tagname表示对应的真实dom的标签名称；classname表示该组件的具体类名；dom表示该组件的真实dom；childnodes表示该组件的子节点；events表示监听事件；render方法为渲染方法，将组件本身和组件子节点的真实dom渲染出来。当调用render方法时，会以迭代的方式，创建编辑器组件的所有子节点和子节点对应的真实dom节点；setpropobj表示设置属性方法；removepropobj表示移除某个属性的方法；addchild表示添加子节点；removechild表示移除某节点；61.所有编辑器组件都继承以上抽象类。62.编辑器组件包括基础组件和高级组件。63.基础组件就是基于dom标签创建的组件,其包括html标签组件和svg标签组件。64.其中，html标签包括65.div/span/ul/li/button/input/image/table/textareaheading/sel等；66.svg标签包括svg/path/line/rect/ellipse/circle/text/linear-gradient/defs等。在基础组件的基础上，创建编辑器的高级组件。67.高级组件基于基础组件创建，同时兼顾ofd标准数据结构。本发明不再有任何基于真实dom的直接操作，所有的操作都是在编辑器组件上进行的。编辑器组件在监听dom操作的同时也能对的ofd数据结构进行操作。由于ofd标准的数据结构和浏览器的dom数据结构是不一致的，如果直接使用浏览器的dom数据结构，则ofd的数据结构中的很多信息是无法完全实现出来的。本发明使用编辑器组件以解决上述问题。本质上，编辑器组件是一个javascript的类或对象，可以完整的绑定所有的ofd标准的数据结构，本发明也能绑定上述创建的虚拟ofd文件，以及虚拟ofd文件的各层的对象。68.本实施例中，文档编辑区执行渲染方法，生成与ofd文件对应的dom树，把ofd文件内容在浏览器端渲染出来。69.本实施例中，在步骤s3中，选取ofd的文件，具体包括是xml文件和图片、视频、签章和注释的内容的文件件，然后在步骤s4中，将ofd文件各层级的xml文件内容解析为符合ofd数据结构标准的格式，导入到对应到ofd虚拟文件的web编辑器中。70.以上所述仅为本发明的优选实施方式而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。当前第1页12当前第1页12
再多了解一些
本文用于创业者技术爱好者查询，仅供学习研究，如用于商业用途，请联系技术所有人。
