TinyMCE: WYSIWYG editor 2010-12-08

geekscape 1,582 views 31 slides Dec 08, 2010
Slide 1
Slide 1 of 31
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31

About This Presentation

Presented at the first Melbourne JavaScript meet-up (#melbjs). Tutorial on using TinyMCE. Starting with basic usage and finishing with a custom button and plugin.

Size: 10.91 MB
Language: en
Added: Dec 08, 2010
Slides: 31 pages

Slide Content

TinyMCE: WYSIWYG editor [email protected] / @geekscape
First Melbourne JavaScript meet-up #melbjs
2010-12-08

(introduction) some thoughts about JavaScript
how to use TinyMCE in your web-site
basic usage
manipulating content
customisation
advanced usage

(javascript perspective) then ... 4th December 1995: 15 years ago ...
Netscape Navigator (browser) 2.0 beta 3
Mocha -> LiveScript -> JavaScript
Java Applets (based on JDK 1.0)
now ... 2010 ...
renewed competition between browser vendors
better JavaScript engines
gradual emergence of HTML5
browser language built-in versus plug-in
developer tools ... compare with Flash

(the good, the bad and the ugly) JavaScript has ...
good features ...
rapid prototyping
first class functions (use them like an object)
JSON for succinct data representation
many poor features ...
heavy reliance on global variables (no linker)
highly recommended reading ... Douglas Crockford’s
“JavaScript: The Good Parts”
http://javascript.crockford.com

(javascript cool stuff) Too much to mention, but check-out ...
raphaeljs.com (svg, vector graphics
thejit.org aka InfoVIS (data visualisation)
chromeexperiments.com (demos)
canvasdemos.com (demos)
jquery mobile (mobile phone cross-platform)
processingjs.org (easy to use language)
code.google.com/closure (library, templates, ...)
NodeJS, CommonJS, Narwhal, Persevere (server side)

(about TinyMCE) web-based editor, easy to embed your web pages
created by MoxieCode, couple of guys in Sweden
used by: Wordpress, Facebook, Joomla, Umbraco (CMS),
SquareSpace (CMS), Apple, SAP, Oracle, Microsoft, over
130 others listed on MoxieCode TinyMCE wiki
few lines of code to integrate
use AJAX to load and save content
numerous plugins
customisable: themes, plugins, valid content elements
internationalisation support
currently version 3.3.9.2, planning for 4.x

(simple example) TinyMCE web-site: Documentation, examples, tutorials
download from ...
http://tinymce.moxiecode.com
http://tinymce.ephox.com (community or enterprise)
unpack tinymce_3_3_9_2.zip
create HTML page
<script> tinymce/jscripts/tiny_mce/tiny_mce.js
<script> tinyMCE.init({ CONFIGURATION });
<textarea id="ed1" name="ed1”> Editor content

(simple example result)

(simple example HTML) <html>
<head>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js">
</script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
</head>
<body>
<h3>Simple example</h3>
<!-- Gets replaced with TinyMCE -->
<textarea id="ed1" name="ed1" rows="8" cols="80" style="width: 80%">
Some content inside the &lt;strong&gt;TinyMCE editor&lt;/strong&gt;.
</textarea>
</body>
</html>

(what next) load and save content
initialisation and configuration
changing themes
toolbar modification
selecting plugins
custom plugin

(load and save content) simple HTML / HTTP approach ...
loading editor content from server
dynamically fill-in <textarea>
saving editor content to the server
wrap <textarea> with a <form>
provide <input type=”submit”>

(load and save content HTML) <html>
<head>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js">
</script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
</head>
<body>
<h3>Saving content</h3>
<form method="post" action=" http://localhost/~andyg/php/examine_request.php ">
<textarea id="ed1" name="ed1" rows="8" cols="80" style="width: 80%">
Some content inside the &lt;strong&gt;TinyMCE editor&lt;/strong&gt;.
</textarea>
<br />
<input type="submit" name="save" value="Submit" />
</form>
</body>
</html>

(load and save content 2) using TinyMCE functions ...
var editor = tinyMCE.get(TAG_ID);
var content = editor.getContent();
var content = editor.selection.getContent();
editor.setContent(content);
tinyMCE.execCommand('mceInsertContent', false,
content);
use AJAX to asynchronously push and pull content
from the server

<input type="button" value="Get Content"
onclick="get_content();" />
<input type="button" value="Set Content"
onclick="set_content('Some new content');" />
<script>
function get_content() {
var editor = tinyMCE.get("ed1");
var content = editor.getContent();
console.log("get_content(): " + content);
}
function set_content(content) {
var editor = tinyMCE.get("ed1");
editor.setContent(content);
}
</script>(load and save content 2 HTML)

(initialisation) option 1: simple ...
tinyMCE.init({ CONFIGURATION });
option 2: more specific control ...
tinyMCE.settings = CONFIGURATION;
tinyMCE.execCommand('mceAddControl', true, TAG_ID);
TinyMCE editor instance is ready for use, e.g
tinyMCE.get(TAG_ID), once the document is loaded

(configuration 1) lots of options !
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration
mode: what HTML elements are replaced by TinyMCE
none, exact, textareas, specific_textareas
elements: tag ids replaced when mode=exact
theme: simple, advanced
skin: SKIN_NAME
plugins: PLUGIN_NAME1, PLUGIN_NAME2, ..
extended_valid_elements: "custom_tag[*]"

(configuration 2) content_css: "content.css"
editor_css: "editor.css"
theme_advanced_blockformats: FONT_STYLES
theme_advanced_fonts: FONT_FACES
theme_advanced_font_sizes: FONT_SIZES
font_size_style_values: FONT_SIZES

(toolbars) theme_advanced_toolbar_location: "top"
theme_advanced_toolbar_align: "left"
theme_advanced_statusbar_location: "bottom"
theme_advanced_buttons1: BUTTON_NAME1, BUTTON_NAME2, ..
newdocument,save,print,undo,redo,cut,copy,paste,repl
ace,fullscreen,link,unlink,advhr,charmap,anchor,unli
nk,image,media,help
forecolor,backcolor,bold,italic,underline,strikethro
ugh,removeformat,indent,outdent,numlist,bullist
justifyleft,justifyright,justifycenter,sup,sub,fonts
elect,formatselect,fontsizeselect,table,delete_table
,delete_row,row_props,delete_col

<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements: "ed1",
theme: "advanced",
skin : "o2k7",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_buttons1:
"newdocument,save,print,undo,redo,separator,cut,copy,paste,separator,replace,separ
ator,fullscreen,separator,link,unlink,advhr,charmap,anchor,unlink,image,media,sepa
rator,help",
theme_advanced_buttons2:
"forecolor,backcolor,separator,bold,italic,underline,strikethrough,removeformat,se
parator,indent,outdent,separator,numlist,bullist",
theme_advanced_buttons3:
"justifyleft,justifyright,justifycenter,separator,sup,sub,separator,fontselect,for
matselect,fontsizeselect,separator,table,delete_table,delete_row,row_props,delete_
col"
});
</script>(toolbar HTML)

(toolbar result)

(using plugins) lots of plugins bundles and third-party ...
http://tinymce.moxiecode.com/plugins.php
bundled ...
http://wiki.moxiecode.com/index.php/TinyMCE:Plugins
enable functionality accessible from toolbars
replace and improve core functionality
enabled new functionality

<script type="text/javascript">
tinyMCE.init({
........
plugins:
"fullpage,fullscreen,inlinepopups,insertdatetime,media,paste,print,searchreplace,s
ave,table,visualchars,advhr,advimage,advlink,advlist,contextmenu"
});
</script>(using plugins HTML)

(using plugins result)

(custom button HTML) tinyMCE.init({
mode: "textareas",
theme: "advanced",
theme_advanced_buttons1 : "test,separator, ...",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
setup : function(editor) {
editor.addButton('test', {
title : 'Test',
image : 'button.gif',
onclick : function() {
editor.focus();
editor.selection.setContent('<strong>Boo ! </strong>');
}
});
}
});

(custom button result)

(custom plugin) place plugin code into the plugins directory ...
tinymce/jscripts/tiny_mce/plugins/rot13/
JavaScript code file: editor_plugin.js
resources in same directory: images/rot13.png

(
function() {
tinymce.create('tinymce.plugins.Rot13Plugin', {
getInfo : function() {
return { longname : 'Rot13 translator', };
},
init : function(editor, url) {
editor.addCommand(
'mceRot13',
function(ui, v) {
editor.selection.setContent(
rot13replace(editor.selection.getContent({format: 'text'}))
); } );
editor.addButton(
'rot13', {
title : 'Translate using Rot13',
image : url + '/images/rot13.png',
cmd : 'mceRot13'
} ); }, });
tinymce.PluginManager.add('rot13', tinymce.plugins.Rot13Plugin);
}
)();(custom plugin code 1)

function rot13replace(text) {
if (! rot13map) rot13map = rot13setup();
rot13text = "";
for (index = 0; index < text.length; index++) {
var ch = text.charAt(index);
rot13text += (ch >= 'A' && ch <= 'Z' || ch >= 'a' && ch <= 'z' ?
rot13map[ch] : ch);
}
return(rot13text);
}(custom plugin code 2)

(custom plugin HTML) tinyMCE.init({
mode: "textareas",
theme: "advanced",
theme_advanced_buttons1 : "rot13,separator, ...",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
plugins: “rot13”
});

(custom plugin result)

(fin) questions ? thoughts ?
http://javascript.crockford.com
http://tinymce.moxiecode.com
http://tinymce.ephox.com
@geekscape - [email protected] - http://geekscape.org
Tags
editor tinymce javascript tutorial
Categories
Education
Download
Download Slideshow Get the original presentation file
Quick Actions
Statistics
  • Views 1,582
  • Slides 31
  • Age 5473 days
Related Slideshows
TLE-9-Prepare-Salad-and-Dressing.pptxkkk 11
TLE-9-Prepare-Salad-and-Dressing.pptxkkk
MaAngelicaCanceran
32 views
LESSON 1 ABOUT MEDIA AND INFORMATION.pptx 12
LESSON 1 ABOUT MEDIA AND INFORMATION.pptx
JojitGueta
25 views
GRADE-8-AQUACULTURE-WEEKQ1.pdfdfawgwyrsewru 60
GRADE-8-AQUACULTURE-WEEKQ1.pdfdfawgwyrsewru
MaAngelicaCanceran
41 views
Feelings PP Game FOR CHILDREN IN ELEMENTARY SCHOOL.pptx 26
Feelings PP Game FOR CHILDREN IN ELEMENTARY SCHOOL.pptx
KaistaGlow
40 views
Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx 54
Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx
acecamero20
24 views
Jeopardy_Figures_of_Speech.pptxvdsvdsvsdvsd 7
Jeopardy_Figures_of_Speech.pptxvdsvdsvsdvsd
acecamero20
25 views
View More in This Category