Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

我與編輯器

486 views

Published on

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

Published in: Technology
  • Be the first to comment

我與編輯器

  1. 1. 我與編輯器 PIXNET - Yvonne Yu
  2. 2. 故事發生在 2015 的春天...
  3. 3. 編輯器打一打字會被 footer 遮住... 情境描述
  4. 4. position: absoute 跟 fixed 會造成 layer 浮上來 編輯器的DOM 涵蓋了整個畫⾯面,被 footer/header layer 擋住
  5. 5. WYSIWYG Editor
  6. 6. What You See Is 
 What You Get 所見即所得 市面上通用的兩種 editor Contenteditable
 (Redactor)Iframe
 (TinyMCE)
  7. 7. Contenteditable
  8. 8. Contenteditable ‧ 全域屬性,宣告該 element 是否可被使用者編輯 ‧ Boolean 宣告
 - true/ empty string 表示可編輯
 - false 表示不可編輯 ‧ 假如沒有此屬性,預設是 inherited
 - parent 可被編輯,自己就可被編輯
  9. 9. Contenteditable Editor Pros: 1. light weight 2. easy to configure (JS) 3. 可延續⺫⽬目前⾴頁⾯面上的 CSS style Cons: 1. 無法整⾴頁編輯 
 (header, document, etc) 2. 會被畫⾯面上的 Style 影響
  10. 10. 切回正題
  11. 11. 經過多方嘗試、徬徨、抓蟲... (詳細請洽 git log)
  12. 12. 打字時 Footer 會擋住的解法 ⺫⽬目前 偵測 code block 被擋住就幫使⽤用者把 document 往上捲
  13. 13. Part II 打中文時畫面會跳
  14. 14. 打中⽂文字打到靠近 footer 的時候,因為偵 測錯誤,造成 editor 以為中⽂文已經被遮住 了。所以幫使⽤用者 document 往上捲,⼀一 來⼀一往下,照成跳動。 情境描述
  15. 15. 偵測複合字 229 當使用者正在打複合字(ex: 顯示中文注音時),計算的 getBoundingClientRect().bottom 的數值跟完成打字後不一 樣。造成判斷是否捲動時狀況不一,使得畫面跳動。 解法: 在 keyDown Callback Event 偵測是否在打複 合字
 (event.which = 229)。
 如果是,就不送捲軸檢 查
  16. 16. Part III Toolbar 切換 Minimode 時畫面會跳
  17. 17. 編輯器有做 fixed toolbar. 當 toolbar 變成 fixed 的那瞬間 (minimode),會造成⼀一下⼦子的畫⾯面抖動 情境描述
  18. 18. Position: absolute/fixed vs relative
  19. 19. Position: absolute/fixed vs relative 跳離 page flow 造成跳動
  20. 20. Position: absolute/fixed vs relative 解決篇 position: relative
 (In page flow)
  21. 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. 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. 23. 謝謝收看

×