How to install tinyMCE for ExpressionEngine

I have been running the wysiwyg editor; tinyMCE on a couple of sites and have now succesfully installed within a copy of ExpressionEngine 1.3. In fact it doesn't seem any different from my experience with 1.2. It seems like a few people might find it useful to get some advice as to how to set tinyMCE up. One point before we begin though; tinyMCE does not work with Safari on MAC (up to version 2 anyway) and does not work with Opera as far as I can tell. The best browser on any platform is FireFox and it works with this and Mozilla / Netscape. Internet Explorer is also fine although you will need to take care when copying and pasting content from Word. Here, then are the steps to get tinyMCE working:

furthermore...

  1. Get tinyMCE from MoxieCode here: http://tinymce.moxiecode.com/
  2. Put the whole of the folder called tiny_mce (under jscripts) onto your web server in a place that you know. I put mine in a folder called 'scripts' 'cos that's where I keep all javascripts.
  3. Locate a copy of this file 'cp.display.php' in your installation of EE. You will find it in the folder called 'cp' under the system folder. You can use the one that you downloaded from pMachine, but make a backup of it, in case things go wrong.
  4. Open this file in a text editor. BBedit is my favourite. Don't use Word!
  5. Locate line number 204 where it says $header .=
  6. Insert BEFORE it the following code (I'll explain in the next step): if (($title=="New Entry") OR ($title=="Edit entry") OR ($title=="Preview")) { $header .= "<style type='text/css'>\n". $this->fetch_stylesheet()."\n\n". $this->manual_css. "</style>\n\n". $this->extra_header. "<script language='javascript' type='text/javascript' src='http://www.thisisyourwebsite/scripts/tiny_mce/tiny_mce.js'></script>". "<script language='javascript' type='text/javascript'>tinyMCE.init({mode : 'textareas', theme: 'advanced', theme_advanced_buttons1: 'bold, italic, bullist, numlist, outdent, indent, undo,redo, link, unlink, cleanup, code, removeformat, formatselect', theme_advanced_buttons2: '',theme_advanced_buttons3: '', theme_advanced_blockformats: 'p,h3,h4',relative_urls: 'false',remove_script_host: 'false', convert_newlines_to_brs: 'false',force_p_newlines: 'true', cleanup_on_startup: 'true'});</script>". "</head>\n\n". "<body{$this->body_props}>\n". $this->initial_body."\n"; } else {
  7. In the bit that starts <script language='javascript' type='text/javascript' src= ... - you need to put the location of the tiny_mce.js file on your web server (see step 2). I tend to put the full path in here.
  8. All of this: 'tinyMCE.init({mode : 'textareas', theme: 'advanced', etc etc ...' is your configuration of tinyMCE and for a full explanation of that you need to read the documentation that comes with tinyMCE. Basically, though, you need to decide what buttons (and so formatting) you are giving to your editors / bloggers. My advice is don't put too much in here. Restrict it to a few formatting controls like 'i' which gives <em>. With above configuration, you will have bold (actual markup - <strong>), italic (actual markup - <em>), ordered list, unordered list, blockquote, paragraph and 2 levels of heading (h3 and h4). You can add a link to a selection of text* (more on this below). You can also view the html and edit this in a popup window. For other explainations and modifications then please read the instructions that come with tinyMCE.
  9. There is small modification that you can optionally make to one of the tinyMCE files. When you use the 'link' button to create a link within selected text, then tinyMCE adds 'target="new" into the link attribute. There are two reasons that you might wish to prevent this. First, from a usability point of view opening new windows is a very unfriendly thing to do because where a user is using the browser in full screen mode, the overlayed window has no back button, and many users do not know that they need to close the window. The second reason is that the 'target =..' attribute will prevent your page from validating to 'XHTML strict', and this may be a problem for you.
  10. Take a look at the file called 'link.htm' in themes folder for tinyMCE. I am using the advanced theme, so it is under that folder name. You don't need to do this if you opt for the 'simple' or 'default' theme.
  11. Find line 141 and remove the following: <tr> <td nowrap="nowrap">{$lang_insert_link_target}:</td> <td><select name="target" style="width: 200px"> <option value="_self">{$lang_insert_link_target_same}</option> <option value="_blank">{$lang_insert_link_target_blank}</option> <script language="javascript"> var targets = tinyMCE.getParam('theme_advanced_link_targets', '').split(';'); for (var i=0; i<targets.length; i++) { var key, value; if (targets == "") continue; key = targets.split('=')[0]; value = targets.split('=')[1]; html += '<option value="' + value + '">' + key + '</option>'; } document.write(html); </script> </select></td> </tr>

I think that just about does it. You should find that when you go to the ExpressionEngine 'Publish' page, you should see a set of icons underneath each of the text areas.

Mine look like this: image


You may find a slight delay while the icons are loaded. If you have a multiple author blog, you may wish to use my tinyMCE Cleaner plugin. This strips out any unfortunate combinations of markup that can occur when content contibutors / editors use the icons too much! For example, it is possible to wrap header tags in paragraph tags and even wrap a paragraph tag in another paragraph tag. My plugin does some work behind the scenes to remove this unwanted markup, before the page is displayed. What I have done here is to modify the EE Control panel. If you wish to use on a stand alone entry form, then please try adding the link to the javascript file in the head tag of that page. I haven't done this myself, but I don't see any problems with this.

Posted on 11 Jul around 11am

Tags:

Extra words from Rob Q:

Tripple thanks for the explanation. I had never installed this prior to 1.3 coming out and assumed that the upgrade would cause problems installing it as per prior instructions. What a great explanation, I really appreciate that you layed out nice and easy!  grin

Posted on  07/11  at  03:52 PM

Extra words from Chris Jennings:

Just one extra thought; the only fields that get the formatting icons are the textarea fields NOT the textinput fields.This is appropriate because you don’t want to apply formatting to single lines. These are usually headings anyway.

Posted on  07/11  at  05:29 PM

Extra words from xxdesmus:

Thanks so much…gonna try this out when I get home.

Posted on  07/11  at  06:07 PM

Extra words from Werner:

Thanks Chris for your work. If you email your complete address you will get this swiss chocolat I have promised you before.

But your discription misses an important peace - took me a while to find out why it didn’t work first.

If all your steps are completed there is a curly bracket missing after the this code which follows the hack:

$header .=
   
      “<style type=‘text/css’>\n”.
      $this->fetch_stylesheet().”\n\n”.
      $this->manual_css.
      “<style>\n\n”.
      $this->_fetch_publish_menu().
      $this->_global_javascript().
      $this->extra_header.
      “</head>\n\n”.
      “<body{$this->body_props}>\n”.
      $this->initial_body.”\n”;
  }
This last bracket is not in the original code, but it has to be inserted.

Besides that, for everyone: Do not copy the code from Chris’ Site and insert it into cp.display because of all the ’ and “. It will go wrong. In the code of his site there are left and right ’ &  “. Use the standard ’ & ” instead.

Also I recommend to have an advanced.js file on your server and hold all configuration for tinyMCE there. It’s much easier to adjust your config this way.

For that you change from Chris’ code this line

“<script language=’javascript’ type=’text/javascript’>tinyMCE.init({mode : ‘textareas’, theme: ‘advanced’, theme_advanced_buttons1:  ‘bold, italic, bullist, numlist, outdent, indent, undo,redo, link, unlink, cleanup, code, removeformat, formatselect’, theme_advanced_buttons2: ‘’,theme_advanced_buttons3: ‘’, theme_advanced_blockformats: ‘p,h3,h4’,relative_urls: ‘false’,remove_script_host: ‘false’, convert_newlines_to_brs: ‘false’,force_p_newlines: ‘true’, cleanup_on_startup: ‘true’});</script>”.

to

“<script language=‘javascript’ type=‘text/javascript’ src=‘http://www.yourdomain.ch/folderoftiny_mce/advanced.js’></script>”.


It would be nice to have a complet instruction as a textfile to download, I know. If Chris does it fine. Otherwise I might put it together in the next days.

I appreciate you effort Chris to share your work with us. I am so happy to have “my” TinyMCE back in EE 1.3.

Posted on  07/11  at  08:36 PM

Extra words from Chris Jennings:

Many thanks for your comments advice. I don’t understand the issue with the missing curly bracket. I have posted the whole function up on the pmachine forum here: http://www.pmachine.com/forums/viewthread/24394/

The idea of having a separate advanced.js file sounds good. How do you do that?

Here are these instructions as a zipped text file

Posted on  07/11  at  09:43 PM

Extra words from Vik Rubenfeld:

It’s working! This is so great. Thanks Chris!

Posted on  07/12  at  07:59 AM

Commenting is not available in this channel entry.