現代瀏覽器的拼字處理 - HackMD @ COSCUP 2017

--- title: 現代瀏覽器的拼字處理 - HackMD @ COSCUP 2017 lang: zh-tw disqus: hackmd slideOptions: transition: fade theme: white --- <style> .reveal { font-size: 38px !important; } .reveal, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, PingFangTC-Light, "Microsoft JhengHei", "微軟正黑", sans-serif, "Apple Color Emoji" } </style> # 現代瀏覽器的拼字處理 Max Wu @ COSCUP 2017 ---- <img src="https://i.imgur.com/PTbB46S.jpg" style="width:300px;height:300px;border-radius:50%"/> ## Max Wu #### HackMD Lead ### 我喜歡好的產品，也開發好的產品； 我寫的不是程式，是理想。 --- # HackMD #### 您使用 Markdown 寫作與分享知識的最佳方式 ---- # Hack ## = # 用聰明的方法做事 ---- # MD ## = # Markdown ---- # Markdown # 輕量的視覺化標記語言 # 「wat？」 ---- # 文字就可以排版的語法感謝 @clkao 貢獻此麻瓜咒語 ---- # 誰在用 Markdown？ - GitHub - Stack Overflow - Reddit - Bitbucket - GitLab - etc... ---- # HackMD 用途 - 製作筆記 - 撰寫文件 - 快速簡報 - 還有很多意想不到的用法... ---- # 功能 - 自動上傳圖片 - 支援嵌入影片 - 支援數學公式 - 支援各式圖表 - 自動修訂紀錄 - 自動作者標記 ---- # 採用 - PyCon TW 2016 - g0v - CTF write-ups - Debater - jserv 系列課程 - MOPCON 2016 - SITCON 2017 - LaravelConf Taiwan 2017 :star2: COSCUP 2017 非官方共筆 :star2: --- # 文字編輯器 Text Editor ---- 沒錯，就是這個 ![](https://i.imgur.com/heknnK4.png) ---- # How? ![](https://i.imgur.com/kSR9BrI.png) 如何做？從 HTML 基礎開始！ ---- # Input tag - 用於輸入欄位資訊 - 可以選擇欄位類別 - type = text/number/password... ---- # Textarea tag - 用於輸入文字資訊 - 可以限制文字長度、行數 - 可以做拼字校正等額外屬性 ---- ## Contenteditable attribute - HTML5 標準 - 直接讓元素內容可以編輯 - div, span, p 等大部分 tag 均適用 - 對 IME 的支援度高 (中文也沒問題) - 事件行為與 input tag 相同 (應該) - 未來的趨勢 :rocket: ---- ## 但是以上仍不夠滿足編輯器的需求 - 顯示行號 - 自動換行 - 自動完成 - 自訂主題 - 自訂游標 - 需求很多 :astonished: - 時間很少 :clock10: ---- # 看看別人怎麼做？ ---- ## 主流的開源文字編輯器 - CodeMirror - Ace ---- # CodeMirror - 支援程式碼語法標色 - 支援各式快速鍵 - 支援手機瀏覽器 :100: ---- # CodeMirror 實作方法輸入的時候有一個隱藏的 textarea 去接輸入事件 (最近加入 div + contenteditable 的輸入選項，仍在開發中) :anguished: 其餘功能用 div 自幹 :anguished: 連游標也是~~假的~~仿造的！ ---- # 好像很硬派 # 但是 # 編輯器都是這樣做成的 VSCode 曾經因為游標閃爍太吃效能被開 Issue --- # 即時協作 ## Realtime Collaboration ---- ## 將使用者輸入的內容即時的 ## 同步到其他使用者的編輯器中 ---- ## 就把鍵盤事件傳出去吧！ - keypress - keydown - keyup 以上事件裡面有 keyCode 等資訊 ---- # 一切都看起來很好！ :+1: 好棒棒 :+1: ---- # 直到 CJK 發起挑戰！ ~~直到膝蓋中了一箭~~ ---- # CJK ## 中文、日文、韓文 ---- # 西文只需要拼字 Spell 用字母拼成單字 h + e + l + l + o = hello ---- # CJK 還需要組字 Composition 用文字組成文字ㄋ + 一 + ˇ = 你 ---- # 輸入法編輯器 ## Input Method Editor (IME) - 用來輸入需要組字的語言 - 但是瀏覽器不認識它 :cry: ---- ## 組字的問題 - 按鍵不會觸發 keypress 事件 - 按鍵 keydown 事件 keyCode 都是 229 (Process) - 按鍵 keyup 事件是正常的 :ok: - 組字事件觸發時取得元素的值會是組字的前一狀態 ---- # 別擔心 # CompositionEvent # 來拯救了！ --- # 組字事件 # CompositionEvent https://codepen.io/jackycute/pen/EvNmWv 先自己玩玩看 ---- # CompositionEvent - compositionstart: 進入組字模式 - compositionupdate: 組字內容更動 (有新內容、選字等) - compositionend: 脫離組字模式，有字要從出來了！ ---- ## CompositionEvent.data - compositionstart: 即將要被組字模式替換的文字 - compositionupdate: 正在組字的文字 - compositionend: 即將產生的文字 ---- ## 與 Key Events 放在一起看假設今天要取代ㄏ輸入ㄇ 1. keydown: Process (229) 2. compositionstart: ㄏ 3. compositionupdate: ㄇ 4. keyup: a (因為ㄏ的按鍵就是 a) 5. compositionend: ㄇ ---- ## 加上 Input & Change Event 假設今天要取代ㄏ輸入ㄇ 1. keydown: Process (229) 2. compositionstart: ㄏ 3. compositionupdate: ㄇ 4. input: ㄇ (value) 4. keyup: a (因為ㄏ的按鍵就是 a) 5. compositionend: ㄇ 6. change: ㄇ (value) ---- ## 問：所以到底該怎麼做？ ---- ## 答：請把組字事件也傳出去！ ~~把愛傳出去~~ ---- ## 所以在使用 HackMD 的時候 ## 其他人也看的到組字過程目前可以完美的支援所有需組字的語言 :heart: --- # IME 組字的視覺提示 - 正在組字的部分會有++底線++ - 組字的時候可以移動游標到想要選字的部分 | - 但是每個 IME 行為可能不同 :boom: - 交給原生的輸入框比較合適 :o: --- ## 組字事件在手機上的行為 - 16 Mar 2015 開的 Issue https://github.com/codemirror/CodeMirror/issues/3137 - 如果有使用 JS 與 editable DOM 互動，組字事件很有可能不會按照順序觸發 (也可能只是 bug) --- ## CodeMirror 已知輸入相關問題 - 組字的時候無法移動游標 (因為不是原生游標) - 手機上無法長按直接叫出 context menu - 無法使用原生的拼字檢查 (spellcheck) --- # Q&A 沒問題可以玩剛剛的玩具 https://codepen.io/jackycute/pen/EvNmWv --- # 謝謝您的聆聽與指教！這份簡報使用 HackMD 製作 https://hackmd.io/p/HkwdlfewW ---- # 參考資料 - http://blog.zhusee.in/post/146553/enhance-ime-support-of-codemirror-with-composition-events - https://kuro.tw/posts/2016/10/11/%E7%AD%86%E8%A8%98-%E9%80%8F%E9%81%8E-Composition-Events-%E5%A2%9E%E5%BC%B7%E9%9D%9E%E6%8B%89%E4%B8%81%E8%AA%9E%E7%B3%BB%E8%BC%B8%E5%85%A5%E6%B3%95%E5%B0%8D%E8%BC%B8%E5%85%A5%E6%A1%86%E7%9A%84%E6%94%AF%E6%8F%B4/ - http://blog.darkthread.net/post-2011-04-26-keypress-event-under-ime.aspx - https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.