WYSIWYG Editor 斷行問題

Posted by Bruce Tsai

WYSIWYG 為 what you see is what you get 的縮寫，意即所見即所得，通常會在網頁的 Rich Text Editor 看到這個詞。常見的套件有 CKEditor 及 TinyMCE

情境描述

一般在 WYSIWYG Editor 中，按下鍵盤的 enter 鍵會進行換行，但在換行時因編輯器自動產生的行為為增加一個 <p> 標籤，因此會產生不必要的空白間隔，而客戶端則需要沒有空白間隔的換行方式，需在不直接編輯原始碼的情況下找到一個可用的方式。

CKEditor

TinyMCE

解決方案

大部份 WYSIWYG Editor 都有定義鍵盤的快速鍵，大部份會跟一般的文件編輯器（Word / Writer 等) 相似，在一般文書編輯軟體中，enter 代表的新增一個文字斷落，而 shift + enter 則代表加入一個斷行符號，這個原則在 WYSIWYG 中也基本適用。因此如果要有無間隔的斷行，則需使用 shift + enter 加入斷行符號。

CKEditor

TinyMCE