用於html文檔的拖放剪貼板的製作方法

2023-05-08 13:57:16

用於html文檔的拖放剪貼板的製作方法
【專利摘要】本發明的各實施方式總體上涉及用於HTML文檔的拖放剪貼板。具體地，本發明公開了用於在客戶端-伺服器架構中，諸如在基於雲的網頁編輯應用的環境中編輯頁面的技術。在一個實施方式中，響應關於在客戶端處呈現的給定頁面上的選定內容塊而請求的複製操作來調用運行於客戶端瀏覽器中的剪貼板模塊。該剪貼板模塊配置用於在本地存儲中存儲複製的內容，並且還用於呈現UI剪貼板元素以供用戶查看。可將UI剪貼板元素拖放至正在編輯的文檔內的目標放置位置。可以視覺顯示放置區指示符以便用戶能夠看到剪貼板內容在拖放操作的釋放後將被放置於何處。在釋放之後，剪貼板內容粘貼或以其他方式插入到當前放置區處的目標頁面的DOM之中。
【專利說明】用於HTML文檔的拖放剪貼板

【技術領域】
[0001]本公開涉及基於計算機網絡的通信，更具體地，涉及用於管理頁面編輯和客戶端與伺服器之間交互的技術。

【背景技術】
[0002]客戶端-伺服器架構是計算機系統之間聯網和通信的常用方法。眾多應用和功能，諸如基於雲的文檔存儲庫和服務、電子郵件以及基於網際網路的通信等，均可使用客戶端-伺服器架構來實現。一般而言，客戶端可以是查詢伺服器以使用資源的任何計算機(例如，臺式機、膝上型計算機、平板計算機、智慧型電話等)或電腦程式，而伺服器是配置用於與請求客戶端共享其資源的計算機系統。可在伺服器與客戶端之間共享的示例資源為數眾多並幾乎是無限的，僅舉幾例而言，包括數據(例如，信息資料庫和博客)、數據存儲系統(例如，用於存儲和組織客戶端文件及數據的存儲庫)以及處理能力(例如，中央處理器和/或圖形處理器)等。客戶端和伺服器計算系統通常以請求-響應協議來彼此通信，其中客戶端發送請求而伺服器返回對該請求的響應。
[0003]進一步公知的是，瀏覽器是一種常用於向伺服器發起客戶端請求的客戶端應用，其中伺服器的期望資源由統一資源標識符(URI)所標識，並且例如可以是網頁、圖像、視頻或其他可消費內容。進一步公知的是，統一資源定位符(URL)是這樣的一類UR1:其定義給定資源的特定表示的網絡位置，並且還定義指示出URL處可用內容類型的文件擴展。雖然瀏覽器主要用於基於網際網路的通信，但其還可用於訪問文件系統以及由專用網絡中的伺服器所提供的信息。進一步公知的是，超文本標記語言(HTML)是用於創建可在瀏覽器中顯示的頁面和其他信息的主要標記語言，並且HTML元素是大多數網站的基本構件。HTML允許嵌入對象和內容並可用於創建交互式表單，並且提供了通過指定諸如標頭、段落、連結和其他項目等針對文本的結構語義來創建文檔的機制。HTML還可嵌入腳本(舉例而言，諸如基於JavaScript的代碼)，所述腳本影響客戶端處給定HTML頁面的行為。

【專利附圖】

【附圖說明】
[0004]圖1a圖示了根據本發明實施方式而配置的基於雲的頁面編輯系統。
[0005]圖1b圖示了根據本發明實施方式的、在圖1a中所示的基於雲的頁面編輯系統的組件之間的一系列交互。
[0006]圖2圖示了根據本發明實施方式的、用於處理內容編輯請求的客戶端方法。
[0007]圖3圖示了根據本發明實施方式的、用於處理內容編輯請求的伺服器端方法。
[0008]圖4a至圖4h示出了共同圖示根據本發明實施方式的頁面編輯過程的一系列頁面屏幕截圖。

【具體實施方式】
[0009]本文公開了用於在客戶端-伺服器架構中，諸如在基於雲的網頁編輯應用的環境中編輯頁面的技術。在一種此類實施方式中，響應關於在客戶端處呈現的給定頁面上的選定內容塊而請求的諸如複製或剪切(或者可使用中間內容保存位置的其他此類操作)等編輯操作來調用供應給並運行於客戶端瀏覽器中的剪貼板模塊(例如，JavaScript)。內容例如可以是諸如文本、圖像、圖形或嵌入文件(例如，視頻或音頻)等任何對象。剪貼板模塊配置用於在瀏覽器會話存儲或其他合適的本地存儲中存儲複製的內容，並且還用於呈現可由用戶訪問的代表該內容存儲的用戶接口(UI)剪貼板元素。具體而言，可在所編輯的文檔內的目標放置位置處拖放Π剪貼板元素。在一些實施方式中，視覺呈現放置區指示符，以便用戶能夠看到剪貼板內容在拖放操作的釋放後將被放置於何處。在拖放的釋放後，剪貼板內容在當前放置區處被粘貼或以其他方式嵌入到頁面中。根據一些實施方式，如果在剪貼板中表示了多個內容塊，則可提供用戶提示來允許用戶選擇特定的塊。備選地，可默認粘貼所有的內容塊。
[0010]總體概沭
[0011]管理網頁狀態和客戶端與伺服器之間的交互對於網站開發者而言一般是個難題。一種常見的方法是使用Ruby來生成JavaScript代碼,該JavaScript代碼由伺服器響應於客戶端請求而發送。利用這樣的方法，Ruby代碼有效地渲染指令，並且所產生的JavaScript渲染頁面數據。就基於web的頁面編輯器系統而言，作為給定客戶端計算機系統處的用戶(例如，網站開發者)，可以訪問由伺服器所提供的給定頁面編輯應用，並使用該應用來開發網站的頁面。在頁面編輯過程期間，通過利用滑鼠或鍵盤交互的一系列剪切/複製和粘貼功能，來完成將內容從頁面上的一個位置重新安置到該頁面上的另一位置。例如，典型的頁面編輯系統提供用以實現所要粘貼的內容的精確定位的多個用戶接口按鈕，諸如「在元素前插入」按鈕和「在元素後插入」按鈕等。因此，在期望位置上放置內容可能十分複雜，或者除此之外涉及多個步驟和用戶動作。
[0012]因此，並且根據本發明的實施方式，在此提供用於在客戶端-伺服器架構環境下編輯頁面的技術。該技術可例如利用以下代碼來實現:該代碼嵌入在頁面內並在客戶端計算機的瀏覽器內執行，以便允許關於給定頁面上的內容放置的拖放功能性。頁面例如可以是由伺服器提供並可由客戶端經網際網路訪問的網頁，或者是由伺服器提供並可由客戶端僅經專用網絡(諸如公司內部網絡)訪問的頁面。本發明的一個示例實施方式可例如在基於雲的網頁編輯應用中實現或者以其他方式與之聯合使用，所述基於雲的網頁編輯應用諸如有Adobe? Dreamweaver?或任何其他允許對可提供給客戶端計算系統的頁面進行編輯的web設計應用。根據本公開將會理解，網站開發者可根據需要而編輯給定網站的供應頁面並與之進行交互，包括在組成該網站的頁面內移動內容，並將對應更新提供回伺服器。
[0013]在一些此類實施方式中，剪貼板模塊與頁面編輯應用相集成，並且配置用於在應用伺服器上執行的小服務程序(servlet)有效地將具有剪貼板模塊的頁面編輯應用供應給客戶端。通過這種方式，可在客戶端上的瀏覽器內執行包括剪貼板模塊的頁面編輯應用。該客戶端剪貼板模塊可例如響應關於在客戶端處呈現的給定頁面上的選定的當前顯示內容(例如，文本、圖形、圖像、嵌入文件或者其他可選擇的網頁內容)塊而請求的諸如複製或剪切操作(或者任何其他涉及將內容移動或複製到保存位置或除此之外的中間位置的操作)等編輯操作而得到調用。剪貼板模塊被編程或以其他方式配置用於在客戶端處的瀏覽器會話存儲或其他合適的本地存儲或存儲器位置中存儲目標內容，並且還用於在頁面上放置供用戶查看的代表該存儲的用戶接口(UI)元素，諸如虛擬剪貼板(本文總體上稱為Π剪貼板元素或剪貼板)。剪貼板模塊還可配置用於注釋Π剪貼板元素以便向用戶提供一定程度的反饋，諸如其中存儲的內容塊的數目和/或名稱。
[0014]響應用戶對Π剪貼板元素的拖放，剪貼板模塊進一步配置用於執行對應的拖放操作，以便將UI剪貼板元素中所表示的內容放置於正在編輯文檔內的目標放置位置，該目標放置位置可在相同的頁面或不同的頁面上。可以例如通過針對基於光標的用戶接口系統的滑鼠點擊並按住動作，或者通過針對基於觸控螢幕的用戶接口系統的輕敲並按住動作來進行拖放操作。根據本公開將會理解，可以使用其他合適的用戶接口機制來進行拖放操作。在任何此類情況下，用戶可在屏幕上到處拖動或以其他方式移動UI剪貼板元素，並將其放置在Π剪貼板元素中內容的目標位置處。根據實施方式，每當加載頁面時，初始化並從會話存儲(或其他本地存儲)中讀取剪貼板模塊，因此Π剪貼板元素在給定網站的所有頁面中以及對於所有HTTP請求均為可用。在一些情況下，可視覺顯示放置區指示符以便用戶能夠看到剪貼板內容在拖放操作的釋放後將被放置於何處。例如，如果將UI剪貼板元素移動到可插入存儲內容的位置的上方，則在Π剪貼板元素的下方出現預定義區域，該預定義區域指示出可放置內容的位置。以這種方式，可規定(例如，通過頁面模板)給定頁面的預定義區域，使得用戶僅能夠將剪貼板放置到這些預定義區域之一內。根據本公開將會理解，可以使用常規的拖放功能性和目標位置突出顯示。
[0015]在釋放Π剪貼板元素之後，剪貼板內容可粘貼或以其他方式插入到當前位置或最靠近的預定義區域處的目標頁面的文檔對象模型(DOM)之中。在一種這樣的示例實施方式中，剪貼板模塊配置用於響應UI剪貼板元素的釋放而生成HTTP Post請求，該請求包括剪貼板內容(或以其他方式表示在剪貼板內的選定內容塊)。伺服器處的Post-小服務程序模塊可編程或以其他方式配置用於處理Post請求並將響應提供回客戶端。根據實施方式，剪貼板模塊還可配置用於將返回的內容在目標放置位置插入到DOM中。公知的是，DOM是應用編程接口，其一般定義文檔(例如，HTML和XML網頁/文檔)的邏輯結構以及訪問和操縱該文檔的方式。DOM允許網站開發者建立網頁、在其結構內導航，以及添加、修改或刪除元素和內容。
[0016]系統架構
[0017]圖1a圖示了根據本發明的實施方式而配置的基於雲的頁面編輯系統。如圖中可見，該系統包括動態web應用，該動態web應用可在應用伺服器上執行，並且被編程或以其他方式配置用於與經由網絡而通信地耦合至應用伺服器的客戶端交互，以及用於向客戶端的用戶提供Web設計應用。客戶端包括具有處理器(CPU)和存儲器的用戶計算系統以及瀏覽器應用，該瀏覽器應用可用於經由網絡來訪問web設計應用和應用伺服器(包括資料庫)的資源。所請求的內容能夠以包括任何數目的組件的完整頁面形式提供，或者以諸如給定頁面的一個組件之類的部分頁面來提供。如圖中進一步可見，動態web應用包括Post-小服務程序(Post-Servlet)模塊，該Post-小服務程序模塊配置用於處理Post請求和向資料庫發布相關內容。應當理解，動態web應用還可包括其他功能模塊，諸如Get-小服務程序模塊(用於處理Get請求以及從資料庫中檢索內容)和其他模塊一諸如涉及常規頁面編輯以及可由客戶端Web設計應用所採用的那些模塊。此外，由應用伺服器響應於來自客戶端的請求而供應的網頁包括一個或多個可渲染組件以及指令/代碼，它們在本文中泛稱為剪貼板模塊，該剪貼板模塊可在客戶端瀏覽器(例如，JavaScript小程序(applet)或其他合適的代碼)中執行。此類客戶端-伺服器布置例如可適合於任何在線頁面編輯服務(例如，基於雲的網站設計和編輯工具以及應用)，或者期望允許客戶端在給定網站的給定頁面上或頁面之間複製或剪切或者以其他方式移動內容的任何其他基於網絡的系統。根據本公開，所描述的布置的許多配置和變化將會是容易理解的。
[0018]網絡可以是任何通信網絡，諸如用戶的區域網和/或網際網路，或者任何其他公用和/或專用通信網絡(例如，公司的區域網和/或廣域網等)。用戶的計算系統(客戶端)能夠以任何合適的計算設備來實現，這些設備諸如為膝上型計算機、臺式機、平板計算機、智慧型電話，或者其他能夠經由網絡而訪問伺服器並向用戶顯示內容的合適的計算設備。計算系統可採用任何數目的適合的用戶輸入機制，諸如滑鼠、鍵盤、觸控螢幕、觸控板、聲控命令接口或者其任意組合。瀏覽器應用可使用任何數目的已知或專屬瀏覽器或可比較技術來實現，其中該可比較技術有助於在網絡(諸如網際網路)上檢索、呈現和遍歷信息資源，並允許諸如包括剪貼板模塊在內的頁面編輯系統等頁面嵌入代碼的執行。資料庫可例如為Java內容存儲庫(JCR)或任何其他可由伺服器訪問的合適的存儲設備。
[0019]如本文多處所描述，剪貼板模塊與Web設計應用(例如，頁面編輯應用)相集成或與其聯合操作以提供拖放剪貼板功能性。根據本公開將會理解，存儲UI剪貼板元素內容的本地存儲或存儲器在所有頁面和所有HTTP請求(例如，Post請求和Get請求等)中均持續存在。通過依次參考圖lb、圖2、圖3，和圖4a至圖4i (其中每個將會依次討論)，將提供根據本發明的實施方式而配置的、包括剪貼板模塊和Post-小服務程序模塊的示例系統的進一步細節。
[0020]根據本公開將會理解，圖1a中所示系統的各個模塊和組件，諸如剪貼板模塊、Web設計應用和Post-小服務程序模塊等，能夠以軟體來實現，所述軟體諸如為編碼在任何計算機可讀介質或電腦程式產品(例如，硬碟驅動器、伺服器、盤或其他合適的非暫時性存儲器或一組存儲器)上的指令集(例如，C、C++、面向對象的C、JavaScript、Java、BASIC等)，其在由一個或多個處理器執行時使得本文所提供的各個方法被執行。在其他實施方式中，所述功能組件/模塊可由諸如門級邏輯(例如，FPGA)或特製半導體(例如，ASIC)等硬體來實現。其他實施方式還可由微控制器來實現，該微控制器具有用於接收和輸出數據的多個輸入/輸出埠，以及用於執行本文所述功能性的多個嵌入例程。在更一般的意義上，可以使用硬體、軟體和固件的任何合適的組合。在一個特定實施方式中，使用JavaScript或其他可實時向請求訪問應用伺服器的客戶端提供的可下載代碼來實現Web設計應用的剪貼板模塊，並使用Java或C++來實現Post-小服務程序模塊。根據本公開容易理解，可以使用眾多其他特定配置。
[0021]圖1b圖示了根據本發明實施方式的、在圖1a中所示的基於雲的頁面編輯系統的組件之間的一系列交互。出於討論的目的，假設已由伺服器接收到來自客戶端的初始頁面請求，並且該伺服器已通過發送所請求的頁面而做出響應。還假設所請求的頁面包括用戶可選擇的若干個可渲染組件——諸如文本、圖形、圖像、嵌入視頻、嵌入音頻或其任何組合以及/或者其他對象，並且用戶正在開發產品網站以供潛在消費者訪問和購買產品。圖4a中示出了一個示例頁面，該頁面包括示出若干個組件的產品頁面，其中所述組件可由有意購買各種對應產品(在本示例情況中為計算機、行動電話和監視器)的消費者來選擇和評價。可選擇的組件的形式例如可以是超連結，其在被選擇時如通常做法那樣使得向消費者提供附加的內容或頁面(可使用任何合適的網站導航技術和結構)。此外，潛在消費者可看到一些信息文本。
[0022]現在，假設開發網站的用戶期望經由編輯操作來完善頁面，包括將內容從一個頁面位置複製到另一頁面位置，並且已使用任何合適的內容選擇機制選擇了該內容。例如，並參考圖4b中所示的示例實施方式，用戶已使用基於光標的動作(例如，在目標段落上雙擊，或者在目標段落上的點擊-拖動-釋放動作)而選擇了信息文本的段落。備選地，對於觸控螢幕配置，例如可在段落上使用手指或觸筆動作來選擇文本段落。在更一般的意義上，任何給定的DOM元素均可由用戶來選擇。
[0023]一旦選擇了目標內容，網站開發者/用戶可對其開始編輯操作。例如，在一個示例實施方式中，響應於所做出的內容選取，自動調用並向用戶呈現編輯Π接口。例如，圖4c中示出了一種這樣的實施方式，其中響應於所做出的內容選取，Web設計應用被配置為向用戶呈現選項菜單覆蓋和Π選擇菜單。如在本示例情況中可見，Π選擇菜單選項中之一為複製按鈕，並伴有包括任何數目的期望功能或除此之外的典型功能(例如，移動、繪製、刪除、關閉菜單等)在內的其他按鈕。此外，選項菜單覆蓋包括若干個工具或功能選項，其包括位於菜單頂部的剪貼板元素，連同其他示例功能元素(例如，文本、圖像、列等)。
[0024]繼續參考圖4d中所示的示例實施方式，響應於用戶點擊或以其他方式選擇UI選擇菜單的複製按鈕，Web設計應用被配置為觸發對剪貼板模塊的複製功能調用(如圖1b中所示(複製DOM元素))。作為響應，如圖1b中進一步所示，剪貼板模塊被配置為隱式地觸發瀏覽器會話存儲或其他合適的本地存儲或存儲器中的保存操作(設置元素)。通過這種方式，存儲的內容在站點的所有頁面上和對所有HTTP請求都是可用的。此外，本示例實施方式的剪貼板模塊被配置為更新選項菜單覆蓋的剪貼板元素的呈現以反映剪貼板元素現在包含I個對象(即，剛剛複製的選定文本)。
[0025]根據本公開容易理解，其他實施方式可包括不同的編輯工具/功能和調用方案以及不同的外觀和感覺。例如，一些web設計應用可包括配置到可由用戶在頁面某處(例如，頁面的頂部或底部)訪問的工具欄中的各種可用編輯選項(例如，複製、剪切、刪除、移動等)。該工具欄可始終呈現，或者根據需要而僅在做出用戶內容選擇之後呈現。在其他示例實施方式中，諸如在圖4d』中所示的一個實施方式中，用戶可右鍵點擊選定內容，從而呈現編輯選項下拉菜單，其包括複製功能。如圖中進一步可見，一旦用戶選擇下拉菜單的複製選項，頁面頂部的工具欄中所顯示的剪貼板元素便會被注釋(『I個對象』)，以便反映出已將目標內容複製到存儲器中。根據本公開容易理解，可以使用任何已知或定製的技術來提供具有本文所述拖放元素的眾多其他此類UI控制特徵和布局。
[0026]在任何此類情況中，如圖4e中總體示出，用戶現在可將呈現在屏幕上的剪貼板元素拖動至站點的給定頁面內的目標位置並將剪貼板元素放置在該位置。在一些此類實施方式中，當用戶到處拖動剪貼板元素時，Web設計應用可被配置為在元素經過或足夠接近可在其中放置元素的目標放置區時突出顯示這些區。圖4f示出了使用突出顯示的放置區指示符的一個此類示例實施方式。如前文所解釋，該預定義區可以是用以製作給定頁面的DOM或模板的一部分，並為Web設計應用所知，從而可隨時提供實時的突出顯示。此類放置區突出顯示可用於向用戶給予當釋放拖動操作後內容將被放置之處的更好的指示。
[0027]當釋放拖動操作時，可執行將剪貼板元素中所表示的一個或多個存儲的DOM元素插入目標頁面的目標放置區指示符中的過程。例如，並進一步參考圖lb，響應於拖放操作的釋放，剪貼板模塊隱式地向伺服器發送AJAX Post請求(例如，保存/粘貼)並且還向Web設計應用通知該Post請求(粘貼DOM元素)。如在圖1b中進一步可見,Post-小服務程序模塊處理Post請求(設置響應於請求而創建和渲染的內容的狀態並記錄其位置)並將伺服器的響應提供回Web設計應用，其中該Web設計應用處理該響應(例如，關於處理成功或錯誤)並確定將接收到的內容放置於何處。客戶端與伺服器之間的這種請求-響應交換確保了伺服器處的內容數據與客戶端處的內容數據同步。因此，在一些實施方式中，注意到在客戶端本地粘貼的初始內容隨後由Post請求中所返回的內容所代替，以便有效提供無縫的內容放置。在其他實施方式中，Post請求可不包括渲染的內容而僅返回狀態。在此類情況下，並且假設Post請求是成功的，可使用來自客戶端的後續Get請求來檢索內容從而確保客戶端和伺服器端的內容同步。在任何此類情況下，如果伺服器未能成功渲染所請求的內容(無論出於何種原因)，則可使用指示該故障的狀態代碼來通知客戶端，從而觸發客戶端代碼來移除複製的內容並相應地通知用戶。
[0028]應當理解，雖然示出了 AJAX調用和Post-小服務程序模塊，但可以使用任何合適的HTTP伺服器技術(例如，可使用PHP應用來處理Post請求並判定其是否有效，以及進一步更新資料庫中的值)。還應當理解，諸如圖4g的示例中所示的情況那樣，該發布-釋放處理對於用戶是透明的——用戶一般會看到內容如期望的那樣得到及時放置。諸如圖4h中所示的情況那樣，用戶可繼而根據期望來進一步編輯或以其他方式完善內容。這裡，用戶粘貼和編輯內容來分出關於正在進行的銷售活動的信息文本。
[0029]注意在本示例實施方式中，內容被粘貼在複製內容所在的相同頁面上。然而還要注意，每當加載頁面時，可初始化並從本地存儲(瀏覽器會話存儲或其他本地存儲器)中讀取剪貼板元素，以便向每個頁面提供可放置的剪貼板元素。因此，在其他實施方式中，可從一個頁面複製內容並將其粘貼至另一頁面。為此，如圖1b的示例實施方式中進一步示出，還配置剪貼板模塊來訪問本地存儲，以在其中放置內容(設置元素)或從中檢索內容(獲取元素)。
[0030]而且如前文所解釋，根據一些實施方式，如果剪貼板元素具有多個內容塊存儲於其中，則可給予用戶機會來挑選所要粘貼的期望內容。例如，在釋放剪貼板元素後，可以用彈出窗口來提示用戶，該窗口指示出剪貼板元素中所表示的每個內容塊。可將彈出窗口中列出的每個元素與Π選擇機制(例如，單選按鈕或複選框)相關聯，其中用戶可選擇該Π選擇機制，並繼而選擇『提交』或『好(OK) 』按鈕來將這些選定的內容塊粘貼至目標放置位置。圖4g』中示出了一個此類示例實施方式。
[0031]注意，根據一些實施方式，剪貼板模塊可包括決定剪貼板模塊的功能性的，一定程度的用戶可配置性。例如，在一些此類實施方式中，用戶可訪問剪貼板模塊的配置用戶接口，該配置用戶接口允許用戶來定義在放置時將會自動粘貼所有內容塊，或者將會向用戶提供彈出窗口從而允許用戶選擇所要粘貼的期望的塊。可以通過選擇工具欄中的配置選項或配置按鈕或者任何其他可被選擇以便使得呈現可由用戶設置的一個或多個可配置選項的此類合適的Π機制而隨時訪問這樣的配置用戶接口。根據目標應用的期望性能和靈活性，任何數目的功能特徵可以是硬編碼的或可由用戶配置的，並且眾多配置將會根據本公開而容易理解。
[0032]通
[0033]圖2圖示了根據本發明實施方式的用於處理內容編輯請求的客戶端方法。如前文所解釋，可以通過嵌入或能夠以其他方式在供應給客戶端的給定頁面的瀏覽器內執行的Web設計應用(頁面編輯系統)或其他代碼來執行所述方法。根據一個此類實施方式，使用JavaScript應用編程接口(API)或者其他可用於在執行於客戶端上的瀏覽器應用內實現所述方法的合適的客戶端代碼來編程或以其他方式配置Web設計應用。
[0034]如圖中可見，該方法包括接收201指示出與DOM元素相關聯的複製功能的用戶輸入(諸如圖4d或圖4d』中所示)。方法響應於使用中的複製功能而繼續調用203嵌入在頁面內的代碼(例如，JavaScript)，並將目標DOM元素複製205到存儲中(諸如圖1b中所示)。方法繼續在頁面上呈現207剪貼板Π元素(諸如圖4d或圖4d』中所示)。如前文所進一步解釋，可注釋該剪貼板UI元素以例如指示出其中所表示的DOM元素的數目。
[0035]方法繼續在209處確定剪貼板UI元素是否被移動。如果其未被移動，則方法繼續等待剪貼板UI的移動，並在211處連續監控以查看是否有新的頁面或新的複製功能被選擇。如果未發生移動並已使用了新的複製功能，則該方法如前文所討論那樣在205處繼續。因此，如果期望，則可將多個DOM元素保存至剪貼板Π元素中。如果未發生移動並且已訪問了新的頁面，則該方法如前文所討論那樣在207處繼續，從而可根據期望而在該頁面上呈現剪貼板Π元素。
[0036]如果檢測到剪貼板UI元素的移動，則方法包括將存儲的DOM元素經由Web設計應用而插入213目標放置區，執行215對伺服器的Post請求(諸如:Post[(數據，媒體類型)；URL])，以及接收217對Post請求的響應並將返回的內容放置在目標放置區中——諸如圖4f、圖4g或圖4g』和圖4h中所示以及參考圖1b所進一步討論。如前文所解釋,在一些實施方式中，諸如在對Post請求的響應不包括期望內容的那些實施方式中，可聯合Post請求來使用Get請求。例如，並根據一個特定的此類實施方式，將伺服器所提供的(對於Post請求的)響應暴露給讀取該響應的客戶端模塊(例如，剪貼板模塊)，並且如果伺服器確認插入/發布操作成功，則客戶端剪貼板模塊可進一步被配置為通過向伺服器發送HTTP Get請求從而接收最近發布的DOM元素(與伺服器同步)來刷新粘貼/發布的DOM元素。如果伺服器拒絕了在目標放置位置的DOM元素放置或者以其他方式指示出插入/發布操作失敗(無論出於何種原因)，則剪貼板模塊可進一步被配置為從頁面中刪除臨時粘貼的段落。在一個此類實施方式中，剪貼板模塊還被配置為向用戶給予關於內容放置失敗的視覺反饋(例如，諸如指示出內容放置操作失敗的提示和/或適當的失敗代碼以及任何建議的補救措施的呈現)。
[0037]圖3圖示了根據本發明實施方式的用於處理內容編輯請求的客戶端方法。如圖中可見，可以例如通過Post-小服務程序模塊或其他可在伺服器處執行的代碼來執行該方法。根據一個此類實施方式，可以使用Java或其他合適的伺服器端代碼來實現所述方法。
[0038]該方法包括接收301包含與基於客戶端的粘貼功能相關聯的數據的Post請求，以及使用該請求中的數據來創建303期望內容。方法還包括針對介質類型(例如，HTML、XML、JSON等)而檢查305Post請求，以及將創建的內容渲染為目標格式。方法還包括設置狀態代碼(例如，依照HTTP規範1.1的201狀態代碼)來指示Post請求成功，以及對創建的內容的位置設置位置響應標頭(也依照HTTP規範1.1)。方法還包括向響應的正文添加317渲染的內容並將響應返回至客戶端。位於客戶端的用戶可繼而按意願進一步編輯頁面內容。在其他實施方式中，應回想起對Post請求的響應可不包括所請求的內容。在此類情況下，伺服器可進一步被配置為隨後接收Get請求並提供由先前的Post請求所創建的期望內容。
[0039]因此，本發明的一個實施方式包括客戶端API，該客戶端API允許其他模塊或代碼訪問剪貼板元素的存儲(例如，向該存儲添加新內容)。API例如可以是可在瀏覽器中執行的Javascript模塊，並且其他對應於UI控制元素的可執行模塊/代碼(例如，工具欄或頁面其他位置處的複製按鈕)被配置用於識別在何時點擊或以其他方式選擇了給定Π控制元素，並且用於訪問API以便在剪貼板中存儲新元素，該新元素可於隨後被拖放至給定網站的頁面內的一些期望位置。
[0040]根據本公開，眾多實施方式將會是容易理解的，並且本文所述特徵能夠以任何數目的配置相組合。本發明的一個示例實施方式提供了用於在客戶端-伺服器布置中編輯頁面的計算機實現方法。該方法包括由客戶端計算系統將選定的內容塊複製到位於客戶端計算系統的本地存儲中，所述選定內容塊呈現在由與所述客戶端計算系統通信的伺服器計算系統向所述客戶端計算系統的瀏覽器供應的頁面上。該方法還包括，通過客戶端計算系統將剪貼板用戶接口(UI)元素呈現在所述頁面上，以及響應於將該剪貼板Π元素移動並放置到目標位置而在該目標位置中插入存儲的選定內容塊。在一些情況下，響應於將剪貼板Π元素移動並放置到目標位置，該方法還包括:執行對伺服器計算系統的Post請求，該Post請求包括存儲的選定內容塊；以及接收指示出Post請求狀態的、針對Post請求的響應。在一些此類情況下，響應於狀態指示出Post請求成功，該方法還包括:執行對伺服器計算系統的Get請求，該Get請求請求伺服器計算系統返回由Post請求所產生的內容；接收包括由Post請求所產生的請求內容的，針對Get請求的響應；以及用所述請求內容來刷新目標位置的內容。在其他此類情況下，針對Post請求的響應包括由Post請求的伺服器處理所產生的內容，並且該方法還包括用該內容來刷新目標位置的內容。在其他此類情況下，響應於狀態指示出Post請求不成功，該方法還包括以下各項中的至少一個:移除插入在目標位置中的內容；以及呈現關於內容放置失敗的視覺反饋。在一些情況下，目標位置處在與具有選定內容塊的頁面不同的頁面上(當然，其在其他情況下可處在相同頁面上)。在一些情況下，該方法包括在剪貼板Π元素的移動期間呈現放置區指示符，所呈現的放置區指示符示出了如果在那一刻放置剪貼板Π元素，則存儲的選定內容塊將被插入的位置。在一些情況下，該方法通過嵌入所述頁面內並可在客戶端計算系統的瀏覽器中執行的代碼來執行。在一些情況下，該方法包括在客戶端計算系統中接收與選定內容塊相關聯的用戶輸入，從而使得執行複製和呈現。在一些情況下，響應於本地存儲包含多個內容塊，該方法還包括呈現配置用於接收對這些塊中的一個或多個的選取的用戶接口機制，並且插入目標位置中的存儲的選定內容塊為所述一個或多個選取的塊。根據本公開，變化將會是容易理解的。例如，本發明的另一實施方式提供了以指令編碼的電腦程式產品或者一個或多個計算機可讀介質，所述指令在由一個或多個處理器執行時，使得執行用於在客戶端-伺服器布置中編輯頁面的過程，其中該過程包括如在本段各處所定義的功能性。
[0041]本發明的另一實施方式提供了用於在客戶端-伺服器布置中編輯頁面的系統。該系統包括可在客戶端計算機的瀏覽器中執行的一個或多個客戶端模塊並且配置用於:將選定的內容塊複製到位於客戶端計算機的本地存儲中，所述選定內容塊位於向客戶端計算機供應的頁面上；在所述頁面上呈現剪貼板用戶接口(UI)元素；以及響應於將該剪貼板Π元素移動並放置在目標位置，將存儲的選定內容塊插入目標位置。該系統還包括伺服器計算機，該伺服器計算機配置用於向客戶端計算機的瀏覽器供應所述頁面以及一個或多個客戶端模塊，其中所述一個或多個客戶端模塊嵌入在所述頁面內。在一些情況下，響應於將剪貼板Π元素移動並放置在目標位置，所述一個或多個客戶端模塊還配置用於:執行對伺服器計算機的Post請求,該Post請求包含存儲的選定內容塊；以及接收指示出Post請求的狀態的、針對Post請求的響應。在一些此類情況下,響應於狀態指示出Post請求成功,所述一個或多個客戶端模塊還配置用於:執行對伺服器計算機的Get請求，該Get請求請求伺服器計算機返回由Post請求所產生的內容；接收包含由Post請求所產生的請求內容的，針對Get請求的響應；以及用所述請求內容來刷新目標位置的內容。在其他此類情況下，針對Post請求的響應包括由Post請求的伺服器處理所產生的內容，並且所述一個或多個客戶端模塊還配置用於以該內容來刷新目標位置的內容。在其他此類情況下，響應於狀態指示出Post請求不成功，所述一個或多個客戶端模塊還配置用於執行以下各項中的至少一個:移除插入目標位置中的內容；以及呈現關於內容放置失敗的視覺反饋。在一些情況下，所述一個或多個客戶端模塊還配置用於執行以下各項中的至少一個:在剪貼板Π元素的移動期間呈現放置區指示符，所呈現的放置區指示符示出了如果在那一刻放置剪貼板Π元素，則存儲的選定內容塊將被插入的位置；以及響應於本地存儲包含多個內容塊，呈現配置用於接收對這些塊中的一個或多個的選取的用戶接口機制，並且插入目標位置中的存儲的選定內容塊為所述一個或多個選取的塊。
[0042]已出於說明和描述的目的而呈現了本發明的示例實施方式的前文描述。該描述並不旨在成為詳盡的描述或將本發明限定於所公開的確切形式。根據本公開，許多修改和變化是可能的。本發明的範圍並不旨在由該詳細描述所限定，而是由所附權利要求來限定。
【權利要求】
1.一種在客戶端-伺服器布置中編輯頁面的計算機實現方法，所述方法包括: 由客戶端計算系統將選定的內容塊複製到位於所述客戶端計算系統處的本地存儲中，所述選定內容塊呈現在由與所述客戶端計算系統通信的伺服器計算系統向所述客戶端計算系統的瀏覽器供應的頁面上； 由所述客戶端計算系統將剪貼板用戶接口(UI)元素呈現在所述頁面上；以及 響應於將所述剪貼板Π元素移動並放置在目標位置，將存儲的選定內容塊插入所述目標位置。
2.根據權利要求1的方法，其中響應於將所述剪貼板Π元素移動並放置在所述目標位置，所述方法還包括: 執行對所述伺服器計算系統的Post請求，所述Post請求包括所述存儲的選定內容塊；以及 接收指示出所述Post請求的狀態的、針對所述Post請求的響應。
3.根據權利要求2的方法，其中響應於所述狀態指示出所述Post請求成功，所述方法還包括: 執行對所述伺服器計算系統的Get請求，所述Get請求請求所述伺服器計算系統返回由所述Post請求所產生的內容； 接收包含由所述Post請求所產生的所述請求內容的、針對所述Get請求的響應；以及 用所述請求內容來刷新所述目標位置的內容。
4.根據權利要求2的方法，其中針對所述Post請求的響應包括由所述Post請求的伺服器處理所產生的內容，並且所述方法還包括用所述內容來刷新所述目標位置的內容。
5.根據權利要求2的方法，其中響應於所述狀態指示出所述Post請求不成功，所述方法還包括以下各項中的至少一個: 移除插入所述目標位置處的所述內容；以及 呈現關於內容放置失敗的視覺反饋。
6.根據權利要求1的方法，其中所述目標位置位於與具有所述選定內容塊的所述頁面不同的頁面上。
7.根據權利要求1的方法，其中所述方法還包括在所述剪貼板Π元素的移動期間呈現放置區指示符，所呈現的放置區指示符示出如果在那一刻放置所述剪貼板Π元素，則所述存儲的選定內容塊將被插入的位置。
8.根據權利要求1的方法，其中所述方法通過嵌入所述頁面內並可在所述客戶端計算系統的所述瀏覽器中執行的代碼來執行。
9.根據權利要求1的方法，還包括: 在所述客戶端計算系統中接收與所述選定內容塊相關聯的用戶輸入，從而使得執行所述複製和呈現。
10.一種以指令編碼的電腦程式產品，該指令在由一個或多個處理器執行時使得執行用於在客戶端-伺服器布置中編輯頁面的過程，所述過程包括: 由客戶端計算系統將選定的內容塊複製到所述客戶端計算系統處的本地存儲中，所述選定內容塊呈現在由與所述客戶端計算系統通信的伺服器計算系統向所述客戶端計算系統的瀏覽器供應的頁面上； 由所述客戶端計算系統將剪貼板用戶接口(UI)元素呈現在所述頁面上；以及 響應於將所述剪貼板Π元素移動並放置在目標位置處，將存儲的選定內容塊插入所述目標位置處。
11.根據權利要求10的電腦程式產品，其中響應於將所述剪貼板Π元素移動並放置在所述目標位置中，所述過程還包括: 執行對所述伺服器計算系統的Post請求，所述Post請求包括所述存儲的選定內容塊；以及 接收指示出所述Post請求的狀態的、針對所述Post請求的響應。
12.根據權利要求11的電腦程式產品，其中響應於所述狀態指示出所述Post請求成功，所述過程還包括: 執行對所述伺服器計算系統的Get請求，所述Get請求請求所述伺服器計算系統返回由所述Post請求所產生的內容； 接收包含由所述Post請求所產生的所述請求內容的,針對所述Get請求的響應；以及 用所述請求內容來刷新所述目標位置的內容。
13.根據權利要求11的電腦程式產品，其中針對所述Post請求的響應包括由所述Post請求的伺服器處理所產生的內容，並且所述過程還包括用該內容來刷新所述目標位置的內容。
14.根據權利要求11的電腦程式產品，其中響應於所述狀態指示出所述Post請求不成功，所述過程還包括以下各項中的至少一個: 移除插入所述目標位置處的所述內容；以及 呈現關於內容放置失敗的視覺反饋。
15.根據權利要求10的電腦程式產品，其中所述目標位置位於與具有所述選定內容塊的所述頁面不同的頁面上。
16.根據權利要求10的電腦程式產品，其中所述過程還包括在所述剪貼板Π元素的移動期間呈現放置區指示符，所呈現的放置區指示符示出如果在那一刻放置所述剪貼板Π元素，則所述存儲的選定內容塊將被插入的位置。
17.根據權利要求10的電腦程式產品，其中所述過程通過嵌入所述頁面內並可在所述客戶端計算系統的所述瀏覽器中執行的代碼來執行。
18.根據權利要求10的電腦程式產品，所述過程還包括: 在所述客戶端計算系統處接收與所述選定內容塊相關聯的用戶輸入，從而使得執行所述複製和呈現。
19.根據權利要求10的電腦程式產品，其中響應於所述本地存儲包含多個內容塊，所述過程還包括呈現配置用於接收對這些塊中的一個或多個的選取的用戶接口機制，並且插入所述目標位置處的所述存儲的選定內容塊為所述一個或多個選取的塊。
20.一種用於在客戶端-伺服器布置中編輯頁面的系統，所述系統包括: 一個或多個客戶端模塊，其可在客戶端計算機的瀏覽器中執行，並且配置用於: 將選定的內容塊複製到所述客戶端計算機處的本地存儲中，所述選定內容塊在向所述客戶端計算機供應的頁面上； 將剪貼板用戶接口(UI)元素呈現在所述頁面上；以及 響應於將所述剪貼板Π元素移動並放置在目標位置處，將存儲的選定內容塊插入所述目標位置處；以及 伺服器計算機，配置用於向所述客戶端計算機的所述瀏覽器供應所述頁面和所述一個或多個客戶端模塊，其中所述一個或多個客戶端模塊嵌入在所述頁面內。
21.根據權利要求20的系統，其中響應於將所述剪貼板Π元素移動並放置在所述目標位置處，所述一個或多個客戶端模塊還配置用於: 執行對所述伺服器計算機的Post請求，所述Post請求包括所述存儲的選定內容塊；以及 接收指示出所述Post請求的狀態的、針對所述Post請求的響應。
22.根據權利要求21的系統，其中響應於所述狀態指示出所述Post請求成功，所述一個或多個客戶端模塊還配置用於: 執行對所述伺服器計算機的Get請求，所述Get請求請求所述伺服器計算機返回由所述Post請求所產生的內容； 接收包含由所述Post請求所產生的所述請求內容的,針對所述Get請求的響應；以及 用所述請求內容來刷新所述目標位置的內容。
23.根據權利要求21的系統，其中針對所述Post請求的所述響應包括由所述Post請求的伺服器處理所產生的內容，並且所述一個或多個客戶端模塊還配置用於用該內容來刷新所述目標位置的內容。
24.根據權利要求21的系統，其中響應於所述狀態指示出所述Post請求不成功，所述一個或多個客戶端模塊還配置用於執行以下各項中的至少一個: 移除插入所述目標位置處的所述內容；以及 呈現關於內容放置失敗的視覺反饋。
25.根據權利要求20的系統，其中所述一個或多個客戶端模塊還配置用於執行以下各項中的至少一個: 在所述剪貼板Π元素的移動期間呈現放置區指示符，所呈現的放置區指示符示出如果在那一刻放置所述剪貼板Π元素，則所述存儲的選定內容塊將被插入的位置；以及 響應於所述本地存儲包含多個內容塊，呈現配置用於接收對這些塊中的一個或多個的選取的用戶接口機制，並且插入所述目標位置處的所述存儲的選定內容塊為所述一個或多個選取的塊。
【文檔編號】G06F3/0486GK104133828SQ201310653726
【公開日】2014年11月5日 申請日期:2013年12月4日 優先權日:2013年4月30日
【發明者】D·安蒂帕 申請人:奧多比公司