我們對 SocialCalc 所做的第一項改進,是讓文字儲存格能夠使用共筆語法,以及直接在表格編輯器中實現的豐富文本繪製:
在 1.0 版發布之後不久,為了回應用戶希望通過統一語法插入圖片、鏈接,以及文字標記的需求,我們幫 SocialCalc 加上了這項功能。由於 Socialtext 提供自己的開源共筆平台,因此自然會希望能在試算表中直接使用相同的語法。
為了實現此功能,我們需要將預設的文字儲存格格式(即 textvalueformat
屬性)設為 text-wiki
,並為它提供自定的繪製器。
至於 textvalueformat
屬性是什麼呢?請見下文。
類型與格式
在 SocialCalc 中,每個儲存格都有一個 datatype
及一個 valuetype
屬性。包含文字/數字資料的儲存格分別對應到文字/數字值類型,而具備 datatype="f"
的公式儲存格則可能會生成數字或文字值。
在前一節介紹的繪製步驟中,Sheet 物件會為每個儲存格生成 HTML。為此,它會檢查每個儲存格的 valuetype
:如果以 t
開頭,則該儲存格的textvalueformat
屬性會決定如何進行生成。如果以 n
開頭,則使用 nontextvalueformat
屬性進行判斷。
如果該儲存格的 textvalueformat
或 nontextvalueformat
屬性沒有定義,則會通過其 valuetype
屬性查詢預設格式,如下圖所示:
對 text-wiki
值格式的支援,寫在 SocialCalc.format_text_for_display
中:
if (SocialCalc.Callbacks.expand_wiki && /^text-wiki/.test(valueformat) ) { // do general wiki markup displayvalue = SocialCalc.Callbacks.expand_wiki( displayvalue, sheetobj, linkstyle, valueformat ); }
此處我們並非將「共筆文字轉 HTML」的轉換器嵌入到 format_text_for_display
裡,而是在 SocialCalc.Callbacks
裡定義一個新的掛鉤。這是 SocialCalc 代碼裡推薦的方法:這種模組化的設計,讓應用程式可以支援各種不同共筆文字的語法。如果應用程式用不到 text-wiki
格式,也可以直接忽略 expand_wiki
掛鉤。
繪製共筆文字
隨後,我們使用了 Wikiwyg,這是一個 JavaScript 程式庫,可在共筆文字和 HTML 之間提供雙向轉換。
我們定義下列 expand_wiki
函式,將儲存格的值透過 Wikiwyg 的 Wikitext
解析器和 HTML
產生器轉換成 HTML:
var parser = new Document.Parser.Wikitext(); var emitter = new Document.Emitter.HTML(); SocialCalc.Callbacks.expand_wiki = function(val) { // Convert val from Wikitext to HTML return parser.parse(val, emitter); }
最後一個步驟則需要在試算表初始化完畢後,將 set sheet defaulttextvalueformat text-wiki
加入命令佇列:
// Assume there's a <div id="tableeditor"/> in DOM var spreadsheet = new SocialCalc.SpreadsheetControl(); spreadsheet.InitializeSpreadsheetControl( "tableeditor", 0, 0, 0 ); spreadsheet.ExecuteCommand( 'set sheet defaulttextvalueformat text-wiki' );
將上述部份搭配起來後,繪製步驟的工作流程將類似這樣:
大功告成!改進後的 SocialCalc 能夠支持豐富的共筆標記語法:
*bold* _italic_ `monospace` {{unformatted}} > indented text * unordered list # ordered list "Hyperlink with label"<http://softwaregarden.com/> {image: http://www.socialtext.com/images/logo.png}
請嘗試在 A1
中輸入 *bold* _italic_ `monospace`
,隨後即可看到繪製後的豐富文本內容:
(未完,待續。)