Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML5 Editor - LightningTalk at Paris JS
Search
sgruhier
January 25, 2012
Programming
3
100
HTML5 Editor - LightningTalk at Paris JS
How to make a simple HTML editor without TinyMCE
sgruhier
January 25, 2012
Tweet
Share
More Decks by sgruhier
See All by sgruhier
Maptimize - ElasticSearch
sgruhier
2
190
coffeescript.pdf
sgruhier
2
430
Other Decks in Programming
See All in Programming
Site Reliability Engineering for GMO
pyama86
7
980
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
雑に思考を整理する技術と効能
konifar
57
26k
ゆるい個人開発のススメ
kuroppe1819
10
950
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.2k
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
510
"config" ってなんだ? / What is "config"?
okashoi
0
220
Featured
See All Featured
Thoughts on Productivity
jonyablonski
57
3.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
58k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
What's new in Ruby 2.0
geeforr
337
31k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Into the Great Unknown - MozCon
thekraken
10
980
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Side Projects
sachag
451
41k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Unsuck your backbone
ammeep
662
57k
Transcript
Editeur HTML(5) Sébastien Gruhier - xilinus.com 25/01/2012 Wednesday, January 25,
12
Solutions existantes Wednesday, January 25, 12
TinyMCE • 15000 lignes de code (sans les plugins) •
500 KO (200 KO minifié) Wednesday, January 25, 12
TinyMCE Wednesday, January 25, 12
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
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
contentEditable Wednesday, January 25, 12
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
BackboneJS/BrunchWithCoffee • Utilisation du localStorage • Utilisation de keymaster.js pour
⌘+b, ⌘+i, ⌘+u Wednesday, January 25, 12
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