TinyMCE Images Plugin

JustBoil Images - a very simple images upload plugin for TinyMCE

JustBoil.me Images is a simple, elegant image upload plugin for TinyMCE. It is free, opensource and licensed under Creative Commons Attribution 3.0 Unported License. The latest version is 2.1 from May 24th, 2011

Download jbimages-2.1 (about 400KB)

Features

JustBoil.me TinyMCE Images Upload plugin is cool for this features:

  • Allows your users to upload images in 2 clicks;
  • Has an Image auto-resize (the maximum width and height of an image can be specified in config file);
  • Special feature prohibits uploads that exceed the maximum image width, height or the maximum file size (all set in config file);
  • Another special feature disables uploads of image file formats that are not marked as allowed.

Requirements

  • PHP5. Application has been tested on PHP 5.2.17. (PHP4 would not work)
  • TinyMCE (we recommend using the latest 3.4.x branch)
  • GD2 Library (required for image manipulations)

Setup

1. Download distribution pack. Unzip it into TinyMCE’s plugins folder.

2. Edit config.php file found in plugins/jbimages. Minimally, you should only specify a target directory for your uploads. Every block of config.php is well-commented, so I think everything should go right.

3. Activate jbimages plugin and add jbimages button in TinyMCE. Don’t forget to set theme:advanced and relative_urls:false.

The main-things-only example: http://snipt.org/xzlj or http://pastebin.com/3vLYn72a;

<!-- Powered with JustBoil Images (a TinyMCE Images Upload Plugin). More info at http://justboil.me/tinymce-images-plugin/ -->
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
relative_urls : false,
plugins : "jbimages",
theme_advanced_buttons1 : "jbimages,|"
// Other TinyMCE options
});
</script>

The full example: http://snipt.org/xzoi or http://pastebin.com/KC5YQd3u.

4. In case, the TinyMCE’s folder is not protected with HTTP Authorisation, you should require is_allowed() function to return `TRUE` if user is authorised, `FALSE` – otherwise. is_allowed() is found at plugins/jbimages/is_allowed.php of your TinyMCE installation. The simplest example of such function: http://snipt.org/xzoj or http://pastebin.com/mV9D6Vdg.

Bugreports & support

Please send all your questions and bugreports to vik@justboil.co.uk. The support is not guaranteed, but I’ll try to give help, if I can. Thank’s))))

The nice, simple and free

Translating to other languages

If you’d like to use plugin in different language, here is a short how-to: http://justboil.me/tinymce-images-plugin/translating-to-other-languages/

Removing the attribution

if you want to remove the author’s attribution from the plugin or just want to support the plugin’s future development – welcome here.

Creative Commons License
JustBoil TinyMCE Images Plugin is licensed under a Creative Commons Attribution 3.0 Unported License.

68 thoughts on “TinyMCE Images Plugin”

  1. Pingback: TinyMCE补充上传图片功能 | 大雄博客

  3. Thanks for the plugin. Ihave one issue with the especial caracters. My page is in UTF-8 and show strange caracters.

    Best regards.

    Reply ↓

  6. Can anyone please tell me how to include this plugin in a .Net application? I just want to know if modifying this plugin to work in .net is a difficult task. I really want to use this plugin. Thanks.

    Reply ↓

  7. I have installed the plugin in two servers.. one is working and another is not.. i keep getting “The upload path does not appear to be valid.”
    Ive tryed changing under the FTP the folder permitions but it always stays at xxx and the server response is 500 ‘SITE CHMOD 777 xxxxxx’: command not understood. What could be the problem?

    Reply ↓

    • I suppose the problem is in path itself, you can manually set the path relative to server root via modifying $config['upload_path'] at the bottom of config.php

      Reply ↓

      • I got the same problem with Juan Carlos. I was trying to set carefully the images path and the upload path but it won’t still work. Please help? Thanks.

        Reply ↓

        • There’s only a few reasons for this error to occur:

          1. The directory does not exist, try running is_dir() to ensure that it does.
          2. The directory exists but is not writable. Make sure you have set the appropriate permissions on the directory. Try running is_writable() to make sure.
          3. The directory you want to use exists, but you have not represented it properly to the Upload library. Try using an absolute path for $config['upload_path'].

          Reply ↓

          • Sorry there seems to be a path issue with the scripts at least in my configuration, permissions are 777, checked the path using raealpath(”) from the folder, set relative_urls : false in tinymce configuration also tried absolute path in the config file. Using php 5.** and tinymce 3.5.1

    • $config['img_path'] is used in img’s src attribute. $config['upload_path'] should be the physical folder on the server, by default it is computed automatically.
      So, if you’d like images to come from another domain, you have to manually set the $config['upload_path'] and $config['img_path'].

      Reply ↓

  12. when I upload a image ,an error occured,”Upload in progress…
    This is taking longer than usual.
    An error may have occurred.
    View script’s output:
    Forbidden

    You don’t have permission to access /sugarcrm63/include/javascript/tiny_mce/plugins/jbimages/ci/index.php/upload/english on this server.
    ”
    What I should do?Thanks.

    Reply ↓

    • Hi! The problem is in your .htaccess file in one of the folders of this path /sugarcrm63/include/javascript/tiny_mce/plugins/ …. So, please check the .htaccess if it prohibits external access to the upload script.

      Reply ↓

  13. Hello, i’m trying to use your pluggin but i can’t get it to work properly. I mean when i finish setting up everything the TinyMCE icons inside the textarea doesn’t show up, if i remove the plugin name from the list of plugins that are being used it works fine..

    Here is my code:

    tinyMCE.init({
    // General options
    language : “pt”,
    mode : “textareas”,
    theme : “advanced”,
    relative_urls : false,
    plugins : “jbimages,autolink,lists,spellchecker,pagebreak,style,layer,save,advhr,advimage,advlink,iespell,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras”,
    // Theme options
    theme_advanced_buttons1 : “undo,redo,|,print,|,blockquote,|,cut,copy,paste,pastetext,pasteword,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,search,replace,|,bullist,numlist,|,outdent,indent,|,link,unlink,anchor,|,image,|,media,|,jbimages”,
    theme_advanced_buttons2 : “”,
    theme_advanced_buttons3 : “”,
    theme_advanced_buttons4 : “”,
    theme_advanced_toolbar_location : “top”,
    theme_advanced_toolbar_align : “left”
    });

    Any suggestions?

    Reply ↓

  15. Great set of scripts! Looking for a place to force user to add alt text – I’ve edited the html and some of the js to allow user to enter it, but would like to find a place to disallow the upload button if it is not filled.

    Also – not sure how to use the maximum size options – enter as “200px”, “200″, etc?

    Thanks!

    Reply ↓

  16. I am trying to get this to work on a website using codeigniter framework…I get this error:
    Upload in progress…
    This is taking longer than usual.
    An error may have occurred.
    View script’s output

    404 Page Not Found

    The page you requested was not found.

    any help would be much appreciated

    Reply ↓

    • Hi! Try to access directly to (your_domain_and_path_here)/tiny_mce/plugins/jbimages/ci/index.php/blank/english
      Most likely, you have configured Apache mod rewrite and it points you to some other location. Please check the .htaccess file in the server’s root directory.

      Reply ↓

  19. Is it possible to integrate this plugin into an already existing CodeIgniter website? It’s a lot of overhead to be using an entire 4 MB PHP framework for what should just be one image upload script!

    Reply ↓

  20. My website main page is located at “C:\Inetpub\wwwroot\Ravi\index.php”. and i want to upload the images to “C:\Inetpub\wwwroot\Ravi\images”. I made a change to config.php file as below,

    $config['img_path'] = ‘/Ravi/images’; and i tried $config['img_path'] = ‘/images’; also. It is saying that “unable to upload or take long time to upload, plz check url”

    Reply ↓

  21. I have installed your plugin, but when I try to upload an image, it gets stuck in:
    “Upload in progress…
    This is taking longer than usual.
    An error may have occurred.”
    View script’s output:”
    “Disallowed Key Characters.”

    How can I solve this error?

    Thanks.

    Reply ↓

    • nevermind, my problem was that i was just setting a max width, if you do this you also have to set a max height. i love this plugin, so simple!

      Reply ↓

  24. hi, i tried in with language:”it” and didn’t work.
    can you fix it?

    PS: also fix your 3rd setup point “REALTIVE_urls:false.” :)

    Reply ↓

    • 3rd setup point fixed, thank you )))
      language:”it” doesn’t work because there is no italian in jbimages, to fix this please rename jbimages/langs/en.js to it.js and jbimages/langs/en_dlg.js to it_dlg.js

      Reply ↓

  25. hello ,

    when we trying to insert an image in firefox its placing correctly in table cell (where the mouse pointer was) but in IE it not placing exactly in to the cell , can you suggest a quick work around for this , thanks for developing very useful plugin.

    Reply ↓

  27. So simple and so great!!!

    btw i have a small comment/prob. If you have enabled the option to automatically resize images you need to specify both width and height in order to work. If you want to resize only images that their width exceeds lets say 600px and you leave height to :0 it will not work. You have to have e.x width:600; AND height:500 (or whatever).

    other than that, the plugin works perfectly!!

    Reply ↓

  31. I get an endless “upload in progress” with nothing outputting to the script window. The image file does get copied to the correct folder, but the window stays open that says “this is taking longer than usual, an error may have occurred” … I don’t understand why the image is successfully copied, but it never gets put into the TinyMCE editor window. Any ideas?

    Reply ↓

  33. Hi I got this error: “You don’t have permission to access /quiz/jscripts/tiny_mce/plugins/jbimages/ci/index.php/upload/english on this server.”

    i saw a similar error above, but the only htaccess file I can find is in the root folder, does that affect? Not familiar with using htaccess, can you advise?

    this is what is in the htaccess file I mentioned earlier:

    AddHandler cgi-php5 .php
    # -FrontPage-

    IndexIgnore .htaccess */.??* *~ *# */HEADER* */README* */_vti*

    order deny,allow
    deny from all
    allow from all

    order deny,allow
    deny from all

    Reply ↓

  34. Hi admin! awesome plugin!! I’m wondering how to use (if is possible) as a file browser callback. Could you help me?
    Thanks in advance and congrat for good job!

    Reply ↓

  36. Hi, my language is “pl”. I rename jbimages/lang/en.js to pl.js and jbimages/lang/en_dlg.js to pl_dlg.js.It.s works but not goog becouse when i try upload some image i see “upload an image from computer” and i can’t upload.When i use langue “en” it’s working good.

    Reply ↓

  37. Thanks for your work! Any interest on publishing this on Github, for posterity’s sake and so people (like me) could help contribute to the code?

    Reply ↓

  43. great plugin..
    but i have problem
    how to add img alt?
    i see in atribute database like this:

    alt is empty..
    how to add alt before upload image?
    or how to auto fill for alt image?
    thanks

    Reply ↓

    • The ‘img’ tag is produced in /jbimages/js/dialog.js (line 52), so you are free to change this to whatever you want )))

      Reply ↓

  44. PS!

    I did not add this step into my system:
    3. Activate jbimages plugin and add jbimages button in TinyMCE. Don’t forget to set theme:advanced and realtive_urls:false.

    Were does it suppose to go? In the : tiny_mce_src.js file?

    Thanks
    Cornelius

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>