Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Creating a WYSIWYG editor
with React
@ipeychev
(or lets see how deep the rabbit hole goes)
React
A JavaScript library for building user interfaces
Why React?
Why React?
React allows you to
concentrate on the UI of
your application
Why React?
Instead to focus on
implementation details,
fighting with the DOM
and resolving
performance issues
React in a nutshell
React in a nutshell
Library, not a
framework
Implements one-
way reactive data
flow
Blazingly fast
React in a nutshell
Virtual DOM
JSX
JavaScript syntax
extension (JSX)
React in a nutshell
Native
applications
Isomorphic
applications
Client-side
applications
Creating UI with React
Main UI
Nested
Components
Data flow
Creating a component
Render the component
Update state
But... Isn't that slow?!
Performance
And rendering is fast
Virtual DOM rulez
Performance
Components
Component are state machines
You render initially the components based on the
properties
Components
Then you change their ...
React renders nested components
with deep hierarchy
Without compromising the performance
Components performance
(thanks to...
Components example
} Main
component
with nested
components
Render part
}
Reusable code
1 var HelloWorld = React.createClass({
2 mixins: [MyMixin, YourMixin],
3
4 render: function() {
5 var a = this.getA();
6 v...
A higher-order component is a function that takes
an existing component and returns another
component that wraps it
Higher...
Properties
Unconditionally configure your components
Which will help you to debug and test them
Properties are immutable, they are own...
Properties
Properties
State
State
Change your components based on user actions or
data from server
When the state is updated, the component
re-renders...
Properties vs State
Properties are initialized when components are
created
State is only seen on the inside of components
definitions
Propertie...
Events
Attaching events
<button onClick={this._handleClick} ...
Attach them in DOM 0 way:
Events are not attached to the element itself
React is listening for all events at the top level using a
single event list...
React autobinds the method to its component instance
Events autobinding
There is no need to write .bind(this):
<button onC...
Let's see how deep the rabbit hole goes
AlloyEditor
http://alloyeditor.com
An Open Source
WYSIWYG editor
built with React
AlloyEditor design goals
The developer should
be able to replace the
UI entirely
It should be accessibleź
Toolbars should
appear when needed
and wh...
AlloyEditor architecture
UI core Plugins, low level modules
Engine CKEditor Core
Toolbar Toolbar Toolbar
Button Button } AlloyEditor UI
based on Re...
Code around React
React provides the rendering part only
That is not enough
Core, Attributes and Events
Basic stuff is needed, for example:
OOP
Types validation
Configurations
Custom Events
Instantiating AlloyEditor
Instantiating AlloyEditor
Many editors can be instantiated on one page
1 <script>
2 var editor1 = AlloyEditor.editable('de...
Selections
Selections
Currently there are four types:
Image Text Table Link
Selections
Exposed in AlloyEditor.Selections
You can add your own
Buttons reordering
Buttons reordering
1 <script>
2 AlloyEditor.Selections[2].buttons = ['bold', 'italic', 'underline', 'link', 'twitter'];
3 ...
Buttons reordering
1 <script>
2 AlloyEditor.Selections[2].buttons = ['italic', 'bold', 'underline', 'link', 'twitter'];
3 ...
Buttons reordering
1 <script>
2 _.find(AlloyEditor.Selections, function(selection) {
3 var found = selection.name === 'tex...
Buttons reordering
1 <script>
2 _.find(AlloyEditor.Selections, function(selection) {
3 var found = selection.name === 'tex...
Adding new buttons
A button is just a ReactJS module
1 var ButtonH4 = React.createClass({
2 mixins: [AlloyEditor.ButtonStyle, AlloyEditor.ButtonStateClasses, AlloyEditor.Butto...
Adding a new button
1 <script>
2 _.find(AlloyEditor.Selections, function(selection) {
3 var found = selection.name === 'te...
Skins!
Wait, there is even more!
More stuff available!
Drag&Drop images from Desktop to the editor
Auto link creation
Placeholder plugin
Your own toolbars ...
Roadmap
Roadmap
Mobile support♥
Implement more buttons♥
Improve accessibility♥
Any ideas?
Demo time
Thanks!
Questions?
ipeychev
Creating a WYSIWYG Editor with React
Creating a WYSIWYG Editor with React
Creating a WYSIWYG Editor with React
Upcoming SlideShare
Loading in …5
×

Creating a WYSIWYG Editor with React

12,417 views

Published on

React is an open source library from Facebook for creating user interfaces. Let's see how can we create a WYSIWYG editor using it.

Published in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Creating a WYSIWYG Editor with React

  1. 1. Creating a WYSIWYG editor with React @ipeychev (or lets see how deep the rabbit hole goes)
  2. 2. React A JavaScript library for building user interfaces
  3. 3. Why React?
  4. 4. Why React? React allows you to concentrate on the UI of your application
  5. 5. Why React? Instead to focus on implementation details, fighting with the DOM and resolving performance issues
  6. 6. React in a nutshell
  7. 7. React in a nutshell Library, not a framework Implements one- way reactive data flow Blazingly fast
  8. 8. React in a nutshell Virtual DOM JSX JavaScript syntax extension (JSX)
  9. 9. React in a nutshell Native applications Isomorphic applications Client-side applications
  10. 10. Creating UI with React
  11. 11. Main UI Nested Components Data flow
  12. 12. Creating a component Render the component Update state
  13. 13. But... Isn't that slow?! Performance
  14. 14. And rendering is fast Virtual DOM rulez Performance
  15. 15. Components
  16. 16. Component are state machines You render initially the components based on the properties Components Then you change their state and they will be automatically re-rendered
  17. 17. React renders nested components with deep hierarchy Without compromising the performance Components performance (thanks to the Virtual DOM)
  18. 18. Components example } Main component with nested components Render part }
  19. 19. Reusable code
  20. 20. 1 var HelloWorld = React.createClass({ 2 mixins: [MyMixin, YourMixin], 3 4 render: function() { 5 var a = this.getA(); 6 var b = this.getB(); 7 8 return (a + b); 9 } Mixins
  21. 21. A higher-order component is a function that takes an existing component and returns another component that wraps it Higher-order components
  22. 22. Properties
  23. 23. Unconditionally configure your components Which will help you to debug and test them Properties are immutable, they are owned by the parent element Properties
  24. 24. Properties Properties
  25. 25. State
  26. 26. State Change your components based on user actions or data from server When the state is updated, the component re-renders itself. State should be considered as private data
  27. 27. Properties vs State
  28. 28. Properties are initialized when components are created State is only seen on the inside of components definitions Properties vs State
  29. 29. Events
  30. 30. Attaching events <button onClick={this._handleClick} ... Attach them in DOM 0 way:
  31. 31. Events are not attached to the element itself React is listening for all events at the top level using a single event listener When an event occurs, React dispatches it accordingly Events delegation
  32. 32. React autobinds the method to its component instance Events autobinding There is no need to write .bind(this): <button onClick={this._handleClick .bind(this)}
  33. 33. Let's see how deep the rabbit hole goes
  34. 34. AlloyEditor http://alloyeditor.com
  35. 35. An Open Source WYSIWYG editor built with React
  36. 36. AlloyEditor design goals
  37. 37. The developer should be able to replace the UI entirely It should be accessibleź Toolbars should appear when needed and where needed The UI should be separated from the coreƘ The UI should be easy to be styled AlloyEditor design goals It should work on all browsers
  38. 38. AlloyEditor architecture
  39. 39. UI core Plugins, low level modules Engine CKEditor Core Toolbar Toolbar Toolbar Button Button } AlloyEditor UI based on React + our own code around it AlloyEditor architecture
  40. 40. Code around React React provides the rendering part only That is not enough
  41. 41. Core, Attributes and Events Basic stuff is needed, for example: OOP Types validation Configurations Custom Events
  42. 42. Instantiating AlloyEditor
  43. 43. Instantiating AlloyEditor Many editors can be instantiated on one page 1 <script> 2 var editor1 = AlloyEditor.editable('description'); 3 var editor2 = AlloyEditor.editable('editable'); 4 </script>
  44. 44. Selections
  45. 45. Selections Currently there are four types: Image Text Table Link
  46. 46. Selections Exposed in AlloyEditor.Selections You can add your own
  47. 47. Buttons reordering
  48. 48. Buttons reordering 1 <script> 2 AlloyEditor.Selections[2].buttons = ['bold', 'italic', 'underline', 'link', 'twitter']; 3 </script> AlloyEditor.Selections[2] is the text selection. Instead of hardcoding it, you can also retrieve it by enumerating it inside the array
  49. 49. Buttons reordering 1 <script> 2 AlloyEditor.Selections[2].buttons = ['italic', 'bold', 'underline', 'link', 'twitter']; 3 </script> AlloyEditor.Selections[2] is the text selection. Instead of hardcoding it, you can also retrieve it by enumerating it inside the array
  50. 50. Buttons reordering 1 <script> 2 _.find(AlloyEditor.Selections, function(selection) { 3 var found = selection.name === 'text'; 4 5 if (found) { 6 selection.buttons = ['bold', 'italic', 'underline', 'link', 'twitter']; 7 } 8 9 return found; 10 }); 11 </script>
  51. 51. Buttons reordering 1 <script> 2 _.find(AlloyEditor.Selections, function(selection) { 3 var found = selection.name === 'text'; 4 5 if (found) { 6 selection.buttons = ['italic', 'bold', 'underline', 'link', 'twitter']; 7 } 8 9 return found; 10 }); 11 </script>
  52. 52. Adding new buttons
  53. 53. A button is just a ReactJS module
  54. 54. 1 var ButtonH4 = React.createClass({ 2 mixins: [AlloyEditor.ButtonStyle, AlloyEditor.ButtonStateClasses, AlloyEditor.ButtonActionStyle], 3 4 statics: { 5 key: 'h4' 6 }, 7 8 getDefaultProps: function() { 9 return { 10 style: { 11 element: 'h4' 12 } 13 }; 14 }, 15 16 render: function() { 17 var cssClass = 'alloy-editor-button ' + this.getStateClasses(); 18 19 return ( 20 <button className={cssClass} data-type="button-h4" onClick={this.applyStyle}tabIndex={this.props.tabIndex}> 21 <span className="alloy-editor-icon-h4"></span> 22 </button> 23 ); 24 } 25 }); 26 27 AlloyEditor.Buttons[ButtonH4.key] = AlloyEditor.ButtonH4 = ButtonH4;
  55. 55. Adding a new button 1 <script> 2 _.find(AlloyEditor.Selections, function(selection) { 3 var found = selection.name === 'text'; 4 5 if (found) { 6 selection.buttons = ['h4', 'italic', 'bold', 'underline', 'link']; 7 } 8 9 return found; 10 }); 11 </script>
  56. 56. Skins!
  57. 57. Wait, there is even more!
  58. 58. More stuff available! Drag&Drop images from Desktop to the editor Auto link creation Placeholder plugin Your own toolbars and buttons!
  59. 59. Roadmap
  60. 60. Roadmap Mobile support♥ Implement more buttons♥ Improve accessibility♥ Any ideas?
  61. 61. Demo time
  62. 62. Thanks! Questions? ipeychev

×