I’ve been experimenting with a CMS called ExpressionEngine. I haven’t been too thrilled with the in-built content editor and have been exploring replacing it with TinyMCE. There’s an EE extension that’ll do this fairly easily.

I found an article in the EE wiki that appeared to explain how to integrate TinyMCE with EE’s uploaded images, but in practice, it didn’t quite work… It inserted the local file path to images, not the Web-visible URI.

Also, being an EE noobie, I couldn’t get the author’s security check to work. I decided that this doesn’t really bother me much – I feel like it’s OK for anyone that has admin access to the server to be able to see the path to any uploaded image.

Here’s what worked for me:

Step 1

Create a template group called “scripts”. Within it, create a template called “imagelist.js”. Paste in the following code:

[sourcecode language=’php’]

{exp:query sql=”SELECT server_path FROM exp_upload_prefs”}

{/exp:query}

[/sourcecode]

Be sure to go into the template group preferences and allow the template to render PHP.

Test your code by visiting this page with a Web browser:

http://www.domain.com/index.php/scripts/imagelist.js

Step 2

Edit the preferences for TinyMCE ( Admin > Utilities > Extensions Manager ). Add the following line to the configuration settings:

external_image_list_url : “/index.php/scripts/imagelist.js/”,

the value in the “”s should be a valid path to the template you created in step 1. A full path should work, too. This variable tells TinyMCE where to look for your list of images.

I found that I needed to set “relative_urls : false” in the TinyMCE extension settings or TinyMCE would insert a path that wasn’t quite correct (usually lacking the preceeding /). This will only affect URLs that TinyMCE understands – relative paths using EE code will remain relative.

Test by clicking on the ‘add an image’ icon in TinyMCE. If everything works correctly, there should be an “image list” dropdown in the “add image” dialog, right under the “image URL” field. Add an image and save the page, then view the rendered page on your site.If the image looks OK in TinyMCE, but doesn’t appear on your site, you have issues with relative pathing in TinyMCE.