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

Instructor

  • 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
Blog Rating
Subscribe
Notify of
41 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Anuj

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

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

Kind regards,

Nick

smartx

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

Nick

Cheers smartx! πŸ™‚

Eldred

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

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

Thanks for the response,

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

Nick

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

Kind regards,

Nick

bhiel

great! thank you very much! πŸ™‚

Nick

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

Kind regards,

Nick

thiessens

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

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

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

Nick

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

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

Nick

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

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

Hi,

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

Best Regards

Ashley

Nick

Hi Ashley,

Glad you got things sorted! πŸ™‚

kind regards,

Nick

Paco

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

You’re very welcome, Paco!

Kind regards,

Nick

Raphael

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

Hi Raphael,

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

Kind regards,

Nick

wlb

Fantastically clear! – Thank you. :o)

Peter4684

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

Mr Trung

Thank so much

Akash Tiwary

Thanks a lot! You saved me.

Mary H

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

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

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

Thanks! This was just what I needed!

nicnedam

great, works as described

thanks

Binary

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

Downloading an older version of TinyMCE resolved my issue.

R. J.

@Binary: solves my problem, thank you!

Jake Sterling

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

Many thanks from me!

San

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

Thank for this article

anumt

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