Extending ExpressionEngine with a WYSIWIG is a fantastic way to make edting your weblogs a lot easier. There are also some powerful file browser / management plugins out there too and in this post will see how to add both to your expressionengine site.

You’ll evetually have the TinyMCE WYSIWIG editor which looks like this:

It’s pretty straight forward, just follow these steps:

• Download TinyMCE
• Create a directory in the root of your EE install named scripts, unzip TinyMCE and upload the contents into that directory. The eventual directory structure will be _*scripts/tinymce/jscripts/tiny_mce/{all the tinymce gubbins}*_
• Download the excellent LG TinyMCE plugin from Levi Graham
• Copy the _*/system/extensions/ext.lg_tinymce.php*_ directory to your /system/extensions directory
• Copy the _*/system/language/english/lang.lg_tinymce.php*_ file to your /system/languages/english directory
• Log in to your sites administration and open the Extensions Manager, Enable Extensions if not already enabled then Enable the extension
• At this point you will have the ability to add WYSIWIG fields from your custom weblog fields, but we’re not going to stop there.
• Download TinyBrowser
• Edit the config_tinybrowser.php file so that the upload directories are valid (usually /images/uploads/)
• Ensure the uploads directory / directories are writable (755 permission)
• Unzip TinyBrowser and upload the contents to scripts/tinymce/jscripts/tiny_mce/plugins/
• We now need to edit the LG TinyMCE extension to handle file browsing. To do this open the system/extensions/ext.lg_tinycme.php file and search for the line

$r .= "n" . '<script type="text/javascript" src="' . trim($this->settings['script_path']) . '"></script>';

we’re going to add this line underneath it:

$r .= "n" . '<script type="text/javascript" src="' . str_replace ("tiny_mce.js","plugins/tinybrowser/tb_tinymce.js.php", trim($this->settings['script_path'])) .'"></script>';

Be careful not to delete any lines, we’re only adding that line.

• Now we need to edit the settings for the LG TinyMCE extension in the Extension Manager. First we need to…
• In the //General setup, we want to add

  file_browser_callback : 'tinyBrowser',

  just below where it says theme : 'advanced’,
• We also want to add

  tinyBrowser,advimage,

  where it says plugins : Make sure you add this bit to the part that isn’t commented out.

That’s it, you should now be able to browse your files from the image and link buttons in the TinyMCE toolbar.

As an added bonus, if you set the directory as the one you usually use with ExpressionEngine file uploads it will build thumbnails for everything you’ve already uploaded and you’ll have all the benefits of the TinyBrowser file management too.

As always, if you’ve used this example or you have any trouble I’d love to hear from you so I can improve and refine the post.

Since writing this, it's become obvious that Wordpress will hash up any attempt I make at adding the correct code snippets. So... I've helpfully altered the LG TinyMCE script, and packaged up the other requisits in this compressed file for you to download. Just extract the contents of the directories into your ExpressionEngine install, (careful not to overwrite all the contents - it's just the bits you need to make this work.)

"Download the pre-configured files here":http://media.wil-linssen.com/uploads/tinymce-with-tinybrowser.zip