Category:Extensions -> WYSIWYG
TinyMCE
Table of Contents
- TinyMCE
- What is TinyMCE
- TinyMCE Installation (Method 1)
- TinyMCE Installation (Method 2)
- Troubleshooting tips
- Tips & Tricks for using TinyMCE with ExpressionEngine
- Threads relating to TinyMCE on the EE Forums
What is TinyMCE
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.
TinyMCE Installation (Method 1)
=================================================
Installing LG TinyMCE Extension w/ WYSIWYG Custom Field Type & GZIP Support // METHOD 1
=================================================
This method adds a WYSIWYG custom field type to your existing choices. This allows you to have both WYSIWYG and non-WYSIWYG field types on the one page.
It also provides the option for using GZIP compression making the TinyMCE package 70% smaller.
Read the official documentation for LG TinyMCE,
1. Download TinyMCE from their site and put it at the root of your EE site in a folder called scripts. The location of TinyMCE can be changed in the extension settings.
2. Download the LG TinyMCE extension for custom fields from the developers site or from here if the developers site is down for any reason.
3. Upload the extension to your system folder.
4. Go into the Extensions Manager and enable the extension. You might have to enable extensions in general first, if this is your first extension, via the green button top-right. Then enable the extension itself by clicking (enable?) in it’s row.
5. In the Extensions Manager press the settings link of the extension and set the correct path to tinymce.js and TinyMCE settings.
6. Go to Admin › Weblog Administration › Custom Weblog Fields > and choose a group and a custom field where you want the TinyMCE to appear. In the FIELD TYPE drop-down list you will see an option ‘WYSIWYG’. Select it and save.
TinyMCE Installation (Method 2)
==================================
Installing TinyMCE Extension -> EE1 // METHOD 2
==================================
1. Download TinyMCE from their site and put it at the root of your EE site
(same directory as the path.php file):
2. Download the TinyMCE Extension for TinyMCE from the ExpressionEngine website.
3. There are two files included in the TinyMCE Extension zip downloaded in Step 2 (three if you could the readme.txt). Put the one with the ext. prefix into the /system/extensions folder for the site. Take the one with the lang. prefix and put it in the /system/language/english/ language folder.
4. Go into the Extensions Manager and enable the extension. You might have to enable extensions in general first, if this is your first extention, via the green button top-right. Then enable the extension itself by clicking (enable?) in it’s row.
5. Check it out in the Publish area. If the tinyMCE interface does not appear, try clearing all caches in [CP Home › System Administration > Clear Cached Data].
Troubleshooting tips
Once you have followed the instructions above, click the “Publish” tab. If TinyMCE does not appear for the field(s) you chose, here are some things to check:
• ‘View source’ on the page. You should find a script tag pointing to the ‘tiny_mce.js’ file within the head of the document. Right after that, you should also find an inline script that has all of the TinyMCE settings. If you do not find those, then the extension is not loading properly. Go to Admin > Utilities > Extension manager and make sure the TinyMCE extension is marked “Enabled” under status.
• If you see that the js file is being called, double check that the address is correct. Check it by browsing to the location using an FTP client or by copying and pasting the location into the address bar of your browser following the base url of your site. The file may display in your browser, or it may download.
• Take a look at the js file and make sure that it is actually loading the correct file. The tiny_mce.js file should begin with ‘var tinymce’. If it begins with a ‘!DOCTYPE’ tag the correct file is not loading. Again, check the location and make sure it is correct. Also, if you have setup “Friendly URLs” for your site, your .htaccess file may need to be edited. If you followed Method 1 above, add ‘scripts’ to the list of exceptions in the RewriteCond of your .htaccess file. If you followed Method 2 above, add ‘tinymce’ to the list of exceptions in the RewriteCond of your .htaccess file.
• Sometimes an absolute URL is needed (Method 1, step 5), like the example: http://mydomain.com/EE/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js . Change “EE” to the name you renamed the EE’s root directory.
Tips & Tricks for using TinyMCE with ExpressionEngine
• TinyMCE & ExpressionEngine Integrated File Upload Management
• Installation of iBrowser with TinyMCE to handle images
• Installation of TinyBrowser with TinyMCE to handle images uploads/browsing/thumbnails
• Adding TinyMCE to an EE Wiki Theme
Threads relating to TinyMCE on the EE Forums
• TinyMCE Settings
• Pound Sign Glitch if it doesn’t load