My personal preference is for no Javascript to be included in the HTML. I prefer a behavioural seperation of Javascript from the markup. I also like lazy loading larger javascript libraries and to not include them on every page.
init_tinymce_hammer_if_required
only inserts the script tags when an editor is required by it dumps
Javascript into your page in a second pair of script tags.
Loading TinyMCE Hammer from Javascript
In the
previous tutorial
we loaded the tinymce_hammer combined Javascript file using the named route
tinymce_hammer_js
and plain-old script tags. In this tutorial we will use
lazyload.js
to load and initialize a TinyMCE editor.
Lazy Load
is an excellect cross-browser Javascript library that makes it easy to
include external Javascript files after page load.
<html>
<head>
<title>Lazy Load Example</title>
<%= javascript_include_tag('lazyload') %>
<%= javascript_include_tag('behaviours') %>
</head>
...
LazyLoad.loadOnce('/javascripts/tinymce_hammer.js', function() {
tinyMCE.init({
mode : 'exact',
elements : 'blog_post_body,blog_commentbody',
plugins : 'safari,table,paste,paste2',
paste_convert_headers_to_strong : true,
paste_convert_middot_lists : true,
paste_remove_spans : true,
paste_remove_styles : true,
paste_strip_class_attributes : true,
theme : 'advanced',
theme_advanced_toolbar_align : 'left',
theme_advanced_toolbar_location : 'top',
theme_advanced_buttons1 : 'undo,redo,cut,copy,paste,pastetext,|,bold,italic,strikethrough,blockquote,charmap,bullist,numlist,removeformat,|,link,unlink,image,|,cleanup,code',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : ''
});
});
This is a very simple example. Normally you would not lazy load the combined file every request. You would test the page for the presence of a textarea tag that needs to be a rich text editor. If found then you would lazy load TinyMCE and initialize it.