Günter Schenk :: Tutorials Corner
Adobe Dreamweaver Developer Toolbox

       

Dynamic Forms: Integrating TinyMCE

Author: Günter Schenk, Added: 07.01.2008, Updated: 07.01.2008

Table Of Contents

Title	Version
Introduction	25.01.2009
The Setup	n/a
Testing the result	n/a

1. Introduction

1.1. What is TinyMCE ?

"TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems."

TinyMCE is one of the "major players" in the WYSIWYG editor fields and provides a huge array of configuration options as well as "themes" and plugins, and the abovementioned quote from the Moxiecode Systems AB website isn´t overstated at all :: as this tutorial demonstrates, it´s indeed extremely easy to integrate TinyMCE in whatever application framework.

1.2. Scope of this tutorial

This tutorial is basically targeted at Dreamweaver and Dreamweaver Developer Toolbox (ADDT) users, although it´s certainly misleading to assume that one would actually *need* Dreamweaver to get TinyMCE integrated -- any text editor will do, as long you know where to insert the sample scripts into your document´s "head", respectively how to adapt TinyMCE´s configuration options to your requirements.

1.3. What this tutorial does *not* cover

It´s really far beyond this tutorial´s scope to explain TinyMCE´s array of configuration options, but all this is well explained in the official manual.

Another burning question by quite some ADDT users is :: how do I integrate TinyMCE´s image management in my form ? Well, this is explained in my other TinyMCE related tutorial Dreamweaver, ADDT and TinyMCE: the SMImage plugin

2. The Setup

a) obtain the current TinyMCE distribution from the MOXIECODE website and place it in a subdirectory of your Dreamweaver site. This tutorial assumes the TinyMCE files to be located in the default subdirectory "tiny_mce"

b) open the page in question with Dreamweaver, switch to "Code" and add some javascript inside the document´s "head":



Note: a text-only version of the displayed sample script is available from this tutorial´s "download related files" page !

Some explanation on what the provided javascript "building blocks" are meant to do:

• the upper single-line javascript will have to define the relative path to TinyMCE´s main "tiny_mce.js" file -- which, as this tutorial assumes, is located in your site root´s "tiny_mce" subdirectory
• the lower javascript block is meant to provide some basic configuration parameters to get you started. For more information on TinyMCE´s extensive configuration options please read the TinyMCE documentation

c) switch Dreamweaver to "Design" and select the textarea to be converted:



d) switch Dreamweaver to "Code" and add class="description" to the textarea:



You might wonder why this CSS class is required at all respectively what it does ? Well, it´s not really required, but it´s a very convenient and flexible thing nonetheless :: TinyMCE lets you define whether it´s supposed to convert *all* available textareas to WYSIWYG editor instances, or if you prefer to convert one defined textarea instance while leaving others unchanged -- and it´s the last-mentioned scenario which actually affects most (not only) Dreamweaver Developer Toolbox users, as in particular the comparatively "advanced" forms typically contain textareas which are supposed to remain "as is", and that´s why we´ll need to tell TinyMCE to make a distinction.

In fact it´s TinyMCE´s "editor_selector" configuration which does just that :: in accordance with the sample script´s editor_selector: "description" configuration TinyMCE will only be converting the class="description" textarea instances, what´s a perfect solution also for ADDT´s "Dynamic Forms".

3. Testing the result

It´s now time to check if our ADDT "Dynamic Form" correctly renders the textarea as TinyMCE control:

a) launch the associated "Dynamic List" in your browser and select the desired records:



b) your "Dynamic Form" should now be displaying the textareas like this:



If it doesn´t, or if you´re getting some javascript errors, you probably just messed up the relative path to TinyMCE´s "tiny_mce.js" file or probably forgot to add the required "class=description" attribute to the textarea.