HTML5 Editor - LightningTalk at Paris JS

How to make a simple HTML editor without TinyMCE

Transcript

1. Editeur HTML(5) Sébastien Gruhier - xilinus.com 25/01/2012 Wednesday, January 25, 12
2. Solutions existantes Wednesday, January 25, 12
3. TinyMCE • 15000 lignes de code (sans les plugins) • 500 KO (200 KO minifié) Wednesday, January 25, 12
4. TinyMCE Wednesday, January 25, 12
5. TinyMCE $().ready(function() { $('textarea.tinymce').tinymce({ // Location of TinyMCE script script_url : '../jscripts/tiny_mce/tiny_mce.js', // General options theme : "advanced", plugins : "", // Theme options theme_advanced_buttons1 : "bold,italic,underline", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_buttons4 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "", theme_advanced_resizing : false, content_css : "css/content.css" }); }); Wednesday, January 25, 12
6. HTML(5) • contenteditable • Ajouté par microsoft en 2000 dans IE 5.5 !! • Firefox 3, Safari 3, Opera 9, Google Chrome • execCommand • http://www.quirksmode.org/dom/execCommand.html • http://www.quirksmode.org/dom/execCommand/ Wednesday, January 25, 12
7. contentEditable Wednesday, January 25, 12
8. contenteditable <!doctype html> <html> <head> " <title>Demo contenteditable</title>" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <style> #edit { width: 500px; height: 300px; border: 1px solid #DDD; outline:none; padding: 5px; } </style> </head> <body> <div id="edit" contenteditable></div> <div id="controls"> <input type="button" value="B" id="b"/> <input type="button" value="U" id="u"/> <input type="button" value="I" id="i"/> </div> <script> $('#b').click(function(event) { document.execCommand('bold', false, ''); return false; }); $('#i').click(function(event) { document.execCommand('italic', false, ''); return false; }); $('#u').click(function(event) { document.execCommand('underline', false, ''); return false; }); </script> </body> </html> http://xilinus.com//demos/contenteditable.html Wednesday, January 25, 12
9. BackboneJS/BrunchWithCoffee • Utilisation du localStorage • Utilisation de keymaster.js pour ⌘+b, ⌘+i, ⌘+u Wednesday, January 25, 12
10. http://xilinus.com/demos/contenteditable_bwc/ editorTemplate = require('templates/editor') class exports.EditorView extends Backbone.View tagName: "div" className: "editor" events: 'click .control_B': 'bold' 'click .control_I': 'italic' 'click .control_U': 'underline' 'click .save' : 'save' initialize: ()-> key('⌘+b, ctrl+b', @bold) key('⌘+i, ctrl+i', @italic) key('⌘+u, ctrl+u', @underline) $(@el).delegate('.message', 'keyup', @save) bold: () -> document.execCommand('bold', false, '') false italic: () -> document.execCommand('italic', false, '') false underline: () -> document.execCommand('underline', false, '') false save: (event) => @model.set(text: @$(".message").html()).save() render: () -> $(@el).html editorTemplate() @$(".message").html(@model.get('text')) @$(".message").attr('contenteditable', true) @ Wednesday, January 25, 12