TinyMCE: a WYSIWYG editor

Last modified: December 6, 2008 - 03:07

The TinyMCE module adds a what-you-see-is-what-you-get (WYSIWYG) html editor to normal textareas. This enables users to create rich text in the manner of Open Office or Microsoft Word without having to know HTML markup.

The Editor itself is maintained by Moxiecode Systems AB and is used by many different content management systems. A browser compatibility chart is available at the Moxiecode website.

Installing TinyMCE

  1. Download the Drupal TinyMCE Module.
  2. Download the TinyMCE files from the Moxiecode Systems AB web site. It is this module that enables the TinyMCE editor to be used within Drupal. Make sure you download the right version of TinyMCE. If you're on Drupal 5.x, then you'll need to download the 2.1 branch. The D6 version of the module (in dev at this time) uses the 3.x branch. You can find all versions of TinyMCE on Sourceforge
  3. Untar or unzip the Moxiecode file and copy the resulting directory called tinymce into the drupal TinyMCE module's directory. After you have finished copying the Moxiecode TinyMCE directory into your drupal code base, the path to it should look like: ..public_html/sites/all/modules/tinymce/tinymce. The exact path may vary depending on where you have drupal running, but the point to remember is that the Moxiecode tinymce folder(directory) which contains the TinyMCE editor's engine must go inside the drupal tinymce module's directory. (TinyMCE 5.2 users: copy the TinyMCE files into the module's includes folder).
  4. Enable the module as usual at Administer>>Site Building>>Modules (../admin/build/modules).

Watch a screencast detailing the installation and configuration of TinyMCE. Alternative installation screencast

Watch a screencast detailing the installation and configuration of Spellcheck and Teaser Break TinyMCE plugins.

TinyMCE Profiles

TinyMCE uses profiles to define which user(s) receive Editor capability, and on which pages the Editor is displayed. Editor buttons and themes are enabled on a per-profile basis as well. The default profile setting uses the "simple" TinyMCE theme which shows the minimal button set (bold, italic, underline, etc).

Per-profile options also exist to turn on or off the Editor for those users, or even to allow/disallow users the ability to toggle TinyMCE on the fly while editing a text node.

Create, modify, and delete your TinyMCE profiles at Administer > Site Configuration > TinyMCE (5.x)

User Roles and Access Control

TinyMCE profiles are attached to users via the Access Control settings at Administer > User Management > Access Control (5.x) Remember that if a user is a member of Roles attached to multiple TinyMCE profiles, they will receive the profile with the lowest Role ID they belong to.

Administer per-user roles at Administer > Roles (5.x)

Change user's TinyMCE preferences via their individual accounts at Administer > User > Edit (5.x)

Please file issues, read about known bugs, and download the latest version on the TinyMCE project page.

tinymce and filtered html settings

Sean B Fuller - March 14, 2007 - 14:43

A while back I created a quick write-up of how to set up profiles and get them to work with the input filters. Some may find it useful:

http://drupal.org/node/59769

--------------------
Sean B. Fuller
www.seanbfuller.com
www.tractiv.com

Too many TinyMCE directories

kayaker - January 22, 2008 - 22:25

Depending upon the extraction sequence of Drupal Module and Moxiecode TinyMCE files, one (me for example) can get lost for several hours trying to get the files in the right place. Or, if one gets confused about all of the TinyMCEs versus Tiny_MCEs.

Expanding on the above, the end-structure (look for the TinyMCE .js files) should look like

.../public_html/sites/all/modules/tinymce/tinymce/jscripts/tiny_mce/

with tiny_mce.js, etc. in the bottom tiny_mce directory.

Dennis aka Kayaker

Somebody should sic a CAT on this.

Alternative path

murraybiscuit - March 4, 2009 - 09:06

This path worked for me:
/webroot/sites/all/modules/tinymce/jscripts/tiny_mce/
(no double tinymce dir)

Running drupal 6.10 with tinymce 3.x

If you want to install

s.Daniel - March 5, 2009 - 12:12

If you want to install tinymce try out the wysiwyg api wich makes the process of installing easyer and gives you alot more controll over the editor:
http://drupal.org/project/wysiwyg

TinyMCE Installation

gmitchel850 - July 29, 2008 - 17:36

I've seen comment on several sites about the installation of TinyMCE being tricky.

I'll admit, it's not as simple as adding the typical Drupal module. But I did not find the installation of TinyMCE to be challenging at all. The directions for Drupal installation are clear. It took all of five minutes for me to get it to work.

I was reluctant to install TinyMCE because these warnings are plastered everywhere. No one should be deterred by them. The installation is still easier and quicker than many Drupal modules, like eCommerce or Ubercart. Heck, it was easier to figure out how to install TinyMCE than it was to figure out how Imagecache works. ;)

Cheers,

Mitch

I think it worth installing

seanray - September 11, 2008 - 05:20

I think it worth installing TinyMCE, especially if you plan to have your visitors write something on your web site. But I have to agree with you that Installing TinyMCE in Drupal is really not as easy as installing Drupal itself. The problem is the description of "TinyMCE for Drupal" is not clear enough. It takes me sometime to realize that "TinyMCE for Drupal" is actually a Bridge between "TinyMCE" and "Drupal", you will need to download "TinyMCE" again to make it work.

Below is an article further explaining this issue, which will definitely make installing TinyMCE easier:
http://www.agilelight.com/drupal/how-to-install-tinymce-to-drupal

 
 

Drupal is a registered trademark of Dries Buytaert.