Installing TinyMCE in Drupal 7

TinyMCE

This 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

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Subscribe
Notify of
41 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Anuj
Anuj
12 years ago

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

Nick
12 years ago
Reply to  Anuj

You’re welcome, Anuj! We’re glad we could help πŸ™‚

Kind regards,

Nick

smartx
smartx
12 years ago

This article rocks…Steve, Anuj, Nick, Everyone here, thanks a million….

Nick
12 years ago
Reply to  smartx

Cheers smartx! πŸ™‚

Eldred
Eldred
12 years ago

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.

Nick
12 years ago
Reply to  Eldred

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

Eldred
Eldred
12 years ago
Reply to  Nick Savov

Thanks for the response,

I managed to get it to work shortly after i posted this message.

Nick
12 years ago
Reply to  Eldred

Great! I’m really glad to hear that, Eldred! πŸ™‚

Kind regards,

Nick

bhiel
bhiel
12 years ago

great! thank you very much! πŸ™‚

Nick
12 years ago
Reply to  bhiel

You’re very welcome, bhiel! πŸ™‚

Kind regards,

Nick

thiessens
thiessens
12 years ago

Sir followed your tutorial. thank you!! But how can I enable rich text formats? All I see is the tags before tekst and “normal” tekst. No rich tekst at all. hop eyou can help

Nick
12 years ago
Reply to  thiessens

Hi and welcome, thiessens!

Rich-text is for word documents while TinyMCE is for generating valid html which works for the internet. Rich-text wouldn’t work well for website and many browsers would mess up the formatting.

Hope that helps!

Kind regards,

Nick

Mantas
Mantas
12 years ago

I did everything like here … but something wrong … working only bold italic … thats all .. dont know what to do πŸ™

Nick
12 years ago
Reply to  Mantas

Hi Mantas,

Are you getting any errors messages? If not, try clearing your browser’s cache and hopefully that will fix it for you. If that doesn’t work, could you explain a bit more? Do the buttons not work or something else is the matter?

Kind regards,

Nick

christof
christof
12 years ago

Thanks a lot for this very clear and helpful article. I installed this in no time thanks to this page.

Nick
12 years ago
Reply to  christof

You’re very welcome, Christof! There’s a lot more available inside to members. Check out [url=http://www.ostraining.com/online/#heading]http://www.ostraining.com/o…[/url] for everything that’s available to you if you become a student at [url=http://ostraining.com]ostraining.com[/url] πŸ™‚

Kind regards,

Nick

Ashley
Ashley
12 years ago

Got to the stage where TinyMCE has been installed. Double checked on Filezilla, and the path is the same as:

sites/all/libraries/tinymce/jscripts/tiny_mce/tiny_mce.js

However, when I go into Configuration/Wysiwyg profiles, it states there that TinyMCE has not been installed, how can this be, when Filezilla clearly shows the path?

Would appreciate feedback.

Best Regards

Ashley

Ashley
Ashley
12 years ago

Hi,

Please ignore last email. The “libraries” folder was not in the “all” folder.

Best Regards

Ashley

Nick
12 years ago
Reply to  Ashley

Hi Ashley,

Glad you got things sorted! πŸ™‚

kind regards,

Nick

Paco
Paco
12 years ago

Thank you so much! Its a complete wonder for me why something like this its not installed already on the let go in the basic drupal installation πŸ™ But I am sure there are its reasons.

Nick
12 years ago
Reply to  Paco

You’re very welcome, Paco!

Kind regards,

Nick

Raphael
Raphael
12 years ago

This is a great article. I had struggled to set up TinyMCE on Drupal 7 but I have now successfully set it up. After setting up TinyMCE I also had challenges

getting IMCE to work but this thread was very helpful. [url=http://groups.drupal.org/node/38764#comment-340074]http://groups.drupal.org/no…[/url]

Nick
12 years ago
Reply to  Raphael

Hi Raphael,

We’re glad we could help and we’re even more glad that you got things working! πŸ™‚

Kind regards,

Nick

wlb
wlb
11 years ago

Fantastically clear! – Thank you. :o)

Peter4684
Peter4684
11 years ago

Still works like a charm with TinyMCE. Cheers, m8!

Mr Trung
Mr Trung
11 years ago

Thank so much

Akash Tiwary
Akash Tiwary
11 years ago

Thanks a lot! You saved me.

Mary H
Mary H
11 years ago

Thank you thank you thank you. I’ve been building bespoke websites for over 10 years, but am a complete newbie when it comes to Drupal. My client wanted a TinyMCE set-up, and could I work out how to get it working? Nope. You’ve saved me some blushes.

navoff
navoff
11 years ago

I followed all the instructions. The TinyMCE was unpacked under the \sites\all\libraries folder. In Drupal 7 under Home Β» Administration Β» Configuration Β» Content authoring >> Wysiwyg profiles, it says that TinyMCE is installed. I selected a text format to apply TinyMCE to and edited it to choose which buttons I wanted to show up in the editor. But when I go to create content and select the profile that has TinyMCE associated with it, I get no editor what so ever. I even checked the Apache error log but there are no errors being flagged.

Thien Hoang
Thien Hoang
11 years ago

Hello,

error with role different administrator.

I install and configuration for them. it work fine. so, I add a role as editor in drupal. I created an account editor with role editor. I access permission for editor use Full HTML. however, when I add or edit content with editor user. The TinyMCE dose not work. I think the editor user have not permission with TinyMCE. How to fix it?

Thank you very much,

Clark
Clark
11 years ago

Thanks! This was just what I needed!

nicnedam
nicnedam
11 years ago

great, works as described

thanks

Binary
Binary
10 years ago

These instructions did not work for me. I have followed all of the instructions, but TinyMCE is still listed as “uninstalled.”

According to the WYSIWYG instructions, I am to copy the tinymce folder to /sites/all/libraries/:

“So the actual library can be found at:

sites/all/libraries/tinymce/jscripts/tiny_mce/tiny_mce.js”

Problem is, there is no javasripts folder inside tinymce. There is a “js” folder. I can rename it, but it doesn’t give one a lot of confidence.

I have to wonder what else is changed/wrong.

Binary
Binary
10 years ago

Downloading an older version of TinyMCE resolved my issue.

R. J.
R. J.
10 years ago

@Binary: solves my problem, thank you!

Jake Sterling
Jake Sterling
10 years ago

Your instructions seem very clear, but I don’t seem to be able to get the tinymce installation to work. I have installed the WYSIWYG module and it is “Enabled”. It shows up at the bottom of the Modules page in a section at the bottom, separate from the other modules, called, “User Interface”.

I have uploaded the tinymce folder to …sites/all/libraries/tinymce and gone to the configuration page, but tinymce still shows up as “Not Installed”.

Anyway, I am not quite at the stage of tearing my hair out, which is good because I don’t have much to tear; but I could use some guidance.

vikic
vikic
10 years ago

Many thanks from me!

San
San
10 years ago

Hi, thanks for your aticle. However I cannot make it works. I have no error, tinymce is correctly installed, I’ve checked several boxes but when I want to create / edit content, there’s no tinyMce. Did I miss something? I use tinmyce 3.5

Srinivasan
Srinivasan
9 years ago

Thank for this article

anumt
anumt
8 years ago

i have followed the same steps but unfortunately none of the editor is installing . i am new to drupal and have no idea what to do to fix it up..kindly help me.\

41
0
Would love your thoughts, please comment.x
()
x