Integrating ExpressionEngine uploaded images in TinyMCE

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.

9 Comments

  1. Posted October 21, 2008 at 6:30 pm | Permalink

    You many also want to consider using LG Image Manager to further extend TinyMCEs image manger capabilities.

  2. Posted December 15, 2008 at 6:50 am | Permalink

    Thanks, worked a treat.

  3. Marcus
    Posted January 13, 2009 at 11:52 am | Permalink

    It doesn’t work.

    Hello Scott, please help me to fix my problem

    The first step works fine see: http://www.joostenadvies.nl/indexj.php/scripts/imagelist.js

    But if I paste the line in TinyMCE Config:
    external_image_list_url : “/indexj.php/scripts/imagelist.js/”, or

    external_image_list_url : “http://www.joostenadvies.nl/indexj.php/scripts/imagelist.js/”,

    I see no tinyMce buttons anymore and the text has html-codes.

  4. Scott
    Posted January 13, 2009 at 1:25 pm | Permalink

    Make sure you’re not getting any javascript errors. That might break TinyMCE. It looks like the paths that are being returned may be wrong – you’re getting the file paths and you want the URLs. You might need to adjust your “$ee_local_path” so that you get URLs that don’t include the local filepath (/www/htdocs/…)

  5. Marcus
    Posted January 14, 2009 at 5:51 am | Permalink

    The problem with the tinyMCE buttons are fixed. The problem was the use of “” change them to single and it was working fine

  6. Marcus
    Posted January 14, 2009 at 6:55 am | Permalink

    where can I change $ee_local_path? and into what

  7. Scott
    Posted January 14, 2009 at 7:28 am | Permalink

    $ee_local_path is defined in line 4. Line 18 is doing a search and replace on the file paths to the images… it’s trying to take out the local file system path “prefix” and replace it with the URL to your site. You want the stuff that looks like /www/htdocs/… to be replaced with something like http://www.server.com/path/

    You should be able to look at the output of http://www.joostenadvies.nl/indexj.php/scripts/imagelist.js and see the URLs. If everything is working correctly, you should be able to grab any of the URLs that are generated and cust/paste them into your URL bar to view the image. If you’re not getting the actual URL, you’ll need to work on getting the search and replace to work for your specific needs.

  8. Posted October 13, 2010 at 4:02 am | Permalink

    Hi do you know if this would work in Expression Engine 2? As a cms, it is alright for web designers to add in the paths in tinyMCE, but for users they really need a script like this to help them find the images. I will give it a go but just wondering if theres anything I should look for with the changed EE2

  9. Scott
    Posted March 23, 2011 at 9:48 am | Permalink

    Sorry, Luke – I missed your comment. I haven’t used EE2. I kinda hated my experience with EE and have avoided using it on new work.