CN104750679A - 一种网页文档编辑器中的资源加载方法 - Google Patents

Abstract

本发明公开了一种网页文档编辑器中的资源加载方法，首先创建一个用于记录外部资源url以及内部资源url的已加载资源映射表，在对网页文档进行修改时，查找修改后的文档内容中的外部资源url，并检索已加载资源映射表中是否存在查找到的外部资源url，若是则将查找到的外部资源url替换为与其对应的内部资源url，若否则将查找到的外部资源url对应的外部资源复制到内部存储设备中，确定其内部资源url，并将外部资源url以及与其对应的内部资源url添加到已加载资源映射表。通过该方法，能够确保文档中的外部资源url都及早的被修改与其对应的内部资源url，解决了资源加载过程中存在的外部资源url蔓延的问题。

Description

一种网页文档编辑器中的资源加载方法

技术领域

本发明涉及网页处理技术领域，具体涉及一种网页文档编辑器中的资源加载方法。

背景技术

网页文档编辑器，指的是在网页浏览器环境中运行的文档编辑器程序，能够被其编辑的文档通常是HTML（超文本标记语言）、XHTML（可扩展超文本标记语言）、CSS（级联样式表）、SVG（可缩放矢量图形）、MathML（数学标记语言）、XML（可扩展标记语言）等格式，或者其衍生格式，如epub格式。其中，上述网页浏览器环境不仅包括普通的浏览器，也包括实现了浏览器核心功能的类似浏览器的运行环境。

网页文档编辑器管理的、用于存储被编辑的文档及其相关资源的存储设备为内部存储设备，内部存储设的具体形式可能是以下三种：

（1）web filesystem（浏览器文件系统）；

（2）网络上的某个服务器提供的存储空间；

（3）本地文件系统中的某个地方。

网页文档编辑器中被编辑的文档还会引用一些文件，它们不存在于文档本身中，被称为资源。资源通常是二进制文件，包括图像、视频、音频、字体等。例如HTML img、video、audio标签的src属性（源文件属性）是个url，指向一个图片文件，该图片文件就是资源。CSS中的background-image等属性通过url()函数引用资源。资源可分为内部资源和外部资源，内部资源是指该资源存储于内部存储设备，否则就属于外部资源，指向内部资源的url就是内部资源url，否则就是外部资源url。由于外部资源不受该网页文档编辑器的管理，因此随时可能被删除、改名、修改，或变得不可访问。因此，如果被编辑文档需要插入外部资源，网页文档编辑器往往需要将外部资源复制到内部存储器中，然后在文档中写入内部资源url，或者将已经写入文档的外部资源url修改为对应的内部资源url，以避免上述问题，这个复制过程以及相关的操作称为资源加载。

DOM即文档对象模型是一种用于网页文档的编程接口，DOM树定义了网页文档的逻辑结构，Mutation Observer（变动观察器）是浏览器中用于监视DOM树修改的一种机制，当DOM对象树发生任何变动的时候，对每个修改操作，产生一个MutationRecord，用户代码通过MutationRecord了解DOM树有哪些修改。

较新的浏览器（如IE 10，Firefox 4，Chrome 8，或其更高版本）支持blob（二进制大对象）和blob-url（指向一个blob的url）机制。浏览器中，blob是个对象，表示一个只读的二进制数据块，其实际的存储机制有多种，包括内存块、数据库记录、文件等。浏览器中还可以创建指向blob对象的url，即blob-url，这是通过URL.createObjectURL()方法实现的。blob-url是临时性的，一个页面创建的blob-url在页面关闭后即告失效。因此，blob-url可以被视为外部资源url。

撤销重做管理器是多数网页文档编辑器的重要组成部分之一，它记录用户对文档做出的每一步修改，以便能够撤销或重放每一步修改操作。

现有的网页文档编辑器有很多种，例如NicEdit、TinyMCE、CKEditor等，其主要编辑的文档格式是HTML。当需要向被编辑的HTML文档中插入一个位于本地文件系统上的资源，如图像文件时，资源的加载有几种方法：

1.传统的方法是，先将该图像上传到网络上的某个服务器上（即利用服务器做内部存储设备），得到该图像在该服务器上的url(内部资源url)，然后在被编辑文档中插入一个img标签，将其src属性修改为上述url。这样做的缺点是：（1）不能在离线的状态下操作（2）当文件较大或者网络较慢时，需要较长时间才能完成上传，而直到完成后才能将该图像显示出来。现有的网页文档编辑器大都采用此方法。

2.在支持blob-url的浏览器上，可以从待插入的本地图像文件生成相应的blob-url（外部资源url），然后在被编辑文档中插入一个img标签，将其src属性修改为上述blob-url，这样，图像可以立即显示出来；之后，可以在后台将图像文件上传到服务器，得到该图像在该服务器上的url(内部资源url)，再将上述blob-url替换为服务器上的url。这大致克服了上述传统方法的缺点，一方面图像可以马上显示，另一方面当网络暂时不可用或缓慢时仍可操作，但长时间离线时仍然不可操作。

3.在支持blob-url和web filesystem的浏览器上，可以从待插入的本地图像文件生成相应的blob-url（外部资源url），然后在被编辑文档中插入一个img标签，将其src属性修改为上述blob-url，这样，图像可以立即显示出来；之后，可以在后台将图像文件复制到web filesystem上，得到该图像在web filesystem上的url(内部资源url)，再将上述blob-url替换为web filesystem上的url。由于web filesystem位于本地，所以即使长时间离线仍可操作。

在方法2和3中，会遇到“外部资源url蔓延”的问题，具体如下：由于将外部资源复制到内部存储器可能要花一段不短的时间，这期间用户可能会继续编辑文档，例如将引用外部资源url的img标签克隆了多份；或者将该img标签连同外部资源url复制到剪贴板，稍后再粘贴回文档；如果该网页文档编辑器有撤销重做管理器，则该外部资源url还可能被复制到撤销重做管理器中，并在执行撤销/重做时重新写入到文档中。也就是说，一旦一个外部资源url被写入文档，则经过后续的编辑操作，该url可能出现在文档的多个地方，也可能在之后任何时候被重新写入文档的任何地方，这就是“外部资源url蔓延”的问题。如前所述，外部资源url随时可能失效，需要及时修改为对应的内部资源url。但是由于外部资源url蔓延，及时发现所有的外部资源url往往是困难和低效的，仅仅在资源复制结束后将最初使用该外部资源url的img标签的src修改为内部资源url是不够的。

本发明提供一种网页文档编辑器中的资源加载方法，能够在资源加载过程中以及之后，可靠和高效地将外部资源url修改为内部资源url，克服外部资源url蔓延问题。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种网页文档编辑器中的资源加载方法，解决网页文档编辑器资源加载过程中的外部资源url蔓延的问题。

为实现上述目的，本发明采用的技术方案为：一种网页文档编辑器中的资源加载方法，包括以下步骤：

（1）创建已加载资源映射表；所述的已加载资源映射表用于记录网页文档中已加载的外部资源的外部资源url，以及将外部资源复制到网页文档编辑器的内部存储设备后其对应的内部资源url；

（2）监视对待编辑网页文档的修改，查找修改后的文档内容中的外部资源url；

（3）检索已加载资源映射表中是否存在查找到的外部资源url，若是则将查找到的外部资源url替换为与其对应的内部资源url，若否则进入步骤（4）；

（4）将查找到的外部资源url对应的外部资源复制到网页文档编辑器的内部存储设备中，确定其内部资源url，并将外部资源url以及与其对应的内部资源url添加到已加载资源映射表。

进一步，如上所述的一种网页文档编辑器中的资源加载方法，该方法还包括：

创建正在加载的资源集合，该集合的元素是正在加载的外部资源的外部资源url。

进一步，如上所述的一种网页文档编辑器中的资源加载方法，在步骤（4）之前，该方法还包括：

查看查找的外部资源url是否存在于所述的正在加载的资源集合中，若否则将该外部资源url添加到正在加载的资源集合中，并进入步骤（4），若是则放弃该外部资源url对应的外部资源的复制。

进一步，如上所述的一种网页文档编辑器中的资源加载方法，步骤（4）中，将查找到的外部资源url对应的外部资源复制到页文档编辑器的内部存储设备后，删除正在加载的资源集合中对应的外部资源url。

进一步，如上所述的一种网页文档编辑器中的资源加载方法，步骤（1）中，所述的已加载资源映射表的键为外部资源url，值是内部资源url或包含内部资源url的对象;步骤（3）中，以查找到的外部资源url为键，检索已加载资源映射表中是否存在该查找到的外部资源url。

进一步，如上所述的一种网页文档编辑器中的资源加载方法，该方法还包括：

查找整个待编辑网页文档中的外部资源url，并进入步骤（3）。

进一步，如上所述的一种网页文档编辑器中的资源加载方法，根据设定的时间间隔周期查找整个待编辑网页文档中的外部资源url。

进一步，如上所述的一种网页文档编辑器中的资源加载方法，步骤（4）中，将修改后的文档内容中的一个外部资源url以及与其对应的内部资源url添加到已加载资源映射表后，查找整个待编辑网页文档中的外部资源url。

进一步，如上所述的一种网页文档编辑器中的资源加载方法，步骤（4）中，将修改后的文档内容中的全部外部资源url以及对应的内部资源url添加到已加载资源映射表后，再查找整个待编辑网页文档中的外部资源url。

本发明的有益效果在于：本发明所述的方法，通过实现监视对网页文档的修改，如果修改引入了已经复制的外部资源url，则将该外部资源url修改为其对应的内部url，如果尚未复制，则开始复制。通过本发明所述的方法，使对网页文档的任何修改都被置于监视之下，还可以在修改部分的外部资源复制结束后对全文档进行搜索，确保所有的外部资源url都及早的被修改与其对应的内部资源url，解决了现有网页文档编辑器中资源加载过程中存在的外部资源url蔓延的问题。

附图说明

图1为实施例1中一种网页文档编辑器中的资源加载方法的流程图；

图2为实施例2中一种网页文档编辑器中的资源加载方法的流程图。

具体实施方式

下面结合说明书附图与具体实施方式对本发明做进一步的详细说明。

实施例1

图1示出了本实施例中一种网页文档编辑器中的资源加载方法的流程图，该方法主要包括以下步骤：

步骤S11：创建已加载资源映射表；

在开始网页文档修改之前，创建一个已加载资源映射表；该已加载资源映射表用于记录网页文档中已加载的外部资源的外部资源url，以及将外部资源复制到网页文档编辑器的内部存储设备后其对应的的内部资源url。

本具体实施方式中已加载资源映射表的键是已加载的外部资源的外部资源url，值是外部资源加载到网页文档时，外部资源复制到网页文档编辑器的内部存储设备后，该外部资源对应的内部资源url或者是包含该内部资源url的对象。该已加载资源映射表初始化时为空，一旦将一外部资源复制到网页文档编辑器的内部存储设备中，则将该外部资源对应的外部资源url和内部资源url加入到已加载资源映射表。

映射表是计算机上常用的数据结构，可存储许多个键/值对。在一个映射表中，每个键都是唯一的，与每个键对应的值也是唯一的，映射表中的键与值为一对一或多对一的关系，即一个键对应一个值，或者多个键对应一个值，映射表的作用是快速地通过键来查找到其对应的值。对于具体实施方式中，键与值为一对一的关系，即外部资源url与其对应的内部资源url或包含内部资源url的对象是一对一的关系，可以通过外部资源url快速的查找到与其对应的内部资源url或者包含对应内部资源url的对象。在Javascript语言中，映射表的实现是“对象（Object）”。

步骤S12：监视对待编辑网页文档的修改，查找修改后的文档内容中的外部资源url；

对于每个网页文档，在对网页文档的编辑过程中，监视对待编辑网页文档的修改，对每一项修改，实时地检测编辑期间是否有外部资源url被写入文档，并找出修改后的内容中包含的外部资源url。本具体实施方式中，通过变动观察器机制即MutationObserver机制实现对待编辑网页文档的修改的监视。网页文档编辑器可以创建一个MutationObserver对象，监视其属性、文本值和子节点表的修改，例如：

其中，docRoot是被编辑文档的根元素；handleMutation是监视文档修改的函数，它的参数是MutationRecord对象的数组。当文档被修改时，浏览器对每一项修改形成一个MutationRecord，当浏览器空闲时，将累积的修改记录提交给handleMutation函数处理。handleMutation函数要检测其中的外部资源url并予以处理。

具体的查找每一项修改中的外部资源url的具体方式为：

如果文档中修改的是src属性（用来指定图片位置）或href属性（用于指定超链接目标的URL），判断其值是否属于外部资源url，即查看url是否指向内部存储设备中的某个地方，如果不是，则是外部资源url；在HTML/XHTML文档中，src或href属性的值是url，可能引用外部资源。其它格式的文档中也可能用其它属性，只需要相应调整即可。

如果文档中修改的是style属性（规定元素的行内样式），或者修改的是style元素的文本内容，则解析修改后的属性值或者文本内容，找出其中的“url()”函数，解出该函数的参数，判断其值是否属于外部资源url。在style属性和style元素的内容是CSS，其使用url的方式是“url()”函数，url()括号内的内容就是参数，参数为url，例如：

background-image:url(′blob://ab38..f23′)表示在元素的背景中设置一个图像，图像的url为blob://ab38..f23，;该例中blob://ab38..f23是个外部资源url。

具体的，在判断某个url是否属于外部资源url的依据是看该url是否指向内部存储设备中的某个地方，如果不是，则是外部资源url。例如，如果内部存储设备的根目录是http://mainbo.com/doc/，则不是以http://mainbo.com/doc/开头的url（先转化为绝对url）均为外部资源url。

步骤S13：检索已加载资源映射表中是否存在查找到的外部资源url，若是则将查找到的外部资源url替换为与其对应的内部资源url，若否则进入步骤S14；

对于查找到的外部资源url，以查找到的外部资源url为键，检索已加载资源映射表中是否存在查找到的外部资源url，若是则将查找到的外部资源url替换为与其对应的内部资源url，若否则进入下一步。

例如，如果已加载资源映射表有一项

“blob://ab38..f23”（键）:“image/a.jpg”（值）

并发现某元素修改后的style属性为

background-image:url(′blob://ab38..f23′);

则将该style属性的值改为

background-image:url(′image/a.jpg′);

如果检索不到，则进入下一步。

步骤S14：将查找到的外部资源url对应的外部资源复制到网页文档编辑器的内部存储设备中，确定其内部资源url，并将外部资源url以及与其对应的内部资源url添加到已加载资源映射表。

例如，被编辑文档存储于网上一个服务器（本实施方式中的内部存储设备）中，那么将该外部资源，如blob://ab38..f23指向的资源上传到这个服务器中。如果内部存储设备为web filesystem，那么被编辑文档也可以位于web filesystem中，资源也将被复制到web filesystem中。

步骤S15：查找整个待编辑网页文档中的外部资源url。

本具体实施方式中，在对待编辑文档进行修改的过程中，首先通过步骤S12查找出文档的每一项修改后的内容中包含的外部资源url，之后执行步骤S13，之后可以在对文档编辑过程中的某些时机，找出整个文档中包含的外部资源url，对每个外部资源url执行步骤S13。

其中，本具体实施方式中所述的某些时机，可以是根据用户设定的时间间隔周期查找整个待编辑网页文档中的外部资源url，也可以是在步骤S14中，完成将修改后的文档内容中的一个外部资源url以及与其对应的内部资源url添加到已加载资源映射表后，也可以是在步骤S14中，完成将修改后的文档内容中的所有外部资源url以及对应的内部资源url添加到已加载资源映射表后，或者是以上方式的任意组合。

其中，查找整个待编辑网页文档中的外部资源url的具体方式为：

①找出待编辑网页文档中所有含有src或href属性的元素，判断其src/href属性的值是否属于外部资源url；

②找出文档中所有含有style属性的元素，从其style属性值中找出每个”url()”函数，解出该函数的参数，判断其值是否属于外部资源url；

③找出文档中所有style元素，从其文本内容中找出每个”url()”函数，解出该函数的参数，判断其值是否属于外部资源url。

其中，上述①～③中判断其值是否属于外部资源url的具体方式如上述步骤S12中查找每一项修改中的外部资源url的方式，为现有技术。

也就是说，在完成网页文档中被修改部分的外部资源url的修改后（替换为与其对应的内部资源url或对应的外部资源复制到网页文档编辑器的内部存储设备），再对整个文档进行扫描，搜索整个文档中包含的外部资源url，对每个外部资源url的元素执行步骤S13，确保文档中所有外部资源url都及早被修改为对应的内部资源url。

实施例2

图2示出了本实施例中一种网页文档编辑器中的资源加载方法的流程图，该方法主要包括以下步骤：

步骤S21：创建已加载资源映射表和正在加载的资源集合；

在开始网页文档修改之前，创建一个已加载资源映射表和一个正在加载的资源集合。

其中，所述的已加载资源映射表用于记录已加载的外部资源的外部资源url，以及外部资源在网页文档编辑器的内部存储设备中的内部资源url。本具体实施方式中已加载资源映射表的键是已加载的外部资源的外部资源url，值是外部资源加载到网页文档时，外部资源在网页文档编辑器的内部存储设备中的内部资源url或者是包含该内部资源url的对象。该已加载资源映射表初始化时为空，一旦将一外部资源复制到网页文档编辑器的内部存储设备中，则将该外部资源对应的外部资源url和内部资源url加入到已加载资源映射表。

所述的正在加载的资源集合中的元素是正在加载的外部资源的外部资源url。正在被复制到内部存储设备中的外部资源的外部资源url加入到该集合中，复制完成或者失败后将其移除。

步骤S22：监视对待编辑网页文档的修改，查找修改后的文档内容中的外部资源url；

在对网页文档的编辑过程中，监视对待编辑网页文档的修改，对每一项修改，找出修改后的内容中包含的外部资源url。本具体实施方式中通过变动观察器机制即MutationObserver机制实现对待编辑网页文档的修改的监视。其中，通过MutationObserver监视文档的修改，对每一项修改，即MutationRecord，查找每一项修改中的外部资源url的具体方式为：

如果文档中修改的是src属性或href属性，判断其值是否属于外部资源url；

如果文档中修改的是style属性，或者修改的是style元素的文本内容，则解析修改后的属性值或者文本内容，找出其中的“url()”函数，解出该函数的参数，判断其值是否属于外部资源url。

步骤S23：检索已加载资源映射表中是否存在查找到的外部资源url，若是则将查找到的外部资源url替换为与其对应的内部资源url，若否则进入步骤S24；

对于查找到的外部资源url，以查找到的外部资源url为键，检索已加载资源映射表中是否存在查找到的外部资源url，若是则将查找到的外部资源url替换为与其对应的内部资源url，若否则进入下一步。

步骤S24：查看查找的外部资源url是否存在于正在加载的资源集合中，若否则将该外部资源url添加到正在加载的资源集合中，并进入步骤S25，若是则放弃该外部资源url对应的外部资源的复制。

在进行步骤S25之前，检索正在加载的资源的集合，如果已经包含该外部资源url，说明这个资源正在复制中，就放弃复制，即不需要执行步骤S25，否则将该url插入正在加载的资源的集合，并开始复制。

步骤S25：将查找到的外部资源url对应的外部资源复制到页文档编辑器的内部存储设备中，确定其内部资源url，并将外部资源url以及与其对应的内部资源url添加到已加载资源映射表。

在将查找到的外部资源url对应的外部资源复制到页文档编辑器的内部存储设备后，删除正在加载的资源集合中对应的外部资源url。

假定复制完成后，该资源在服务器中的内部资源url是image/a.jpg（这是相对于文档的相对url），在已加载资源映射表中添加一项

“blob://ab38..f23”:”image/a.jpg”

不论复制成功或失败，都从正在加载的资源的集合中删除该外部资源url。

由于复制资源可能需要较长的时间，这需要在后台进行，这期间用户可以继续编辑文档。此外，这期间如果检测到其它的外部资源url被写入文档，并需要复制资源到内部存储设备，那么可以并行地或串行地进行，优选的方式是并行，以便缩短时间。

步骤S26：查找整个待编辑网页文档中的外部资源url。

本具体实施方式中，在对待编辑文档进行修改的过程中，首先通过步骤S12查找出文档的每一项修改后的内容中包含的外部资源url，之后执行步骤S13，之后在对文档编辑过程中的某些时机，找出整个文档中包含的外部资源url，对每个外部资源url执行步骤S13。

其中，本具体实施方式中所述的某些时机，可以是根据用户设定的时间间隔周期查找整个待编辑网页文档中的外部资源url，也可以是在步骤S15中，完成将修改后的文档内容中的一个外部资源url以及与其对应的内部资源url添加到已加载资源映射表后，也可以是在步骤S15中，完成将修改后的文档内容中的所有外部资源url以及对应的内部资源url添加到已加载资源映射表后。

此外，需要说明是，本具体实施方式中实施例1的步骤S11-S15和实施例2的步骤S21-S26，在实际的执行操作过程中，上述步骤并不需要完全按照上述步骤执行，用户可以根据实际操作的需要适当进行调整，如步骤S15和步骤S26可以按照用户设定的时间间隔周期执行，也可以在完成一批外部资源的复制后再执行，优选的可以在步骤S14或步骤S25完成将查找到的外部资源url对应的外部资源复制到内部存储设备中后再执行。

本发明所述的方法，在网页文档编辑的任何时候，也可以额外发起外部资源的复制，即执行步骤S14或S25。例如，用户要向文档中插入一个本地的图片文件，选中图片文件后，通过URL.createObjectURL()创建一个blob-url，如blob://ab38..f23，并创建一个img元素，引用该blob-url，如：

<img src=“blob://ab38..f23”>

那么可以先对此url执行S14或S25，然后（不必等S14或S25完成）将该img元素插入文档。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其同等技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (9)

1.一种网页文档编辑器中的资源加载方法，包括以下步骤：

（1）创建已加载资源映射表；所述的已加载资源映射表用于记录网页文档中已加载的外部资源的外部资源url，以及将外部资源复制到网页文档编辑器的内部存储设备后其对应的内部资源url；

（2）监视对待编辑网页文档的修改，查找修改后的文档内容中的外部资源url；

（3）检索已加载资源映射表中是否存在查找到的外部资源url，若是则将查找到的外部资源url替换为与其对应的内部资源url，若否则进入步骤（4）；

（4）将查找到的外部资源url对应的外部资源复制到网页文档编辑器的内部存储设备中，确定其内部资源url，并将外部资源url以及与其对应的内部资源url添加到已加载资源映射表。

2.如权利要求1所述的一种网页文档编辑器中的资源加载方法，其特征在于，该方法还包括：

创建正在加载的资源集合，该集合的元素是正在加载的外部资源的外部资源url。

3.如权利要求2所述的一种网页文档编辑器中的资源加载方法，其特征在于，在步骤（4）之前，该方法还包括：

查看查找的外部资源url是否存在于所述的正在加载的资源集合中，若否则将该外部资源url添加到正在加载的资源集合中，并进入步骤（4），若是则放弃该外部资源url对应的外部资源的复制。

4.如权利要求3所述的一种网页文档编辑器中的资源加载方法，其特征在于，步骤（4）中，将查找到的外部资源url对应的外部资源复制到页文档编辑器的内部存储设备后，删除正在加载的资源集合中对应的外部资源url。

5.如权利要求1至4所述的一种网页文档编辑器中的资源加载方法，其特征在于，步骤（1）中，所述的已加载资源映射表的键为外部资源url，值是内部资源url或包含内部资源url的对象;步骤（3）中，以查找到的外部资源url为键，检索已加载资源映射表中是否存在该查找到的外部资源url。

6.如权利要求5所述的一种网页文档编辑器中的资源加载方法，其特征在于，该方法还包括：

查找整个待编辑网页文档中的外部资源url，并进入步骤（3）。

7.如权利要求6所述的一种网页文档编辑器中的资源加载方法，其特征在于，根据设定的时间间隔周期查找整个待编辑网页文档中的外部资源url。

8.如权利要求6所述的一种网页文档编辑器中的资源加载方法，其特征在于，步骤（4）中，将修改后的文档内容中的一个外部资源url以及与其对应的内部资源url添加到已加载资源映射表后，查找整个待编辑网页文档中的外部资源url。

9.如权利要求6所述的一种网页文档编辑器中的资源加载方法，其特征在于，步骤（4）中，将修改后的文档内容中的全部外部资源url以及对应的内部资源url添加到已加载资源映射表后，再查找整个待编辑网页文档中的外部资源url。