Share via

在 Word Web App 中建置進階編輯

  • Article

英文原文已於 2012 年 8 月 3 日星期五發佈

這是 Office Web Apps 工程小組週刊系列的第一篇文章，將深入探索下一版的 Office Web Apps。如同 Mike Morton 數週前在他的新版 Office Web Apps (可能為英文網頁) 部落格文章中所提及，已改善的撰寫功能是這個版本中的核心案例之一。

在這篇文章中，Ken Yuhas (Office Web Applications 的程式總監) 將探索這些改善功能，並討論我們如何在瀏覽器中針對 Word Web App 建置這些功能。

我們投注在 Office 應用程式的開發上已超過 20 年之久，所以 Office 應用程式中的功能均可提高生產力。我們在每個版本的 Office Web Apps 上投注的時間有限，所以必須為這些功能和我們想要投入的新案例設定優先順序。我們使用客戶意見回應、使用情況資料及新案例投入來進行這類決策。由於是 Web Apps，所以我們會經常推出新版本，因此，請持續讓我們了解哪些是對您而言很重要的功能。

頁面配置

Word Web App Viewer 所轉譯的文件逼真度一律會與您在桌面上透過 Microsoft Word 所使用的逼真度相同。但是，Word Web App 編輯器缺乏相同的頁面配置功能。藉由新增這些功能，您現在可以即時看見您的變更會對最後配置產生何種影響。雖然徹底改善了編輯體驗，但最好還是透過圖片來傳達。

(Office 2010 中的 Word Web App 編輯器)

(Word Web App 編輯器 2013)

您現在可以立即在瀏覽器中檢視文件的正確頁面寬度、方向、邊界、段落間距、縮排及其他更多項目。我們已新增 [頁面配置] (Page Layout) 功能區索引標籤，所以，您可以輕易地對這些內容進行變更。誠如所見，這些增強功能改善了文件的逼真度，讓它更接近您的列印文件。

當您開啟文件時，伺服器會處理檔案並將頁面配置內容與文件內容一起傳送給瀏覽器。我們在瀏覽器中執行的 JavaScript 會將適當的 CSS 值套用至內容，而且會讓瀏覽器處理其餘的部分。訣竅就是立即進行轉換，讓您能夠在瀏覽器中與 Microsoft Word 中看見相同的配置。

 

(Word Web App 編輯器 2013 中的 [頁面配置] (Page Layout) 索引標籤)

Office Art

我們也在這個版本的 Word 編輯器中新增了檢視 Office Art (含有效果的圖片、圖表、SmartArt、文字藝術師及其他更多項目) 的能力。您可以立即將新的圖片樣式套用至瀏覽器中的影像。為了讓您在存取文件時隨處享有一致的體驗，我們在伺服器上使用了相同圖形引擎，來轉譯接著要傳送到 Web 應用程式的影像。

(Word Web App 編輯器 2013 中的 [圖片效果] (Picture Effect) 選項)

字數統計

字數統計是我們客戶提出最多要求的功能之一，而我們想要確定已在此版本中新增此功能。與桌面應用程式一樣，我們會在狀態列中顯示字數統計。結果證明在瀏覽器中建置字數統計功能是一項很有趣的挑戰。

(Word Web App 編輯器 2013 中的字數統計)

斷字或判斷哪些字元群組是文字會是字數統計中的主要活動。結果是針對標準 Unicode 字元，它會在每個字大約 1ms 的地方取得斷字代碼，而瀏覽器會在每個字大約 2ms 的地方取得斷字代碼。JavaScript 是屬於單一執行緒，因此，如果我們在開機時計算 20 頁文件中的所有文字，則會將該應用程式凍結超過 12 秒的時間！

為了防止應用程式凍結並且仍能提供在背景執行的字數統計功能，我們將字數統計功能分散為數個區塊。當我們開始進行字數統計時，會使用 JavaScript 回呼，嘗試統計大約 100 個字。然後回到應用程式的剩餘部分，處理像是輸入或點擊等新事件。當所有事件都處理完畢之後，再返回統計字數。

調整與完成

我們還在這個版本的較小功能投注了一些心力，以便在 Word Web App 中建構完整的編輯體驗。例如，您現在可以使用註解或追蹤修訂來編輯文件。我們也新增了檢視內容控制項 (例如，書目和目錄) 的能力。插入的影像現在可以內嵌方式放置，而不需要新的段落。您甚至可以使用新的變大和縮小按鈕來變更字型大小！

(含有 Word 產生的書目與新插入之內嵌影像的文件)

希望這篇部落格文章可以引起您對於 Word Web App 中新進階撰寫功能的興趣。您可以藉由使用這個特殊連結 (可能為英文網頁)登入，或者參與 Office 365 預覽 (可能為英文網頁)，在 SkyDrive 上嘗試新的 Office Web Apps。

 Ken Yuhas

Office Web Applications 的程式總監

這是翻譯後的部落格文章。英文原文請參閱 Building Advanced Editing in Word Web App