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
450
Other Decks in Programming
See All in Programming
TDD 実践ミニトーク
contour_gara
1
260
Laravel Boost 超入門
fire_arlo
2
170
コンテキストエンジニアリング Cursor編
kinopeee
1
730
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
350
A Gopher's Guide to Vibe Coding
danicat
0
200
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
AIエージェント開発、DevOps and LLMOps
ymd65536
1
370
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
620
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
230
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
220
Ruby Parser progress report 2025
yui_knk
1
250
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Optimizing for Happiness
mojombo
379
70k
Rails Girls Zürich Keynote
gr2m
95
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Faster Mobile Websites
deanohume
309
31k
Visualization
eitanlees
147
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
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