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 full-size slide

  2. ੄෈๜ᖫᬋ࢏

    View full-size slide

  3. ᨗኌଠඎ

    View full-size slide

  4. Google Inbox

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Facebook Note

    View full-size slide

  8. Dropbox Paper

    View full-size slide


  9. ContentEditable is like JavaScript

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide