Category:Extensions -> WYSIWYG

TinyMCE

Table of Contents

• TinyMCE
• What is TinyMCE
• TinyMCE Installation (Method 1)
• TinyMCE Installation (Method 2)
• 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, watch the video tutorial or continue reading for an overview.

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 // 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 pMachine 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].

Tips & Tricks for using TinyMCE with ExpressionEngine

• Video tutorial on how to install TinyMCE
• TinyMCE & ExpressionEngine Integrated File Upload Management
• Installation of iBrowser with TinyMCE to handle images

Threads relating to TinyMCE on the EE Forums

• TinyMCE Settings
• Pound Sign Glitch if it doesn’t load