Adding TinyMCE to EE Wiki

Having found several requests in the forums and no tutorials online or in documentation, I’ve documented the steps I took to add the TinyMCE editor to my ExpressionEngine wiki.

I am using the EEDocs wiki theme to provide documentation for my users. Here are very quick and dirty instructions to add TinyMCE to your EE Wiki which basically follows the default instructions provided by the TinyMCE Wiki.

  • Download TinyMCE, extract it.

  • Upload the TinyMCE to your webserver, note the path.

  • Find the default PHP file for the EE wiki theme you are using. Mine was in my siteroot/themes/wiki_themes/eedocs/ folder and is called eedocs.php. The default them would be in the themes folder under wiki_themes/default/default.php. Open this in the editor of your choice. You may want to create a backup copy in case you need to revert later.

  • Add the following code to the <head> area:

    <script type="text/javascript" src="http://yoursite.com/yourpathto/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

    Note you may want to test that path in your browser and make sure it is linking to the tiny_mce.js path as intended.

  • Add the following inline script to the <head> area :

    <script type="text/javascript">
    tinyMCE.init({
    mode : "textareas"
    });
    </script>

This will turn all of your textareas into TinyMCE editor fields. There are many other ways to configure this, you could specify exactly which textareas to use TinyMCE, for example. For all your TinyMCE customization options, see the TinyMCE wiki and for help knowing where to put what, check out the ExpressionEngine User Guide section on the Wiki Theme Template.

I can’t say I’ve done extensive testing yet, but the default TinyMCE install has not (so far) interfered with wiki markup at all, which is to say that [[Category:Foo::Bar]] and regular [[wiki links]] seem to be working happily.

Screenshot:
ExpressionEngine Wiki with TinyMCE

Update: Installed the MarkItUp editor in a similar fashion, I like it a lot more than TinyMCE out of the box. May be looking at Textile Editor Helper (TEH) and CKEditor as well, so check back for a WYSIWYG / markup editor showdown. In the meantime, consider what you need a WYSIWYG for and what markup under the hood you’re willing to live with in the long-term before settling on a solution for your site – here’s a good article that sums up that issue: WYSI-dangerous: Why WYSIWYG editors are bad for your website on redcloth.org.

1 Comment »

  1. JoshMoneyMiller said,

    July 11, 2011 @ 8:45 pm

    After searching for a while I was finally able to track down this site and that script just in time.. Thanks

RSS feed for comments on this post · TrackBack URI

Leave a Comment