Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's make own Editor like Google Docs

Fred Chien
October 23, 2016

Let's make own Editor like Google Docs

Explain how to make a document editor like Google Docs which has collaboration and various features

Fred Chien

October 23, 2016
Tweet

More Decks by Fred Chien

Other Decks in Technology

Transcript

  1. 很多功能做不到或有問題 • 分頁(Page break) • 表格選取(Table selection) • 游標移動(cursor movement)

    • 多元的項目符號(Item list) • 復原、重做的實現(Undo/Redo) • .. more
  2. Content Difference Comparison 的問題 • 你以為瀏覽器會產生你預期的 HTML 嗎? • 不同瀏覽器之間對

    HTML 的處理不一樣 • 以「行」為單位的比對不足以達成需求 (HTML 根本沒在管換行符號)
  3. Data Structure { childrens: [ { type: 'paragraph' , childrens:

    [ { type: 'inline', style: { color: 'red' }, text: 'Hello' }, { type: 'inline', style: { color: 'blue' }, text: 'Bro' } ] }, { type: 'paragraph' , childrens: [ { type: 'inline', style: { color: 'green' }, text: 'Second paragraph' }, { type: 'inline', style: { color: 'orange' }, text: 'KerKer' } ] } ] }
  4. To HTML <p> <span style="color: red;">Hello</span> <span style="color: blue;" >Bro</span>

    </p> <p> <span style="color: green;">Second paragraph</span> <span style="color: orange;" >KerKer</span> </p>
  5. 自幹 ContentEditable • Rendering (畫面渲染) • Selection & Range (反白、游標和焦點)

    • Line Break(斷行) • Behaviors of Input (各種輸入或按鍵行為) • Input method (輸入法) • Components(各種不同的元件:Image、Table、Item List ...etc) • More...
  6. Selection & Range • Data Structure Management • Cursor placement

    • Selection mechanism (ex, Multi-selection) • Getting node of Data Structure by using (X,Y)
  7. Line Break • Changing size of container effects line break

    • Line break for Chinese Language • Page Break will be based on this • You have implement "line view" for it ah 科科 kerker。棒棒喔!搞什麼鬼!我真的 很討厭你。 Line View 這是一段文字 This is a text 嘿嘿哈哈 Hola Ye
  8. Input • compositionstart, compositionupdate and compositionend events • Make a

    layer which is over content to receive input events 中文輸入法 Focus on it to receive keyboard events Action