1-0

Twincl編輯器:一個雲端Markdown/所見即所得雙模編輯器

Markdown(一種描述文件樣式的語法)編輯器近年來頗受歡迎。許多國外知名網站如RedditGitHubStack Overflow,都採用Markdown作為文章編輯的語法。

Markdown編輯器有許多優點,例如相較於HTML語法,Markdown語法更簡潔;一旦熟悉Markdown語法,用它來寫長篇幅文章很有效率;開發人員也因為Markdown編輯器實做起來容易,而喜歡採用它。然而Markdown編輯器有兩個主要缺點

  1. 對一般網路使用而言,Markdown語法的學習曲線較陡峭。
  2. 預覽與編輯分開的雙視窗Markdown編輯介面,顯得不夠直覺好用。

Twincl網站所採用的Twincl編輯器,結合Markdown語法的優點與「所見即所得(What you see is what you get)」網頁編輯器的易用性,以解決上述問題。

[2016/10/15更新] 編輯器新增功能:文字顏色、底線、刪除線、水平分隔線

Twincl編輯器特點

  • 所見即所得編輯(網頁模式)
  • Markdown編輯(文字模式)
  • 針對部份段落或整篇文章,在兩個模式間無縫切換
  • 兩個模式中,皆可使用快速鍵(在Mac電腦用,在Windows電腦用Alt)設定文字樣式、插入超連結及切換編輯模式等
  • Markdown編輯不需用到雙視窗
  • 遵循CommonMark標準
  • 提供有意學習Markdown的使用者一個平順漸進的學習過程

現場展示(Live demo)

按文章右上方的✎ 編輯按鈕,即可實際操作使用Twincl編輯器。(注意:此按鈕為展示用,若你嘗試送出文章變更,會被拒絕。)

按功能列的›文字模式按鈕或對應的快速鍵(+EAlt+E)可切換至Markdown文字編輯模式,再按功能列的網頁模式‹按鈕或同一快速鍵,則可切換回「所見即所得」網頁編輯模式。這也是這個編輯器最有趣的部份。

功能列按鈕由左至右依序為:

  • 超連結、粗體、斜體、標題(小標題→大標題→內文)、引言、有編號項目、無編號項目、編輯模式切換、更多按鈕
  • 更多按鈕:文字顏色、水平分隔線、底線、刪除線、圖片網址、Twinclet插件

下圖是編輯本篇文章時,將某一段落切換至Markdown文字編輯模式的螢幕截圖:

在雲端使用Twincl編輯器

Twincl網站的編輯器可直接當作「雲端Markdown編輯器」使用。登入網站後,從右上角的下拉式選單選取「≻ 記事本」選項,可以在雲端撰寫/儲存個人文件,從不同的電腦、手機皆可登入使用。

結語

Twincl編輯器的「所見即所得」網頁編輯模式,提供文章作者常用的編輯功能;熟悉Markdown語法的使用者,則可利用Markdown文字模式迅速編修文件。這兩個編輯模式彼此互補,使兩者優點皆得以充份發揮。

你喜歡這個雙模編輯器的創新構想嗎?有任何想法,歡迎告訴我們!

6筆討論 回應文章
Joshua Shih5年(更新)

Twincl雖然仍有不少有待加強的地方,但比起其他平臺 (Blogspot, wordpress),twincl 的確好用很多。

謝謝!我們會持續改進網站功能,讓它越來越好用。

快速格式的選單看看能否增加文字顏色的選項?

改好了,請再試試看。(還順便加了底線、刪除線、水平分隔線等功能。)

還有一個問題想請問, "短文" 和 "部落格文章" 的主要差異是甚麼呢?短文有限制多少字數以下嗎? 

這兩者目前屬於作者主觀認定,便於作者/讀者區分文章性質,除此之外並無實質差異。