TinyMCE is a WYSIWYG HTML editor that can be easily embedded into web pages. It allows editing content directly in the browser and includes features like plugins, themes, and customization options. The document provides instructions on how to initialize TinyMCE, manipulate content programmatically, handle loading and saving, configure options, and create custom plugins.
2. (introduction)
some thoughts about JavaScript
how to use TinyMCE in your web-site
basic usage
manipulating content
customisation
advanced usage
3. (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
4. (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
5. (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)
6. (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
10. (what next)
load and save content
initialisation and configuration
changing themes
toolbar modification
selecting plugins
custom plugin
11. (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”>
13. (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
14. (load and save content 2 HTML)
<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>
15. (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
16. (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[*]"
26. (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