AlloyEditor - better experience for authoring content in the Web

The talk describes the design goals and the architecture of the editor and some details about how to use and modify it.

Transcript

1. AlloyEditor Better experience for authoring content Iliyan Peychev
2. Writing content in the past
3. Rosetta Stone Year 196 BC
4. Ancient Egyptian hieroglyphs Demotic script Ancient Greek
5. Rosetta Stone - the good parts Internationalization Accessibility Content saved forever (almost)
6. Content is not editable at all Rosetta Stone - the bad parts No undo/redo Takes too much time to write anything
7. Painful and exhausting experience
9. Fast forward about 2000 years (aka in the present)
11. Browsers are everywhere and they get better and better
12. But one of the worst their parts is how do they deal with contenteditable
13. Two ways of editing content nowadays Using iFrame Inline editing
14. What is the issue here?
15. The UI which does not depend on the context Same big toolbar
16. AlloyEditor http://alloyeditor.com
18. AlloyEditor design goals
19. AlloyEditor design goals It should work on all browsers 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
20. AlloyEditor architecture
21. AlloyEditor architecture Engine UI core Toolbar Toolbar Toolbar Button Button } YUI/AlloyUI Bootstrap 3 + Current UI = Plugins, low level modules CKEditor Core
22.  1PFGOCPF (it depends) Loading UI  #VQPEG
23. Instantiating AlloyEditor
24. <script> YUI().use('alloy-editor', function(Y) { var editor = new Y.AlloyEditor({ srcNode: '#editable' }); var editor2 = new Y.AlloyEditor({ srcNode: '#headline' }); }); </script> Instantiate AlloyEditor More than one editor can be instantiated on the page
25. Configuring AlloyEditor toolbars
26. Toolbar config as an array of buttons 1 <script> 2 YUI().use('alloy-editor', function(Y) { 3 var editor = new Y.AlloyEditor({ 4 srcNode: '#editable', 5 toolbars: { 6 add: ['image', 'code'], 7 image: ['left', 'right'], 8 styles: ['strong', 'em', 'u', 'h1'] 9 } 10 }); 11 }); 12 </script>
27. Toolbar config as an object 1 <script> 2 YUI().use('alloy-editor', function(Y) { 3 var editor = new Y.AlloyEditor({ 4 srcNode: '#editable', 5 toolbars: { 6 styles: { 7 buttons: ['strong', 'em'], 8 id: 'exampleId' 9 } 10 } 11 }); 12 }); 13 </script>
28. Buttons reordering
29. Buttons reordering 1 <script> 2 YUI().use('alloy-editor', function(Y) { 3 var editor = new Y.AlloyEditor({ 4 srcNode: '#editable', 5 toolbars: { 6 add: ['image', 'code'], 7 image: ['left', 'right'], 8 styles: ['strong', 'em', 'u', 'h1'] 9 } 10 }); 11 }); 12 </script>
30. Buttons reordering 1 <script> 2 YUI().use('alloy-editor', function(Y) { 3 var editor = new Y.AlloyEditor({ 4 srcNode: '#editable', 5 toolbars: { 6 add: ['image', 'code'], 7 image: ['left', 'right'], 8 styles: ['em', ‘strong', 'u', ‘h1’] 9 } 10 }); 11 }); 12 </script>
31. Adding new buttons
32. Adding new button 1 YUI.add('button-h3', function(Y) { 2 var Lang = Y.Lang; 3 4 var H3 = Y.Base.create('h3', Y.Plugin.Base, [Y.ButtonBase], { 5 6 TPL_CONTENT: '<i class="alloy-editor-icon-h3"></i>' 7 8 }, { 9 NAME: 'h3', 10 NS: 'h3', 11 ATTRS: { 12 element: { 13 validator: Lang.isString, 14 value: 'h3' 15 } 16 } 17 }); 18 19 Y.ButtonH3 = H3; 20 21 }, '', { 22 requires: ['button-base'] 23 }); A button is a regular YUI/AlloyUI module! and to provide the style element! to provide content template For simple style buttons, you basically have to augment Y.ButtonBase,
33. Adding more advanced button 1 YUI.add('button-a', function(Y) { 2 var Lang = Y.Lang, 3 A = Y.Base.create('a', Y.Plugin.Base, [Y.ButtonBase], { 4 5 _onClick: function(event) { 6 // your code here 7 } 8 9 }, { 10 NAME: 'a', 11 NS: 'a', 12 ATTRS: { 13 element: { 14 validator: Lang.isString, 15 value: 'a' 16 } 17 } 18 }); 19 20 Y.ButtonA = A; 21 }, '', { 22 requires: ['button-base', 'event-valuechange', 'node-focusmanager'] 23 }); Just overwrite _onClick method
34. Skins!
35. .QQMOC +ņORTGVV[
36. Three skins for now Ocean Dark White
37. Wait, there is even more!
38. More stuff available! Drag&Drop images from Desktop to the editor Placeholder plugin Create your own toolbars!
39. Roadmap
40. Roadmap Create UI without framework dependencies ♥ Mobile support ♥ Implement more buttons ♥ Improve accessibility ♥
41. Demo time
42. Thanks! Questions? ipeychev jbalsas