hack：增強圖靈社群文章寫作表單的指令碼[多圖]

這篇文章已經過時，請參考這篇：圖靈全屏編輯書籤工具（2012-8-23）

免責宣告：這是一個“未完成”的hack指令碼。無論誰，無論出於什麼原因，在使用此指令碼過程中發生文稿丟失的問題，作者概不負責。

問題

相信這是在社群發表過文章的大多數人都遇到過，但都會感到很無奈的一個現實問題：

我的液晶顯示器是16:9的，橫向很寬，但寫作表單垂直很長。如果我想在撰寫或編輯格式的同時看到預覽，就要不斷調整內容區和預覽區大小。特別是在編輯比較長的內容時，效率很低。如果預覽區和編輯表單能並列就好了——既可利用顯示器的閒置空間，又可以提高效率。

預覽區和編輯表單並列？嗯，這想法不錯。不過，你說的並列是什麼意思呢？噢，是不是下面這樣啊。

hack

既然有這個迫切需求，我就利用一點空餘時間寫了幾行指令碼，通過它可以大致實現前面讀者所說的預覽區和編輯表單並列。

警告：這裡只是說實現了預覽區和編輯表單並列，並沒有做到並列後可以繼續“儲存草稿”或“發表”——甚至，連選擇“標籤”和“相關圖書”都不行。

好了，社群使用了jQuery，所以我的jQuery指令碼如下：

$editor=$('<div></div>').appendTo('body');
$preview=$($('.resizable-textarea').get(1));
$preview.css({position:'fixed',left:0,top:-16,background:'white',zIndex:101});
$parts=$('fieldset');$part0=$parts.get(0);$part1=$parts.get(1);
                     $part2=$parts.get(2);$part3=$parts.get(3);
$editor.css({position:'fixed',left:$preview.width(),right:0,top:0,background:'white',zIndex:100});
$editor.append($part0,$part1,$part2,$part3);

用法

假設你現在要寫一篇文章。在Chrome瀏覽器（沒時間測試其他瀏覽器）開啟社群的“寫作”頁面——看看兩側的空白，確實有點浪費：

按F12或Ctrl+Shift+J，開啟“JavaScript控制檯”（見下圖），複製前面的指令碼，貼上到控制檯中：

下一步？按“回車”啊，按了回車就執行指令碼，然後介面就變成這樣了——預覽區和編輯表單並列：

再次警告：別看這時候介面中有“發表”、“儲存為草稿”按鈕和“相關標籤”、“相關圖書”欄位，但這些現在都不能用了，當它們不存在吧。那……我怎麼發表？當然有辦法，繼續往下看。

當然，你還得的手工調一調左側預覽區和右側內容欄位的大小：

怎麼樣，現在沒人會說自己的顯示器螢幕浪費了。好，開始寫文章吧——右邊寫，加 Markdown 標籤，左邊就能實時對照預覽：

都寫好了，格式也滿意了？接下來就是最重要的一步：複製源文字！ 這樣操作：在內容欄位中按 Ctrl+A、Ctrl+C（好吧，按滑鼠右鍵->“全選”，再按滑鼠右鍵->“複製”也行啊）：

這樣就把源文字複製到了作業系統的剪貼簿上。趕緊開啟文字編輯器並新建一個空檔案，然後按 Ctrl+V（或滑鼠右鍵->貼上），最後儲存這個檔案。

這是幹什麼？這是轉移勝利果實，或者叫備份。在沒有UPS（不間斷電源）的環境下，經常備份自己的工作成果是一個好習慣。事實上，在前面複製源文字之前，最好提前開啟並新建一個空白檔案預備著。這樣，才能把因為突然停電造成的風險降到最低。

俗話說：有備無患——有了備份，就不用擔心了。換句話說，hack指令碼的使命已經完成了。接下來，按 F5 重新整理頁面，重新載入社群“寫作”頁面。然後，你懂的——以前怎麼幹，現在還怎麼幹，只不過主要的內容文字包括格式，都已經完成了。

好了，看看發表後的成果吧。

未完

沒錯，這個 hack 不完整。歡迎有識之士幫忙完成它，意思就是說，最好能在預覽區和編輯表單並列的情況下，不丟失表單中所有按鈕和欄位的功能。

最後，不知道大胖或溫老師有沒有興趣加一個“全屏寫作”功能按鈕。