Lazy Loading TinyMCE Hammer

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.