簡單介紹 PIXNET 在開發新的編輯器 - Redactor 的時候發生的三大問題跟解法，並初步介紹 contenteditable WYSIWYG editor。

1. 我與編輯器
PIXNET - Yvonne Yu

2. 故事發生在 2015 的春天...

3. 編輯器打一打字會被 footer 遮住...
情境描述

4. position: absoute 跟 fixed 會造成 layer 浮上來
編輯器的DOM 涵蓋了整個畫⾯面，被 footer/header layer 擋住

5. WYSIWYG Editor

6. What You See Is
What You Get
所見即所得
市面上通用的兩種 editor
Contenteditable
(Redactor)Iframe
(TinyMCE)

7. Contenteditable

8. Contenteditable
‧ 全域屬性，宣告該 element 是否可被使用者編輯
‧ Boolean 宣告
- true/ empty string 表示可編輯
- false 表示不可編輯
‧ 假如沒有此屬性，預設是 inherited
- parent 可被編輯，自己就可被編輯

9. Contenteditable Editor
Pros:
1. light weight
2. easy to configure (JS)
3. 可延續⺫⽬目前⾴頁⾯面上的 CSS style
Cons:
1. 無法整⾴頁編輯
(header, document, etc)
2. 會被畫⾯面上的 Style 影響

10. 切回正題

11. 經過多方嘗試、徬徨、抓蟲...
(詳細請洽 git log)

12. 打字時 Footer 會擋住的解法
⺫⽬目前
偵測 code block 被擋住就幫使⽤用者把 document 往上捲

13. Part II
打中文時畫面會跳

14. 打中⽂文字打到靠近 footer 的時候，因為偵
測錯誤，造成 editor 以為中⽂文已經被遮住
了。所以幫使⽤用者 document 往上捲，⼀一
來⼀一往下，照成跳動。
情境描述

15. 偵測複合字 229
當使用者正在打複合字（ex: 顯示中文注音時），計算的
getBoundingClientRect().bottom 的數值跟完成打字後不一
樣。造成判斷是否捲動時狀況不一，使得畫面跳動。
解法：
在 keyDown Callback
Event 偵測是否在打複
合字
（event.which = 229）。
如果是，就不送捲軸檢
查

16. Part III
Toolbar 切換 Minimode
時畫面會跳

17. 編輯器有做 fixed toolbar.
當 toolbar 變成 fixed 的那瞬間
(minimode)，會造成⼀一下⼦子的畫⾯面抖動
情境描述

18. Position: absolute/fixed vs relative

19. Position: absolute/fixed vs relative
跳離 page flow 造成跳動

20. Position: absolute/fixed vs relative
解決篇
position: relative
(In page flow)

21. 附加：為什麼 Contenteditable 那麼多問題？
‧一段顯示上相同的樣式，HTML寫法卻不同。
游標的位置跟使用者複製的情況不同，都會造成不同的結果
範例：hello world
<strong><em>hello world</em></strong>
<em><strong>hello world</strong></em>
<em><strong>hello</strong><strong>world</strong></em>
<em><strong>world</strong></em><strong><em>world</em></strong>
‧每個瀏覽器對於 Contenteditable 支援度不同

22. References
‧contenteditable MDN
‧w3.org: KeyCode Spec
‧Why ContentEditable is Terrible
‧黑暗執行緒 - 中文輸入法的 KeyDown/KeyPress 事件
‧(Re-) Implementing A Syntax-Highlighting Editor in JavaScript
‧Absolute, Relative, Fixed Positioning: How Do They Differ?
‧老人與海 - by Ernest Hemingway

23. 謝謝收看