CN106560805A

CN106560805A - 基于html标准的所见即所得文档编辑器的页面布局方法

Info

Publication number: CN106560805A
Application number: CN201510982930.6A
Authority: CN
Inventors: 不公告发明人
Original assignee: Individual
Current assignee: Individual
Priority date: 2015-10-01
Filing date: 2015-12-24
Publication date: 2017-04-12

Abstract

互联网技术的迅速发展使得在浏览器中进行在线的文档处理变得越来越流行。由于这种模式的巨大潜力，近几年来，各种基于HTML的开源的及商用的在线文档编辑系统大量涌现，成为文档处理的新潮流。但HTML语言对于实现在线文档编辑系统来说有着严重的限制。这种语言从设计上讲是不支持文档内容分页的。因此目前的各种在线文档处理系统或者不支持分页，或者对页面布局的支持非常不灵活，如每个文档只能有单一的页面格式，而且只能所有页面作为一个整体只能单列显示而导致不能充分利屏幕空间等。本发明为基于HTML的在线文档处理提供一种完善而灵活的文档页面布局方法。

Description

基于HTML标准的所见即所得文档编辑器的页面布局方法

技术领域

本发明属于基于Web浏览器的“所见即所得”文档编辑领域，涉及一种用HTML实现所见即所得文档编辑器的页面布局方法和系统。

背景技术

“所见即所得”(WISIWYG)形式的文档编辑是现代计算机的一个重要应用领域。WISIWYG这一说法最早是由美国喜剧演员Flig Wilson从上世纪60年代末期作为他节目中的标语开始使用的。70年代初期美国施乐Palo Alto研究中心(PARC)开发的Bravo是最早实现WISIWYG理念的文档处理软件。这种技术使得用户在视图中所看到文档与该文档的最终产品具有相同的样式，也允许用户在视图中直接编辑文本、图形、或文档中的其他元素。支持WISIWYG的系统可以即时向用户提供对文档的各种修改在视觉上的反馈，从而极大地提高的文档处理系统的可用性和用户的工作效率。正是因为这样的一些优点，WISIWYG这一编辑形式逐渐成为现代文档处理系统的一项必备功能。

随着互联网技术的迅速发展，在浏览器中进行在线的文档处理变得越来越流行。这种方式的优点是可以使用户摆脱客户端的限制，随时随地从任何设备上实现对文档的处理，从而使文档处理的方便程度得到了前所未有的提高。正是由于这种模式的巨大潜力，近几年来，各种基于HTML的开源的及商用的WISIWYG在线文档编辑系统大量涌现，成为文档处理的新潮流。这种系统把传统文档处理系统如Microsoft Word的功能实现在一个Web页中。该Web页一般包含菜单区、工具条区、文档区等主要部件。文档区按WISIWYG显示文档内容并请允许用户进行各种修改。

但是HTML语言对于实现真正的WISIWYG来说有着严重的限制。这种语言从设计上讲是不支持文档内容分页的。因此目前的各种在线文档处理系统或者不支持分页，或者对页面布局的支持非常不灵活，如每个文档只能有单一的页面格式，而且只能所有页面作为一个整体只能单列显示而导致不能充分利屏幕空间等。但完善的内容分页显示是实现WISIWYG的基础。本发明要解决的就是基于HTML为在线文档处理提供一种灵活的文档页面布局方法。

发明内容

本发明为在浏览器中对文档内容的灵活分页提供了一套完善的基于HTML标准的方法。该方法可以根据文档内容、文档页面格式说明、及其他参数如文档整体缩放比例、当前窗口大小等自动生成实现页面布局的HTML代码。在系统实现上，依本发明所述方法所生成的布局代码可以动态地嵌入在基于浏览器的编辑器框架中，成为基于浏览器的所见即所得文档编辑系统的一个核心功能部件。

为达到上述目标，本发明所采取的主要技术方案如下：

一套基于HTML标签的文档内容的表示方法。需要特别强调的是，对于基于浏览器的文档编辑系统而言，编辑系统本身是用一个Web页面实现的。此Web页面一般包括描述编辑系统功能部件，如菜单、工具栏等布局的 HTML代码、实现动态交互功能的JavaScript代码等。文档内容是编辑系统所要处理的对象。文档内容从类型上讲可以有文本以及图片、音频、和视频等多媒体内容。本发明主要利用HTML标准中的标签<p>、<img>、<audio>、<video>来表示文档内容。从格式上讲，文本可以有字体、段落等属性。这些属性可以用<p>标签的style属性进行指定、或用class属性指定相应的CSS格式定义。虽然本发明所述方法尽量避免使用HTML中指定文本格式的标签如<strong>、<b>、<i>、<u>等，但也不排除某些实现可能会用到这些标签。图片的格式可以<img>标签的各种属性来指定。从布局上讲，各类文档内容可以分成不同的节（<section>，<header>，<footer>）、列表（<ul>，<ol>，<li>）、表格（<table>，<tbody>，<tr>，<td>，）。这些标签组合在一起构成了本发明文档内容说明规范的基础。不同的实现可能会有所增减。不同的文档也可能只用到其中的一部分标签。

图1给出了用此方法表示的文档内容的一个例子。这一文档表示方法的主要成分可以形式化描述如下（此处省略了一些更为细节但含义明确的定义如StringLiteral，URL，TextAttribute等）：

Document ::= {Section}

Section ::= "<section" SectionAttribute ">"

[Header] [Footer] {SectionContent}"</section>"

Header ::= "<header>" Content "</header>"

Footer ::= "<footer>" Content "</footer>"

OrderedList | UnorderedList

Text ::= "<p" TextAttribute ">" StringLiteral "</p>"

Image ::= "<img src='" URL ImageAttribute "/>"

Audio ::= "<audio src='" URL AudioAttribute "/>"

StringLiteral "</audio>"

Video ::= "<video src='" URL VideoAttribute ">"

StringLiteral "</video>"

UnorderedList::= "<ul" UnorderedListAttribute ">" ListItem "</ul>"

OrderedList::= "<ol" OrderedListAttribute ">" ListItem "</ol>"

ListItem ::= "<li>" Content "</li>"

Table ::= "<table" TableAttribute ">" TableBody "</table>"

TableBody ::= "<tbody>" {TableRow} "</tbody>" | {TableRow}

TableRow ::= "<tr" RowAttribute ">" {TableCell} "</tr>"

TableCell ::= "<td" CellAttribute ">" {Content} "</td>"。

一套基于HTML扩展机制的页面格式表示方法。页面格式主要包含页面大小、方向、上下左右页边距等。页面大小可以用标准页面大小代码指定，如A4, 16开，US-Letter等，也可以用具体的尺寸，如25cm x 20cm等。页面方向可以是横向（Landscape）或纵向（Portrait）。页面边距可以统一指定，如2.5cm，也可以上下左右分开指定。一种可能的实现方式是将页面格式作为<section>标签的一个扩展属性如data-page-format指定。此属性的内容可以是一个包含如下关键字值的JSON对象：

{

size: "16开",

margin : "25mm",

orientation: "纵向"

}。

另外一种实现方式是将所有section的页面格式用一个JSON对象统一指定。图2给出了这种方式的一个例子。此对象可以作为包含所有section的父标签（如图1中的<div>）的一个扩展属性。

一套基于HTML<table>标签对象的页面布局控制结构。在文档内容和页面格式确定之后，文档编辑器的一个主要任务是将内容分成不同的页面展示出来。除了内容本身和页面格式之外，影响展示结果的其他因素还包括屏幕的可用尺寸及页面的缩放比例。图3显示了按图2指定页面格式图1中文档内容在一定屏幕大小及缩放比例下的实际页面布局效果。图4中的DOM结构显示了实现这一布局的HTML代码。布局的基本思路是将多个宽度为文档区宽度的<table>对象填充到屏幕的文档区中。

每一个这样的<table>对象都只有一行。该行至少有三个列，其中第一列和最后一列为填充列，其余列均为文档页面容器。页面的内容被包在一个表示页面边框的结构中（在图4中这个结构是用两个<div>标签实现的）。每一行的列数和填充列的宽度是根据文档区宽度，分配到该行中的页面总宽度（在当前缩放比例下）动态决定的。表格的高度则由该行的最大页面高度决定。<table>对象的总个数取决于页面的内容及页面格式。

按照这一设计，文档编辑器可以灵活地调整页面布局。例如浏览器窗口变大或缩放比例变小时，我们可以在一行上显示多个页面，从而达到更充分地利用屏幕空间、从更宏观角度浏览处理文档等目标。同时也可以突破现有基于浏览器的文档编辑系统或者不能支持分页，或者只支持单一页面大小的局限。

附图说明

图1用HTML表示文档内容示例（DOM树结构）。

图2 JSON格式的页面布局说明示例。

图3文档分页布局效果示例。

图4实现文档分页布局效果的HTML DOM结构示例。

图5根据文档内容及页面格式说明在浏览器中进行文档页面的布局。

具体实施方式

本发明所述的方法可以用于实现基于浏览器的文档编辑器的页面布局引擎。本节给出多种可能的实现方式中一些可能的选择及技术细节。这类编辑器一般将文档内容存在云端的服务器上。在编辑器中打开文档时，这些内容将会被动态下载到浏览器。根据不同的实现。下载可以是分步的，也可以是一次性的。文档内容可以缓存在本地，但最终会被存回云端。文档内容被下载到浏览器后一般会被放到实现编辑器的Web页面某个我们称之为“容器”的DOM树节点下。图1中最顶层的<div>签就是这样的一个容器节点。容器节点一般会被隐藏。不同的实现可能会用不同类型的标签作为容器，甚至可以将文档内容作为某个标签的扩展属性或数据。

类似地，页面格式说明也可以在打开文档时动态加载。说明数据的格式可以采用HTML、JSON、XML等标准，以方便在浏览器中进行处理。当然也可以用其他自定义格式，此时需要实现解析这些数据的代码。对于说明数据的存储可以根据其格式将其作为编辑器DOM树上一个隐藏的节点，或者是作为某个节点的扩展数据或属性。

在完成文档内容及页面格式数据的加载后，编辑器的主要工作将是根据当前文档内容区的屏幕大小、文档的缩放比例、页面格式说明，生成相应的页面布局控制结构。在浏览器中，一种实现此控制结构的方法是利用如图4所示的<table>标签结构。如前所述，每一个这样的<table>对象的一行至少包含三列。第一列和最后一列是两个填充列。中间其他列是页面内容的容器。每个控制结构<table>对象可以包含一个或多个这样的行。整个文档的编辑区将包含多个这样的控制结构。

图 5描述了基于本发明的布局引擎如何将页面内容分配到到各页面中的一些主要步骤。布局引擎的主要工作是，对文档中的每一个节 <section>，根据其页面大小说明及当前缩放比例生成一个容器<td>结构，如果当前页面控制结构<table>对象当前行的剩余宽度大于此容器的宽度，或者当前行中还没有加入任何页面容器，则将此页面容器插入到当前行最右列的左边，然后将当前节中的未布局的内容依次填入当前的页面容器，直至可能会产生溢出。溢出时可以有几种处理方法，如可以将产生溢出的那部分内容放到下一页，也可以将这部分内容（如一个段落或表格）进行拆分，使当前窗口的空间得到充分利用。不同的实现可以用不同的方法计算溢出何时发生。

在此过程中，如果将当前页面容器的加入当前控制结构会导致其宽度超过文档区的宽度，此时布局引擎需要将此页面容器放入到下一个控制结构<table>中。此时可以需要计算当前页面控制结构<table>的两个填充列的宽度，以完成当前页面控制结构的设置。用多个<table>对象作为控制结构的优点是每一个控制结构是独立的，从而可以避免因单个<table>对象的多行中列数或列宽度不同而带来的复杂设置。

在初始布局完成之后，随着在页面中的不同位置进行内容的增删和修改，可能需要将某些内容从一个页面容器中移到另外一个容器中。同时，布局引擎可能需要创建新的页面容器，也可能需要删除掉一些页面容器。在这些调整之后可以用如上述类似的方法将页面容器重新布置在页面控制结构<table>中。此过程可能会导致创建新的页面控制结构或清除不再需要的页面控制结构。

Claims

1.基于HTML的所见即所得文档编辑器的页面布局方法，其特征在于：

1) 以 HTML标准中所定义标签的一个子集为基础的文档内容表示方法；

2) 以符合Web标准的数据格式或自定义格式表示文档页面格式表示方法；

3) 以HTML标准中<table>标签对象为基础的页面布局表示方法。

2.权利要求1中所述的文档内容表示方法具有如下特征：

1) 该体系将文档内容分布到多个不同的<section>对象中；

2) 每一个<section>对象可以包含一个<header>对象和一个<footer>对象，以及若干表示文字<p>，图象<img>，视频<audio>，音频<video>等四类内容的对象；

3) 这些表示内容的对象可以被放入带编号列表<ol>，无编号列表<ul>，及表格<table>三类内容格式控制结构中，这些控制结构可以任意嵌套；

4) 文档内容的样式可以用表示内容的标签的class或style属性表示；

5) 表示文档内容的<section>对象可以被放到实现编辑器Web 页面的DOM树的一个容器节点中。

3.权利要求1中所述的文档页面格式表示方法具有如下特征：

1) 包含页面大小、页面大小、方向、上下左右页边距等；

页面大小可以用标准页面大小代码指定，如A4, 16开，US-Letter等，也可以用具体的尺寸，如25cm x 20cm等；

2) 页面方向可以是横向（Landscape）或纵向（Portrait）；

3) 页面边距可以统一指定，如2.5cm，也可以上下左右页边距分开指定。

4.权利要求3中所述的页面格式表示方法在具体的实现上具有如下特征：

1) 页面格式说明可以用符合Web 标准的数据格式如JSON，XML等指定，也可以用自定义的数据格式；

2) 页面格式说明可以分开作为权利2中所述相应<section>对象的扩展属性或数据，也可以作为一个整体存储为文档内容的容器节点的扩展属性或数据。

5.权利要求1中所述的文档页面布局表示方法具有如下特征：

1) 文档的所有页面被放入一个或多个被称为页面控制结构的<table>标签对象中；

2) 上述<table>标签对象的每一行都至少有三个列，其中最左列和最右列为填充列，

其余列为页面内容的容器。

6.基于权利要求2，3，4，5的页面布局引擎具有如下特征：

1) 可以根据页面格式说明、当前显示缩放比例、当前文档区屏幕尺寸动态生成合适大小的页面容器，并将其放入到合适的页面控制结构中；

2) 可以将页面内容动态地布入所生成的页面容器中；

3) 可以根据页面控制结构同一行上页面窗口的总宽度及编辑器文档区的总宽度动态计算左右填充列的宽度；

4)可以根据文档内容及页面格式的动态变化创建新的或删除已有的页面容器，或改变其尺寸；

5) 可以根据页面容器的动态变化创建新的页面控制结构或删除已有的页面控制结构，并在不同的页面控制结构间动态移动调整页面容器。