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
Cache Me If You Can
ryunen344
2
6.7k
AI Agents: How Do They Work and How to Build Them @ Shift 2025
slobodan
0
120
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
150
VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework
imaizume
0
140
Introducing FrankenPHP gRPC
dunglas
2
960
クラシルを支える技術と組織
rakutek
0
150
Build your own WebP codec in Swift
kishikawakatsumi
2
340
パフォーマンスチューニングで Web 技術を深掘り直す
progfay
17
4.5k
CSC305 Lecture 01
javiergs
PRO
1
370
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
220
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
110
まだ世にないサービスをAIと創る話 〜 失敗から学ぶフルスタック開発への挑戦 〜
katayamatg
0
140
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Building Adaptive Systems
keathley
43
2.8k
Gamification - CAS2011
davidbonilla
81
5.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Producing Creativity
orderedlist
PRO
347
40k
KATA
mclloyd
32
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Automating Front-end Workflow
addyosmani
1371
200k
Optimizing for Happiness
mojombo
379
70k
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