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

NingJS Lighting Talk

Yan Shi
September 02, 2016

NingJS Lighting Talk

Rich Text Editor

Yan Shi

September 02, 2016
Tweet

More Decks by Yan Shi

Other Decks in Programming

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