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
新宿ダンジョンを可視化してみた
satoshi7190
3
400
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.3k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
520
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
160
Goのエラースタックトレースの歴史と今後
sonatard
10
1.8k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
690
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
390
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
110
Ruby Pattern Matching
bkuhlmann
0
930
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
GitHub Copilotのススメ
marcy731
1
230
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Product Roadmaps are Hard
iamctodd
45
9.8k
The Mythical Team-Month
searls
217
42k
Being A Developer After 40
akosma
67
580k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Designing for humans not robots
tammielis
247
25k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
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