一種網(wǎng)頁(yè)文檔編輯器中的資源加載方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及網(wǎng)頁(yè)處理技術(shù)領(lǐng)域，具體涉及一種網(wǎng)頁(yè)文檔編輯器中的資源加載方 法。
【背景技術(shù)】
[0002] 網(wǎng)頁(yè)文檔編輯器，指的是在網(wǎng)頁(yè)瀏覽器環(huán)境中運(yùn)行的文檔編輯器程序，能夠被其 編輯的文檔通常是HTML (超文本標(biāo)記語(yǔ)言)、XHTML (可擴(kuò)展超文本標(biāo)記語(yǔ)言)、CSS (級(jí)聯(lián)樣 式表)、SVG (可縮放矢量圖形)、MathML (數(shù)學(xué)標(biāo)記語(yǔ)言)、XML (可擴(kuò)展標(biāo)記語(yǔ)言）等格式，或 者其衍生格式，如印ub格式。其中，上述網(wǎng)頁(yè)瀏覽器環(huán)境不僅包括普通的瀏覽器，也包括實(shí) 現(xiàn)了瀏覽器核心功能的類似瀏覽器的運(yùn)行環(huán)境。
[0003] 網(wǎng)頁(yè)文檔編輯器管理的、用于存儲(chǔ)被編輯的文檔及其相關(guān)資源的存儲(chǔ)設(shè)備為內(nèi)部 存儲(chǔ)設(shè)備，內(nèi)部存儲(chǔ)設(shè)的具體形式可能是以下三種：
[0004] (1) webfilesystem(瀏覽器文件系統(tǒng)）；
[0005] (2)網(wǎng)絡(luò)上的某個(gè)服務(wù)器提供的存儲(chǔ)空間；
[0006] (3)本地文件系統(tǒng)中的某個(gè)地方。
[0007] 網(wǎng)頁(yè)文檔編輯器中被編輯的文檔還會(huì)引用一些文件，它們不存在于文檔本身中， 被稱為資源。資源通常是二進(jìn)制文件，包括圖像、視頻、音頻、字體等。例如HTML img、video、 audio標(biāo)簽的src屬性(源文件屬性）是個(gè)url，指向一個(gè)圖片文件，該圖片文件就是資源。 CSS中的background-image等屬性通過url()函數(shù)引用資源。資源可分為內(nèi)部資源和外 部資源，內(nèi)部資源是指該資源存儲(chǔ)于內(nèi)部存儲(chǔ)設(shè)備，否則就屬于外部資源，指向內(nèi)部資源的 url就是內(nèi)部資源url，否則就是外部資源url。由于外部資源不受該網(wǎng)頁(yè)文檔編輯器的管 理，因此隨時(shí)可能被刪除、改名、修改，或變得不可訪問。因此，如果被編輯文檔需要插入外 部資源，網(wǎng)頁(yè)文檔編輯器往往需要將外部資源復(fù)制到內(nèi)部存儲(chǔ)器中，然后在文檔中寫入內(nèi) 部資源url，或者將已經(jīng)寫入文檔的外部資源url修改為對(duì)應(yīng)的內(nèi)部資源url，以避免上述 問題，這個(gè)復(fù)制過程以及相關(guān)的操作稱為資源加載。
[0008] D0M即文檔對(duì)象模型是一種用于網(wǎng)頁(yè)文檔的編程接口，D0M樹定義了網(wǎng)頁(yè)文檔的 邏輯結(jié)構(gòu)，MutationObserver(變動(dòng)觀察器)是瀏覽器中用于監(jiān)視D0M樹修改的一種機(jī)制， 當(dāng)D0M對(duì)象樹發(fā)生任何變動(dòng)的時(shí)候，對(duì)每個(gè)修改操作，產(chǎn)生一個(gè)MutationRecord，用戶代碼 通過MutationRecord了解D0M樹有哪些修改。
[0009] 較新的瀏覽器(如IE 10, Firefox 4, Chrome 8,或其更高版本）支持blob (二進(jìn) 制大對(duì)象)和blob-url (指向一個(gè)blob的url)機(jī)制。瀏覽器中，blob是個(gè)對(duì)象，表示一個(gè) 只讀的二進(jìn)制數(shù)據(jù)塊，其實(shí)際的存儲(chǔ)機(jī)制有多種，包括內(nèi)存塊、數(shù)據(jù)庫(kù)記錄、文件等。瀏覽器 中還可以創(chuàng)建指向blob對(duì)象的url,即blob-url,這是通過URL. create0bjectURL()方法 實(shí)現(xiàn)的。blob-url是臨時(shí)性的，一個(gè)頁(yè)面創(chuàng)建的blob-url在頁(yè)面關(guān)閉后即告失效。因此， blob-url可以被視為外部資源url。
[0010] 撤銷重做管理器是多數(shù)網(wǎng)頁(yè)文檔編輯器的重要組成部分之一，它記錄用戶對(duì)文檔 做出的每一步修改，以便能夠撤銷或重放每一步修改操作。
[0011] 現(xiàn)有的網(wǎng)頁(yè)文檔編輯器有很多種，例如NicEdit、TinyMCE、CKEditor等，其主要編 輯的文檔格式是HTML。當(dāng)需要向被編輯的HTML文檔中插入一個(gè)位于本地文件系統(tǒng)上的資 源，如圖像文件時(shí)，資源的加載有幾種方法：
[0012] 1.傳統(tǒng)的方法是，先將該圖像上傳到網(wǎng)絡(luò)上的某個(gè)服務(wù)器上（即利用服務(wù)器做內(nèi) 部存儲(chǔ)設(shè)備)，得到該圖像在該服務(wù)器上的url (內(nèi)部資源url)，然后在被編輯文檔中插入 一個(gè)img標(biāo)簽，將其src屬性修改為上述url。這樣做的缺點(diǎn)是：（1)不能在離線的狀態(tài)下 操作（2)當(dāng)文件較大或者網(wǎng)絡(luò)較慢時(shí)，需要較長(zhǎng)時(shí)間才能完成上傳，而直到完成后才能將該 圖像顯示出來。現(xiàn)有的網(wǎng)頁(yè)文檔編輯器大都采用此方法。
[0013] 2.在支持blob-url的瀏覽器上，可以從待插入的本地圖像文件生成相應(yīng)的 blob-url (外部資源url)，然后在被編輯文檔中插入一個(gè)img標(biāo)簽，將其src屬性修改為上 述blob-url，這樣，圖像可以立即顯示出來；之后，可以在后臺(tái)將圖像文件上傳到服務(wù)器， 得到該圖像在該服務(wù)器上的url (內(nèi)部資源url)，再將上述blob-url替換為服務(wù)器上的 url。這大致克服了上述傳統(tǒng)方法的缺點(diǎn)，一方面圖像可以馬上顯示，另一方面當(dāng)網(wǎng)絡(luò)暫時(shí) 不可用或緩慢時(shí)仍可操作，但長(zhǎng)時(shí)間離線時(shí)仍然不可操作。
[0014] 3.在支持blob-url和web filesystem的瀏覽器上，可以從待插入的本地圖像文 件生成相應(yīng)的blob-url (外部資源url)，然后在被編輯文檔中插入一個(gè)img標(biāo)簽，將其src 屬性修改為上述blob-url，這樣，圖像可以立即顯示出來；之后，可以在后臺(tái)將圖像文件復(fù) 制到web filesystem上，得到該圖像在web filesystem上的url (內(nèi)部資源url)，再將上 述blob-url替換為web filesystem上的url。由于web filesystem位于本地，所以即使 長(zhǎng)時(shí)間離線仍可操作。
[0015] 在方法2和3中，會(huì)遇到"外部資源url蔓延"的問題，具體如下：由于將外部資 源復(fù)制到內(nèi)部存儲(chǔ)器可能要花一段不短的時(shí)間，這期間用戶可能會(huì)繼續(xù)編輯文檔，例如將 引用外部資源url的img標(biāo)簽克隆了多份；或者將該img標(biāo)簽連同外部資源url復(fù)制到剪 貼板，稍后再粘貼回文檔；如果該網(wǎng)頁(yè)文檔編輯器有撤銷重做管理器，則該外部資源url還 可能被復(fù)制到撤銷重做管理器中，并在執(zhí)行撤銷/重做時(shí)重新寫入到文檔中。也就是說，一 旦一個(gè)外部資源url被寫入文檔，則經(jīng)過后續(xù)的編輯操作，該url可能出現(xiàn)在文檔的多個(gè)地 方，也可能在之后任何時(shí)候被重新寫入文檔的任何地方，這就是"外部資源url蔓延"的問 題。如前所述，外部資源url隨時(shí)可能失效，需要及時(shí)修改為對(duì)應(yīng)的內(nèi)部資源url。但是由 于外部資源url蔓延，及時(shí)發(fā)現(xiàn)所有的外部資源url往往是困難和低效的，僅僅在資源復(fù)制 結(jié)束后將最初使用該外部資源url的img標(biāo)簽的src修改為內(nèi)部資源url是不夠的。
[0016] 本發(fā)明提供一種網(wǎng)頁(yè)文檔編輯器中的資源加載方法，能夠在資源加載過程中以及 之后，可靠和高效地將外部資源url修改為內(nèi)部資源url，克服外部資源url蔓延問題。

【發(fā)明內(nèi)容】

[0017] 針對(duì)現(xiàn)有技術(shù)中存在的缺陷，本發(fā)明的目的在于提供一種網(wǎng)頁(yè)文檔編輯器中的資 源加載方法，解決網(wǎng)頁(yè)文檔編輯器資源加載過程中的外部資源url蔓延的問題。
[0018] 為實(shí)現(xiàn)上述目的，本發(fā)明采用的技術(shù)方案為：一種網(wǎng)頁(yè)文檔編輯器中的資源加載 方法，包括以下步驟：
[0019] (1)創(chuàng)建已加載資源映射表；所述的已加載資源映射表用于記錄網(wǎng)頁(yè)文檔中已加 載的外部資源的外部資源url，以及將外部資源復(fù)制到網(wǎng)頁(yè)文檔編輯器的內(nèi)部存儲(chǔ)設(shè)備后 其對(duì)應(yīng)的內(nèi)部資源url;
[0020] (2)監(jiān)視對(duì)待編輯網(wǎng)頁(yè)文檔的修改，查找修改后的文檔內(nèi)容中的外部資源url ;
[0021] (3)檢索已加載資源映射表中是否存在查找到的外部資源url，若是則將查找到的 外部資源url替換為與其對(duì)應(yīng)的內(nèi)部資源url，若否則進(jìn)入步驟（4);
[0022] (4)將查找到的外部資源url對(duì)應(yīng)的外部資源復(fù)制到網(wǎng)頁(yè)文檔編輯器的內(nèi)部存儲(chǔ) 設(shè)備中，確定其內(nèi)部資源url，并將外部資源url以及與其對(duì)應(yīng)的內(nèi)部資源url添加到已加 載資源映射表。
[0023] 進(jìn)一步，如上所述的一種網(wǎng)頁(yè)文檔編輯器中的資源加載方法，該方法還包括：
[0024] 創(chuàng)建正在加載的資源集合，該集合的元素是正在加載的外部資源的外部資源url。
[0025] 進(jìn)一步，如上所述的一種網(wǎng)頁(yè)文檔編輯器中的資源加載方法，在步驟（4)之前，該 方法還包括：
[0026] 查看查找的外部資源url是否存在于所述的正在加載的資源集合中，若否則將該 外部資源url添加到正在加載的資源集合中，并進(jìn)入步驟（4)，若是則放棄該外部資源url 對(duì)應(yīng)的外部資源的復(fù)制。
[0027] 進(jìn)一步，如上所述的一種網(wǎng)頁(yè)文檔編輯器中的資源加載方法，步驟（4)中，將查找 到的外部資源url對(duì)應(yīng)的外部資源復(fù)制到頁(yè)