NingJS Lighting Talk

Rich Text Editor

Transcript

1. @mockee NingJS 2016.9.3
   

   View Slide

2. ੄෈๜ᖫᬋ࢏
   

   View Slide

3. ᨗኌଠඎ
   

   View Slide

4. Google Inbox
   

   View Slide

5. CKEditor
   Alloy Editor: a modern WYSIWYG editor built on top of CKEDITOR
   

   View Slide

6. View Slide

7. ᨗኌᴅ᧛ – ኪৼԡഭᇇᔮᕹ
   

   View Slide

8. Medium
   

   View Slide

9. Facebook Note
   

   View Slide

10. Dropbox Paper
    

    View Slide

11. 
    ...
    

    View Slide

12. 
    ContentEditable is like JavaScript
    

    View Slide

13. • ContentEditable: The Good, the Bad and the Ugly
    • Fixing ContentEditable
    • The Road to HTML 5: contentEditable
    

    View Slide

14. ᳯ᷌
    • DOM === ᇫா
    • DOM ᤒሿӧӞᛘ
    Chrome Firefox / Safari
    

    View Slide

15. • ݢᦢᳯ௔অ҅ၨᥦ࢏ฦ᭭ඪ೮
    • ܻኞ cursor Ө selection
    • ܻኞ input ԪկҁᲫፏԪկ̵ᬌفဩ҂
    • ੄෈๜ۑᚆҁےᔋ̵ൊࢶᒵ҂
    • ᖫᬋ܄ṛଶ໑ഝٖ਻ᳩଶᛔᭇଫ
    սᅩ
    

    View Slide

16. දᬰ
    • ളᓕ DOM ጱڠୌ
    • ᭗ᬦ selection API ളᓕ cursor
    • ֵአ Model ๶ਧԎ޾ᓕቘ੄෈๜ٖ਻
    Draft.js Slate
    

    View Slide

17. View Slide

18. View Slide

19. View Slide