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

AlloyEditor - better experience for authoring c...

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.

Iliyan Peychev

November 07, 2014
Tweet

More Decks by Iliyan Peychev

Other Decks in Programming

Transcript

  1. Content is not editable at all Rosetta Stone - the

    bad parts No undo/redo Takes too much time to write anything
  2. But one of the worst their parts is how do

    they deal with contenteditable
  3. 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
  4. AlloyEditor architecture Engine UI core Toolbar Toolbar Toolbar Button Button

    } YUI/AlloyUI Bootstrap 3 + Current UI = Plugins, low level modules CKEditor Core
  5. <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
  6. 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>
  7. 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>
  8. 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>
  9. 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>
  10. 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,
  11. 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
  12. More stuff available! Drag&Drop images from Desktop to the editor

    Placeholder plugin Create your own toolbars!
  13. Roadmap Create UI without framework dependencies ♥ Mobile support ♥

    Implement more buttons ♥ Improve accessibility ♥