Drupal Tutorials and Blog Posts

Installing TinyMCE in Drupal 7

June 26, 2011 | Written by Steve Burge

tinymceThis tutorial will show you how to install the TinyMCE editor into Drupal 7.

By default, Drupal doesn't install with an editor in place so you'll need to install one to have any text formatting options. Here's how to install TinyMCE, perhaps the most popular editor for Drupal.

TinyMCE is not a Drupal not so we can install it directly. Instead we're going to install a module called Wysiwyg and we'll then upload the TinyMCE files seperately.

Install the Wysiwyg Module

tutuploadsmedia_1309108537169.png

Go to http://drupal.org/project/Wysiwyg and download the Drupal 7 version of the Wysiwyg module.

tutuploadsmedia_1309108583482.png

In the admin area of your Drupal site, click on "Modules" and then "Install new module".

tutuploadsmedia_1309108638722.png

Click "Browse" and select the Wysiwyg module file that you just downloaded. Click "Install".

tutuploadsmedia_1309108680782.png

Go back to the "Modules" page scroll to the bottom. Check the box next to "Wysiwyg" and click "Save configuration".

Setting up the Wysiwyg module and TinyMCE

tutuploadsmedia_1309108753390.png

Click "Configure" next to "Wysiwyg".

tutuploadsmedia_1309108945368.png

You'll see the configuration screen for the Wysiwyg module. The key thing to note is that we now to install TinyMCE itself. Scroll down until you find it listed amongst the other extensions.

tutuploadsmedia_1309109033506.png

Click "Download" next to TinyMCE.

tutuploadsmedia_1309109061322.png

You'll be taken to the main TinyMCE download page. Click "Download" next to the top entry in the "Main packages" area.

tutuploadsmedia_1309109245045.png
  • First, you will need to unzip or uncompress the TinyMCE files that you downloaded.
  • Once you've unzipped the files, you'll need to login to your Drupal site's files. You can access the files via FTP or, if you're using a web hosting company, via your site's hosting control panel.
  • Browse to the /sites/all/ folder.
  • Create a folder called /libraries/ if one doesn't exist.
  • Upload the /tinymce/ folder into the new /libraries/ folder.

That's it. You've now installed TinyMCE. We now need to configure it to meet our needs:

Configuring TinyMCE

tutuploadsmedia_1309109349528.png

Go back to the Wysiwyg module configuration screen. You can get here by going to "Configuration" then "Wysiwyg profiles".

Your screen will look like the one above.

tutuploadsmedia_1309109366693.png

Change the "Editor" settings to TinyMCE. and click "Save".

tutuploadsmedia_1309109692151.png

Click "Edit" next to one of the input formats.

tutuploadsmedia_1309109766508.png

Click the "Buttons and Plugins" tab and check the boxes next to the all options you'd like to use in the editor. Click "Save" to finish and repeat the process for the other input formats.

That's it - you're now done.

Go to "Add content" and you should now see the TinyMCE editor available whenever you write content:

tutuploadsmedia_1309109939354.png

 

 


To sign up for complete classes and support

 

Comments  

 
#1 Anuj 2011-07-13 16:58
Thanks for this article, I have scratching my head for last hour and all i did wrong was did not check any button (last step), by default some fields should be checked (the basic one) so that installer does not think that he did something wrong, Anyway your article came for my rescue , Thanks again
 
 
#2 iowawebco 2011-07-13 19:05
You're welcome, Anuj! We're glad we could help :)

Kind regards,
Nick
 
 
#3 smartx 2011-07-16 11:19
This article rocks...Steve, Anuj, Nick, Everyone here, thanks a million....
 
 
#4 iowawebco 2011-07-16 17:32
Cheers smartx! :)
 
 
#5 Eldred 2011-08-01 13:07
Hello and thanks for the tuorial. So far, i have gotten TinyMce to work with Drupal 7 and i have also configured IMCE to allow the upload of images.

What i am struggling with is to add a custom style for the editor to use under styles. I have a file called editor.css in my themes css folder.

Under TinyMce settings, Editor.css. I picked define css from the drop down list and enteres this as the path /sites/all/themes/basic/editor.css. It just refuses to work.

Pls any advise will be very helpful.
 
 
#6 bhiel 2011-08-31 03:06
great! thank you very much! :)
 
 
#7 iowawebco 2011-09-03 14:29
Hi Eldred,

You're welcome for the tutorial :)

Sorry for the delay in responding. It's hard for us to monitor support requests in the comments of blog posts, so if you're a student at OSTraining please use the support forum where we answer all questions within a business day.

Kind regards,
Nick
 
 
#8 iowawebco 2011-09-03 14:30
You're very welcome, bhiel! :)

Kind regards,
Nick
 

Add comment


 


To sign up for complete classes and support