Installing TinyMCE in Drupal 7
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
Go to http://drupal.org/project/Wysiwyg and download the Drupal 7 version of the Wysiwyg module.
In the admin area of your Drupal site, click on “Modules” and then “Install new module”.
Click “Browse” and select the Wysiwyg module file that you just downloaded. Click “Install”.
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
Click “Configure” next to “Wysiwyg”.
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.
Click “Download” next to TinyMCE.
You’ll be taken to the main TinyMCE download page. Click “Download” next to the top entry in the “Main packages” area.
- 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
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.
Change the “Editor” settings to TinyMCE. and click “Save”.
Click “Edit” next to one of the input formats.
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:
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
You’re welcome, Anuj! We’re glad we could help 🙂
Kind regards,
Nick
This article rocks…Steve, Anuj, Nick, Everyone here, thanks a million….
Cheers smartx! 🙂
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.
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
Thanks for the response,
I managed to get it to work shortly after i posted this message.
Great! I’m really glad to hear that, Eldred! 🙂
Kind regards,
Nick
great! thank you very much! 🙂
You’re very welcome, bhiel! 🙂
Kind regards,
Nick
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
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
I did everything like here … but something wrong … working only bold italic … thats all .. dont know what to do 🙁
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
Thanks a lot for this very clear and helpful article. I installed this in no time thanks to this page.
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
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
Hi,
Please ignore last email. The “libraries” folder was not in the “all” folder.
Best Regards
Ashley
Hi Ashley,
Glad you got things sorted! 🙂
kind regards,
Nick
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.
You’re very welcome, Paco!
Kind regards,
Nick
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]
Hi Raphael,
We’re glad we could help and we’re even more glad that you got things working! 🙂
Kind regards,
Nick
Fantastically clear! – Thank you. :o)
Still works like a charm with TinyMCE. Cheers, m8!
Thank so much
Thanks a lot! You saved me.
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.
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.
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,
Thanks! This was just what I needed!
great, works as described
thanks
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.
Downloading an older version of TinyMCE resolved my issue.
@Binary: solves my problem, thank you!
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.
Hi Jake
Try downloading TinyMCE 3 instead of TinyMCE 4. I don’t believe the WYSIWYG module supports 4 yet.
Many thanks from me!
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
Thank for this article
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.\