一種在線交互塊式編輯方法及編輯器的制造方法【專利摘要】本發(fā)明公開了一種在線交互塊式編輯方法及編輯器，該方法包括：設(shè)置文字塊編輯框架；將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域；按照類名進(jìn)行點(diǎn)擊測試的方式在所述文字塊編輯框架中創(chuàng)建文字塊；當(dāng)需要修改所述文字塊中的內(nèi)容時，按照類名進(jìn)行點(diǎn)擊測試的方式選中和移動所述內(nèi)容。利用本發(fā)明，可以實現(xiàn)在線塊編輯，為在線創(chuàng)意編輯提供了可能。【專利說明】一種在線交互塊式編輯方法及編輯器【
技術(shù)領(lǐng)域：
】[0001]本發(fā)明屬于排版【
技術(shù)領(lǐng)域：
】，具體涉及一種在線交互塊式編輯方法及編輯器?！?br>
背景技術(shù)：
】[0002]目前基于HTML5的在線流式編輯器非常多，流式編輯器是一種流水線型的、非交互式的文本編輯器，它使用戶可以在命令行上(而不是編輯器中）逐行串行對文件進(jìn)行無破壞性編輯。流式編輯器適合編輯文檔，而對于一些創(chuàng)意的編輯則需要塊式編輯器。[0003]利用塊式編輯器可以創(chuàng)建塊定義并添加動態(tài)行為，塊式編輯器包含一個繪圖區(qū)域，在該區(qū)域中，用戶可以像在程序的主繪圖區(qū)域中一樣繪制和編輯幾何圖形，可以使用上下文選項卡或塊編輯器編輯動態(tài)行為，也可以將動態(tài)行為添加到當(dāng)前圖形中現(xiàn)有的塊定義，但現(xiàn)有的塊式編輯器無法實現(xiàn)在線創(chuàng)意編輯?！?br/>
發(fā)明內(nèi)容】[0004]本發(fā)明提供一種在線交互塊式編輯方法及編輯器，以實現(xiàn)在線塊編輯，為在線創(chuàng)意編輯提供可能。[0005]為此，本發(fā)明實施例提供如下技術(shù)方案：[0006]一種在線交互塊式編輯方法，包括：[0007]設(shè)置文字塊編輯框架；[0008]將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域；[0009]按照類名進(jìn)行點(diǎn)擊測試的方式在所述文字塊編輯框架中創(chuàng)建文字塊；[0010]當(dāng)需要修改所述文字塊中的內(nèi)容時，按照類名進(jìn)行點(diǎn)擊測試的方式選中和移動所述內(nèi)容。[0011]優(yōu)選地，所述設(shè)置文字塊框架包括：[0012]利用<div>標(biāo)簽設(shè)置文字塊框架。[0013]優(yōu)選地，所述方法還包括：[0014]將標(biāo)識文字塊框架的<div>標(biāo)簽的位置設(shè)置為絕對位置。[0015]優(yōu)選地，所述將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域包括：[0016]利用〈iframe〉標(biāo)簽將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域。[0017]優(yōu)選地，所述方法還包括：[0018]利用臨時對象|旲擬所有的狀態(tài)提不。[0019]一種在線交互塊式編輯器，包括：文字輸入模塊和圖片輸入模塊，還包括：文字塊編輯模塊，所述文字塊編輯模塊包括：[0020]設(shè)置單元，用于設(shè)置文字塊編輯框架；[0021]連接單元，用于將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域；[0022]創(chuàng)建單元，用于按照類名進(jìn)行點(diǎn)擊測試的方式在所述文字塊編輯框架中創(chuàng)建文字塊；[0023]修改單元，用于當(dāng)需要修改所述文字塊中的內(nèi)容時，按照類名進(jìn)行點(diǎn)擊測試的方式選中和移動所述內(nèi)容。[0024]優(yōu)選地，所述設(shè)置單元，具體利用<div>標(biāo)簽設(shè)置文字塊框架。[0025]優(yōu)選地，所述編輯器還包括：[0026]定位單元，用于將標(biāo)識文字塊框架的<div>標(biāo)簽的位置設(shè)置為絕對位置。[0027]優(yōu)選地，所述連接單元，具體用于利用〈iframe〉標(biāo)簽將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域。[0028]優(yōu)選地，所述編輯器還包括：[0029]狀態(tài)提示單元，用于利用臨時對象模擬所有的狀態(tài)提示。[0030]本發(fā)明在線交互塊式編輯方法及編輯器，通過設(shè)置文字塊編輯框架；將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域；按照類名進(jìn)行點(diǎn)擊測試的方式在所述文字塊編輯框架中創(chuàng)建文字塊；當(dāng)需要修改所述文字塊中的內(nèi)容時，按照類名進(jìn)行點(diǎn)擊測試的方式選中和移動所述內(nèi)容。從而簡單、有效地實現(xiàn)了在線塊編輯，進(jìn)而為在線創(chuàng)意編輯提供了可能。【專利附圖】【附圖說明】[0031]圖1是本發(fā)明實施例在線交互塊式編輯方法的流程圖；[0032]圖2是利用本發(fā)明實施例在線交互塊式編輯方法在瀏覽器的編輯窗口創(chuàng)建文字塊的橡皮線示意圖；[0033]圖3是本發(fā)明實施例在線交互塊式編輯方法中在線文字塊的編輯選中的示意圖；[0034]圖4是本發(fā)明實施例在線交互塊式編輯方法中在線文字塊的移動縮放示意圖；[0035]圖5是本發(fā)明實施例在線交互塊式編輯器的結(jié)構(gòu)示意圖。【具體實施方式】[0036]下面結(jié)合附圖和實施方式對本發(fā)明實施例作進(jìn)一步的詳細(xì)說明。[0037]如圖1所示，是本發(fā)明實施例在線交互塊式編輯方法的流程圖，包括以下步驟：[0038]步驟101，設(shè)置文字塊編輯框架。[0039]具體地，可以利用<div>標(biāo)簽設(shè)置文字塊框架。[0040]需要說明的是，為了避免瀏覽器進(jìn)行自動流式排版，可以將標(biāo)識文字塊框架的<div>標(biāo)簽的位置設(shè)置為絕對位置。這樣所有的文字塊就可以在頁面內(nèi)自由地擺放、隨意地移動、放大或縮小，而不會影響其他的內(nèi)容。[0041]步驟102,將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域。[0042]具體地，可以利用〈iframe〉標(biāo)簽將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域。[0043]將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域，可以使編輯焦點(diǎn)或者選中狀態(tài)不會因為鼠標(biāo)點(diǎn)擊或觸摸等操作導(dǎo)致編輯焦點(diǎn)或者選中狀態(tài)丟失。[0044]步驟103,按照類名進(jìn)行點(diǎn)擊測試的方式在所述文字塊編輯框架中創(chuàng)建文字塊，t匕如class='TextBlock'。[0045]步驟104,當(dāng)需要修改所述文字塊中的內(nèi)容時，按照類名進(jìn)行點(diǎn)擊測試的方式選中和移動所述內(nèi)容，比如class='page'。[0046]利用本發(fā)明實施例的方法，可以基于HTML5(HypertextMarkupLanguage5,超文本標(biāo)記語言版本5)，實現(xiàn)對文字塊的在線塊編輯。[0047]例如，基于HTML5實現(xiàn)文字塊編輯的框架組織如下：[0048]<htm!><heacl><:/head><.body><divid='EditorFrame'><divid='ToolBar'></div><divid='Document><iframeid='DocumentFrame'><html><head></head><body><clivclass='page'><clivclass='TextBlock'></div></div>〈/body〉</html></iframe></div></div></body></htmi>[0049]上述框架采用雙主體（body)的方式，工具條區(qū)域和文檔區(qū)域?qū)哟谓Y(jié)構(gòu)上采用并列的方式，文檔層內(nèi)嵌iframe標(biāo)簽(用于定義內(nèi)聯(lián)框架)，然后在iframe標(biāo)簽內(nèi)的body中建立文檔的編輯頁面（page)。[0050]采用內(nèi)嵌的iframe看似增加了整個編輯框架的復(fù)雜度，但其真正的用意是分離編輯焦點(diǎn)和工具操作。由于瀏覽器和HTML本身的特點(diǎn)，當(dāng)鼠標(biāo)或者觸控點(diǎn)擊操作發(fā)生時，焦點(diǎn)對象是隨著點(diǎn)擊而改變的，那么就無法完成對文字的選中再點(diǎn)擊工具按鈕進(jìn)行功能的應(yīng)用。[0051]為此，在本發(fā)明實施例中，利用上述iframe標(biāo)簽，其作用相當(dāng)于在當(dāng)前的web頁面中又內(nèi)嵌一個另外的web頁面，兩個頁面互相不干擾。當(dāng)點(diǎn)擊發(fā)生在各自的區(qū)域時，由各自的頁面進(jìn)行處理，從而很好地解決了編輯文字時的焦點(diǎn)問題。[0052]然后通過javascript將工具命令和文檔進(jìn)行聯(lián)系，使工具的代碼可以操作文檔的結(jié)果，這樣就可以形成文字的可視化的交互編輯。[0053]如圖2所示，是利用本發(fā)明實施例的方法創(chuàng)建文字塊時提示文字塊位置和大小的橡皮線示意圖。[0054]web頁面不同于本地應(yīng)用程序，本地應(yīng)用程序都存在著⑶I(GraphicsDeviceInterface，圖形設(shè)備接口），而基于瀏覽器和HTML的web頁面則沒有，因此所有的提示不能像本地應(yīng)用那樣將線條畫到⑶I上，而是所有顯示的內(nèi)容都必須有一個實體的對象才行，而且這個對象還必須掛在相應(yīng)的DOM(DocumentObjectModel,文檔對象模型）節(jié)點(diǎn)上才可以顯示。D0M是HTML與XML(ExtensibleMarkupLanguage,可擴(kuò)展的標(biāo)記語言）的應(yīng)用編程接口，D0M將整個頁面映射為一個由層次節(jié)點(diǎn)組成的文件。[0055]為了在這種顯示和內(nèi)容無法分離的狀況中解決狀態(tài)提示的問題，在本發(fā)明實施例中，可以采用一個偽臨時對象來模擬所有的狀態(tài)提示，比如在畫文字塊(包括創(chuàng)建和/或修改文字塊）的時候，用所述偽臨時對象來冒充文字塊本身，等文字塊畫完，將它銷毀。再比如，畫文字塊時的橡皮線，選中文字塊時的角度狀態(tài)和改變大小的手柄等，這些狀態(tài)的對象本身也參與排版但并不影響排版，在顯示的時候?qū)ο蟠嬖?，不顯示的時候?qū)ο缶弯N毀。[0056]如圖3所示，是本發(fā)明實施例的方法中文字塊的編輯狀態(tài)示意圖。[0057]文字塊采用<div>標(biāo)簽來實現(xiàn)，不同于其他比如〈input〉、〈textarea〉等可接受鍵盤輸入的標(biāo)簽，<div>本身是不可編輯的，它并不能直接接收文字的錄入，為此，在本發(fā)明實施例中，可以利用HTML5的contentEditable屬性來使它變成可編輯狀態(tài)(設(shè)置contentEditable='true'時，即可開啟該元素的編輯模式)，從而實現(xiàn)文字的錄入。[0058]如圖4所示，是本發(fā)明實施例的方法中文字塊的選中移動縮放狀態(tài)示意圖。[0059]文字塊的選中提示可以采用傳統(tǒng)的手柄方式，既可以移動又可以拖動各個手柄進(jìn)行不同方向的縮放。選中的邊框和手柄同樣采用偽臨時對象的方式。[0060]可見，利用本發(fā)明實施例在線交互塊式編輯方法，可以簡單、有效地實現(xiàn)在線塊編輯，進(jìn)而為在線創(chuàng)意編輯提供了可能。[0061]相應(yīng)地，本發(fā)明實施例還提供一種在線交互塊式編輯器，如圖5所示，是該編輯器的一種結(jié)構(gòu)示意圖。[0062]在該實施例中，所述編輯器包括：文字輸入模塊501和圖片輸入模塊502,以及文字塊編輯模塊503。其中，文字塊編輯模塊503包括：[0063]設(shè)置單元531，用于設(shè)置文字塊編輯框架；[0064]連接單元532,用于將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域；[0065]創(chuàng)建單元533,用于按照類名進(jìn)行點(diǎn)擊測試的方式在所述文字塊編輯框架中創(chuàng)建文字塊；[0066]修改單元534,用于當(dāng)需要修改所述文字塊中的內(nèi)容時，按照類名進(jìn)行點(diǎn)擊測試的方式選中和移動所述內(nèi)容。[0067]上述設(shè)置單元531具體可以利用<div>標(biāo)簽設(shè)置文字塊框架。[0068]需要說明的是，為了避免瀏覽器進(jìn)行自動流式排版，所述編輯器還可進(jìn)一步包括：定位單元(未圖示)，用于將設(shè)置單元531設(shè)置的用于標(biāo)識文字塊框架的<div>標(biāo)簽的位置設(shè)置為絕對位置。這樣所有的文字塊就可以在頁面內(nèi)自由地擺放、隨意地移動、放大或縮小，而不會影響其他的內(nèi)容。[0069]上述連接單元532具體可以利用〈iframe〉標(biāo)簽將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域。將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域，可以使編輯焦點(diǎn)或者選中狀態(tài)不會因為鼠標(biāo)點(diǎn)擊或觸摸等操作導(dǎo)致編輯焦點(diǎn)或者選中狀態(tài)丟失。[0070]由于在web頁面中，所有顯示的內(nèi)容都必須對應(yīng)一個實體的對象，而且這個對象還必須掛在相應(yīng)的D0M節(jié)點(diǎn)上才可以顯示。因此，為了在這種顯示和內(nèi)容無法分離的狀況中解決狀態(tài)提示的問題，在本發(fā)明實施例的編輯器中，還可進(jìn)一步包括：狀態(tài)提示單元(未圖示)，用于利用臨時對象模擬所有的狀態(tài)提示。這些臨時對象本身也參與排版但并不影響排版，在顯示的時候所述臨時對象存在，不顯示的時候臨時對象就銷毀。[0071]可見，利用本發(fā)明實施例在線交互塊式編輯器，可以簡單、有效地實現(xiàn)在線塊編輯，進(jìn)而為在線創(chuàng)意編輯提供了可能。[0072]本說明書中的各個實施例均采用遞進(jìn)的方式描述，各個實施例之間相同相似的部分互相參見即可，每個實施例重點(diǎn)說明的都是與其他實施例的不同之處。以上所描述的裝置實施例僅僅是示意性的，其中所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實際的需要選擇其中的部分或者全部模塊來實現(xiàn)本實施例方案的目的。本領(lǐng)域普通技術(shù)人員在不付出創(chuàng)造性勞動的情況下，即可以理解并實施。[0073]本發(fā)明的各個部件實施例可以以硬件實現(xiàn)，或者以在一個或者多個處理器上運(yùn)行的軟件模塊實現(xiàn)，或者以它們的組合實現(xiàn)。本領(lǐng)域的技術(shù)人員應(yīng)當(dāng)理解，可以在實踐中使用微處理器或者數(shù)字信號處理器（DSP)來實現(xiàn)根據(jù)本發(fā)明實施例的門禁控制系統(tǒng)中的一些或者全部部件的一些或者全部功能。[0074]以上對本發(fā)明實施例進(jìn)行了詳細(xì)介紹，本文中應(yīng)用了【具體實施方式】對本發(fā)明進(jìn)行了闡述，以上實施例的說明只是用于幫助理解本發(fā)明的方法及設(shè)備；同時，對于本領(lǐng)域的一般技術(shù)人員，依據(jù)本發(fā)明的思想，在【具體實施方式】及應(yīng)用范圍上均會有改變之處，綜上所述，本說明書內(nèi)容不應(yīng)理解為對本發(fā)明的限制?！緳?quán)利要求】1.一種在線交互塊式編輯方法，其特征在于，包括：設(shè)置文字塊編輯框架；將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域；按照類名進(jìn)行點(diǎn)擊測試的方式在所述文字塊編輯框架中創(chuàng)建文字塊；當(dāng)需要修改所述文字塊中的內(nèi)容時，按照類名進(jìn)行點(diǎn)擊測試的方式選中和移動所述內(nèi)容。2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述設(shè)置文字塊框架包括：利用<div>標(biāo)簽設(shè)置文字塊框架。3.根據(jù)權(quán)利要求2所述的方法，其特征在于，所述方法還包括：將標(biāo)識文字塊框架的<div>標(biāo)簽的位置設(shè)置為絕對位置。4.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域包括：利用〈iframe〉標(biāo)簽將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域。5.根據(jù)權(quán)利要求1至4任一項所述的方法，其特征在于，所述方法還包括：利用臨時對象模擬所有的狀態(tài)提示。6.-種在線交互塊式編輯器，包括：文字輸入模塊和圖片輸入模塊，其特征在于，還包括：文字塊編輯模塊，所述文字塊編輯模塊包括：設(shè)置單元，用于設(shè)置文字塊編輯框架；連接單元，用于將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域；創(chuàng)建單元，用于按照類名進(jìn)行點(diǎn)擊測試的方式在所述文字塊編輯框架中創(chuàng)建文字塊；修改單元，用于當(dāng)需要修改所述文字塊中的內(nèi)容時，按照類名進(jìn)行點(diǎn)擊測試的方式選中和移動所述內(nèi)容。7.根據(jù)權(quán)利要求6所述的編輯器，其特征在于，所述設(shè)置單元，具體利用<div>標(biāo)簽設(shè)置文字塊框架。8.根據(jù)權(quán)利要求7所述的編輯器，其特征在于，所述編輯器還包括：定位單元，用于將標(biāo)識文字塊框架的<div>標(biāo)簽的位置設(shè)置為絕對位置。9.根據(jù)權(quán)利要求6所述的編輯器，其特征在于，所述連接單元，具體用于利用〈iframe〉標(biāo)簽將所述文字塊編輯框架獨(dú)立于文檔編輯區(qū)域。10.根據(jù)權(quán)利要求6至9任一項所述的編輯器，其特征在于，所述編輯器還包括：狀態(tài)提示單元，用于利用臨時對象模擬所有的狀態(tài)提示。【文檔編號】G06F9/44GK104111823SQ201310138238【公開日】2014年10月22日申請日期:2013年4月19日優(yōu)先權(quán)日:2013年4月19日【發(fā)明者】趙志剛申請人:北大方正集團(tuán)有限公司,北京北大方正電子有限公司