Aug 292014
 
Article HTML

The specifications of a web site under development might include a requirement to provide users with a means to enter formatted content, including images, text in different sizes, colors and fonts, etc.

To this purpose WYSIWYG editors (What You See Is What You Get) are best suited to end users, as the result of the changes made by the user is immediately visible while the content in being edited. Among the available WYSIWYG editors, one of the most popular is TinyMCE, used by the most widespread CMS such as WordPress.

But TinyMCE is a standalone package, that can be incorporated easily in other developments. This post explains the steps to add the content editing functionality implemented in TinyMCE to a web application.

Downloading and installing TinyMCE

At the time of writing this post, there are three options for the download of the base package available in the  TinyMCE download page:

  • TinyMCE 4.1.4 – standard version
  • TinyMCE 4.1.4 JQuery package – version to be used with JQuery
  • TinyMCE 4.1.4 development package – version for developers*

To illustrate this post, we proceed to download the standard version. The name of the file downloaded is tinymce_4.1.4.zip, and the size is 319.736 bytes.

The installation is easily done by uncompressing the zip file under the root directory of the web server. This creates a directory “tinymce/js/tinymce” that contains the main library tinymce.min.js, and the subdirectories langs, plugins, themes and skins

Installing translation packages

The default installation only includes the english version of the editor. If we need to provide our users with a localized version, we can go to the TinyMCE translation packages download page, select the desired languages, and download the resulting translation package. The file downloaded is named tinymce_languages.zip. The translations are installed by extracting the files into the tinymce/langs directory.

Test page

To try the functionality of  TinyMCE and the configuration options, create a “tinymce_test.html” page in the root directory of the web server with the following content:

<html>
<head>
<script type="text/javascript" src="/tinymce/js/tinymce/tinymce.min.js"></script>
</head>
<body>
<form method="post" action="somepage">
    <textarea name="content" style="width:100%"></textarea>
</form>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | " +
             "alignleft aligncenter alignright alignjustify | " +
             "bullist numlist outdent indent | link image"
});
</script>

</body>
</html>

Loading the test page in a browser, we should see a textarea with a menu and a toolbar at the top:

basic-tinyMCE-editor

 

With this, the basic editing functionality is in place. To make the example fully functional, we just need to add a submit button to the form, and write the code that processes the form, and performs the desired handling of the content just edited: writing it to a file, storing it in a database, sending it by email,…

To do this, the reader of this post migh find useful other posts in this same blog:

Initializing TinyMCE

As can be seen in the sample HTML code above, the initialization of TinyMCE is made with a call to the function tinymce.init(), with an array of parameters passed as argument. The basic initialization parameters are:

  • selector – Specifies which page elements will be transformed into editing areas.
  • plugins – Is the set of TinyMCE plugins to be loaded to provide the desired functionality
  • toolbar – Is the list of icons to show in the toolbar

Basic functionality

The basic functionality available without loading any plugin allows adding a series of common controls to the toolbar:

  • newdocument – Cleans the editing area, discarding old content
  • bold, italic, underline, strikethrough, subscript, superscript – Modifies the selected text accordingly
  • alignleft, aligncenter, alignright, alignjustify – Modifies the text alignment
  • bullist, numlist – Creates unordered ( HTML <ul> elements) / numerically ordered (HTML <ol> elements) lists
  • styleselect – simple menu to apply a heading style to the selected text
  • formatselect – a more complete menu to apply different inline, block or heading styles to the selected text
  • fontselect, fontsizeselect – apply a font type or font size to the selected text
  • cut, copy, paste – cut, copy or paste text
  • indent, outdent – indent/outdent a paragraph
  • blockquote – wrap the selected text in a <blockquote>…</blockquote> HTML element
  • undo, redo – undo/redo the previous edition
  • removeformat – remove formatting (font type, font size, color,…) previously applied to the selected text

Plugins

TinyMCE comes with a fair number of plugins located in the “plugins” directory. These plugins can be loaded during the initialization to add extra functionality to the editor:

Plugins to improve the insertion and edition of text

  • bbcode – Enables the use of basic BBCode to specify formatting.
  • charmap – Gives access to a character map from the menu or toolbar, to insert special characters
  • colorpicker – Replaces the standard color picker used by other plugins (i.e., textcolor) with an improved color picker.
  • directionality – Adds directionality icons (ltr, rtl) to the toolbar, to better handle languages written from right to left.
  • hr – Add horizontal bar
  • insertdatetime – insert date and time

Plugins to insert and edit links and anchors

  • advlist – Improves the functionality to create unordered and ordered lists implemented in the bullist y numlist controls: Several symbols (disc, circle, square) can be selected for unordered lists, and several numbering options (numbers, letters, roman numbers,…) can be selected for ordered lists (most useful for multi-level lists)
  • anchor – adds an anchor/bookmark button and menu. (It can be used to create a Table Of Contents at the beginning of the page, where each entry points to the corresponding section in the document).
  • autolink – Normalizes behaviour with IE that produces links when you simply type links in the content window
  • link – Add link/unlink controls to the toolbar to insert and remove text and image links

Plugins to improve the insertion and edition of images and multimedia

  • emoticons – Add a menu item/toolbar icon to insert emoticons
  • image – Adds a “Insert Image” button to the toolbar. It can be configured by means of options:
    • image_list
    • image_advtab
    • image_class_list
  • media – To add HTML5 video and audio elements. Options:
    • media_alt_source
    • media_poster
    • media_dimensions
    • media_filter_html

Plugins for developers

  • example – Sample plugin that can be used as a base for the development of a new TinyMCE plugin
  • example_dependency – Sample plugin with that depends on other plugin

Other plugins

  • autoresize – Resizes the size of the editor to adapt to the content. minimum/maximum sizes can be set up with parameters autoresize_min_height and autoresize_max_height
  • autosave – warns on leaving the page if the content of the editor has been modified but has not been saved
  • code – Adds an option to the menu or toolbar to view and edit the  HTML code of the document (toolbar control: code)
  • contextmenu – adds a configurable contextual menu. The items in the contextual menu are specified in a “contextmenu” parameter. Example:
  • contextmenu:"link image inserttable | cell row column deletetable"
  • fullpage – adds fullpage editing support. This enables you to edit whole documents with both head and body
  • fullscreen – Toggle editor to full screen mode
  • importcss – Add CSS rules from the file specified in the “content_css” parameter
  • layer – Add controls for layer management. This only works in some browsers, and might be dropped from future versions of TinyMCE
  • legacyoutput – Generates obsolete HTML elements such as <b>, <i>, etc., that are not part of the XHTML and HTML5 specifications (might be useful to send HTML data by email, or other applications)
  • lists – Increases the compatibility of the list generation functionality (<ul>, <ol>) with some browsers
  • nonbreaking – Adds a button to insert &nbsp; elements
    Options:

    • nonbreaking_force_tab – Añade tres elementos &nbsp; cuando se pulsa el tabulador
  • noneditable
  • pagebreak – Adds a button to insert the HTML code specied in the pagebreak_separator parameter. Example:
    pagebreak_separator:”<!– my page break –>”
    The CMS of the site is expected to recognise this code as a page break, and take it into account to generate the HTML code delivered to users.
  • paste – Paste content copied from word, removing spurious formatting
  • preview – Opens a preview popup
  • print -Adds a “print” button
  • save – Adds buttons “save” and “cancel”. The save button sends the form where the editor is placed to the server. This plugin has three options configurable in the TinyMCE initialization:
    • save_enablewhendirty
    • save_onsavecallback
    • save_oncancelcallback
  • searchreplace – Adds a search and replace dialog
  • spellchecker – Adds a button that runs a spell checker on the content
  • tabfocus – Allows entering and leaving the editor using the tab key
  • table – Adds HTML table editing options
  • template – Adds editor templates
  • textcolor – Allows setting the text color and text background color (toolbar controls: forecolor backcolor)
  • textpattern – matches and replaces special patterns in the text. The patterns are defined in parameter “textpattern_patterns”. The default patterns are the markdown syntax (i.e., replace **text** with bold text)
  • visualblocks – Adds a button and menu entry to make block elements visible
  • visualchars – Make chars such as &nbsp; visible
  • wordcount – Adds a count of words to the footer of the editor window

References

TinyMCE website

 

 Posted by at 3:23 pm

 Leave a Reply

(required)

(required)