The all new ASPimage plugin for tinyMCE

UPDATE 2009/05/20: A lot of people have been asking me for the version of TinyMCE that works with the ASPImage plugin. I have put it up for download here. This zip file contains both TinyMCE aswell as ASPImage, and is tested to work.

UPDATE 2008/06/21: It seems that the newer versions of Tiny (3.0.8+ ?) have a different plugin-implementation AGAIN. i’m not sure why this implementation has changed twice between 3.0Beta and 3.0.8, but I have no time to keep re-writing the plugin. So I suggest if you want to make use of ASPimage, you’ll have to either re-write it to work with later versions (and let me know, please, I’m interested too) or keep using Tiny 3.0, sorry guys.

Some time ago I wrote a little plugin for tinyMCE to be able to upload images onto the server from tiny. It worked with some free upload-code in ASP and the world was a good place. I put it on my site for the world to see and download, until some time later I started getting e-mails from people saying they couldn’t install the plugin. One of the e-mails said that the way plugins were done in tinyMCE had changed substantially. Now, until yesterday I still used the older version of tinyMCE that I used in the beginning, but for one of my latest projects I decided to download the new version.

Lo and behold, indeed the plugin was borked. tinyMCE 3 did change plugins substantially. So I took some time and changed the plugin to work with the new tinyMCE releases. You might also like to hear that the code was cleaned up and simplified substantially (remember fellow coders: if you look back at your code from the past, and you still think it’s perfect, you haven’t made any progress). Also, all translations are now in place for the English language, so the whole thing is properly translated too.

Anyway, the reason you’re here: the new ASPimage plugin.

UPDATE: After a few remarks from people using this plugin I found out that the plugin was based on an Alpha version of TinyMCE 3.0. It seems the plug-ins needed to be adjusted for the final version. I have done so, the plugin is now tested with TinyMCE 3.0 release date 2008-01-30, so please download it again if you still have the old version.

And to prove it really works, I took a screenshot for you :)

new ASPimage plugin

Seriously though, if there still are people with problems getting it to work, leave a comment or send me an e-mail.

Advertisements

Tags: , , ,

76 Responses to “The all new ASPimage plugin for tinyMCE”

  1. Max Says:

    Hi,
    I’ve just downloaded this scipt but how i could insert the plugin into TinyMCE ?

  2. precompiled Says:

    Just put the folder in the plugins directory of tinyMCE and add aspimage as a plugin. It works exactly the same as advimage, but use aspimage instead of advimage as the name: http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/advimage

  3. Alexandre Says:

    Hi,

    I try use the plugin exactly you say. I put the folder in the plugins directory and replace advimage for aspimage (plugins: “aspimage”), but don´t work. I get this error:

    Error: s.onclick has no properties
    File: http://xxxx/tiny_mce/tiny_mce.js
    Line: 1

    I use the Firefox 2.0.0.12. Any suggestions?

  4. precompiled Says:

    please try the following TinyMCE configuration in your page:

    tinyMCE.init({
    theme : “advanced”,
    mode : “textareas”,
    plugins : “aspimage”,

    theme_advanced_buttons1 : “bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink”,
    theme_advanced_buttons1_add : “image”,
    theme_advanced_buttons2 : “fontselect,fontsizeselect”,
    theme_advanced_buttons3 : “”,
    theme_advanced_toolbar_location : “top”,
    theme_advanced_toolbar_align : “center”,
    theme_advanced_path_location : “bottom”,
    extended_valid_elements : “a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]”
    });

    This one works for me, so I guess it should work for you. Also, make sure you have the latest tinyMCE version.

  5. Arathra Says:

    Tried it exactly as you said (copied and pasted your code) – with the very latest version of TinyMCE downloaded from their site this morning but it comes up with the error:

    Line: 1
    Error: ‘s.onclick’ is null or not an object

    I hope you can help as I used the old version a lot and it’s an excellent addition to TinyMCE!

  6. precompiled Says:

    Well everyone,
    After a few remarks I checked out what was wrong, it seems the version of tiny I used to develop the new plugin with is still different from the latest version now.
    The plugin works with TinyMCE 3.0a2 releaseDate 2007-11-02
    The current release is TinyMCE 3.0 releaseDate 2008-01-30
    So it seems I developed the plugin with an alpha version…. sigh…
    I will look into this ASAP, as it seems a lot of people find this plugin useful. I will update the post when I’m done.

  7. Alexandre Says:

    Hi Erik,

    I found the errors, and I set righted. You can get the plugin in http://www.equusconsulting.com.br/TinyMCE/aspimage-TinyMCE-3-releaseDate-2008-01-30.zip

    I create too a language in portuguese-BR.

    Tks a lot.

    • Problem with preview and insert image to textarea Says:

      Hi, Bonjour,

      I am a physician and a i ambuilding an asp intranet for non commercial association. I have used aspimage for an integration to tinymce. I have made somme modification to your program for accessing to a local directory upload. But i find problerm with preview an insert the choosed pic to tinymce textarea.

      Can you help a phusician with non profit aim ?!!

      Here is my image.asp :

      1 Then
      For I = 1 to 2
      Dim X
      For X = Len(strFilename) To 1 Step -1
      If Mid(strFilename, X, 1) = “\” Then Exit For
      Next
      If Len(strFilename) > 1 Then
      strFilename = Left(strFilename, X – 1)
      Else
      strFilename = “\”
      X = 2
      End If
      Next
      ExtractDirName = Left(strFilename, X – 1)
      End If
      End Function

      Function ShowImageForType(strName)
      ‘ For the ‘explorer’: shows file-icons
      Dim strTemp
      strTemp = strName
      If strTemp “dir” Then
      strTemp = LCase(Right(strTemp, Len(strTemp) – InStrRev(strTemp, “.”, -1, 1)))
      End If
      Select Case strTemp
      Case “asp”, “aspx”
      strTemp = “asp”
      Case “dir”
      strTemp = “dir”
      Case “htm”, “html”
      strTemp = “htm”
      Case “gif”, “jpg”
      strTemp = “img”
      Case “txt”
      strTemp = “txt”
      Case Else
      strTemp = “misc”
      End Select
      strTemp = “”
      ShowImageForType = strTemp
      End Function

      function SaveFiles(PathToSaveTo)
      ‘ Saves potentially uploaded files – any errors are in the returnvalue
      Dim Upload, fileName, fileSize, ks, i, fileKey
      Set Upload = New FreeASPUpload
      Upload.Save(PathToSaveTo)
      SaveFiles = “”
      ks = Upload.Errors.keys
      ‘ if errors ar returned by the component
      if (UBound(ks) -1) then
      SaveFiles = “”
      for each fileKey in Upload.Errors.keys
      SaveFiles = SaveFiles & Upload.Errors(fileKey)&” ”
      next
      end if
      end function
      %>

      1 Then
      ‘ if right(Request.QueryString(“dirpath”),1)=”\” then
      ‘ strPath = Request.QueryString(“dirpath”)
      ‘ else
      ‘ strPath = Request.QueryString(“dirpath”) & “\”
      ‘ end if
      ‘end If

      If Len(strPath) > 1 Then
      if right(strPath,1)=”\” then
      strPath = strPath
      else
      strPath = strPath & “\”
      end if
      end If

      ‘ on submit – save files
      if Request.ServerVariables(“REQUEST_METHOD”) = “POST” then
      Dim uploadmessage
      uploadmessage = SaveFiles(strPath)
      End If
      %>

      {#advimage_dlg.dialog_title}

      <!–
      function FileChosen(FileName)
      {
      // fill the path – textbox and show a preview of the image
      document.forms[0].elements[‘src’].value=” + FileName;
      ImageDialog.showPreviewImage(” + FileName);
      }
      //–>

      <form name=”filebrowser” method=”POST” enctype=”multipart/form-data” action=”image.asp?dirpath=” onsubmit=””>

      {#advimage_dlg.tab_general}
      {#advimage_dlg.tab_appearance}

      {#advimage_dlg.directory_browser}

      {#advimage_dlg.filename}
      {#advimage_dlg.filesize}
      <!–{#advimage_dlg.filetype}–>
      {#advimage_dlg.filemodified}

       <a href=”?dirpath=”..”>..
       
      <!– –>
       

      <tr class=”darkRow”>
       <a href=”?dirpath=”>

      <!—->

      <tr class=”darkRow”>
       <a href=”Javascript:FileChosen(”)”>

      <!—->

      {#advimage_dlg.upload}
      <input type=”hidden” name=”chosendir” value=””>

      {#advimage_dlg.preview}

      {#advimage_dlg.tab_appearance}

      {#advimage_dlg.alt}

      {#advimage_dlg.title}

      {#advimage_dlg.align}

      {#not_set}
      {#advimage_dlg.align_baseline}
      {#advimage_dlg.align_top}
      {#advimage_dlg.align_middle}
      {#advimage_dlg.align_bottom}
      {#advimage_dlg.align_texttop}
      {#advimage_dlg.align_textbottom}
      {#advimage_dlg.align_left}
      {#advimage_dlg.align_right}

      Lorem ipsum, Dolor sit amet, consectetuer adipiscing loreum ipsum edipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Loreum ipsum
      edipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
      erat volutpat.

      {#advimage_dlg.dimensions}

      x
      px

       

      {#advimage_dlg.constrain_proportions}

      {#advimage_dlg.vspace}

      {#advimage_dlg.hspace}

      {#advimage_dlg.border}

      {#class_name}

      {#advimage_dlg.style}

      <!–
      {#advimage_dlg.classes}

      –>

  8. co. Says:

    Hi,

    great and very useful piece of code! Thumbs up for your kind share with the rest of the world…

    Now for the main reason of this comment – when inserting image in TinyMCE 3.0.4.1, it returns this JS error:

    Error: uncaught exception: [Exception… “Index or size is negative or greater than the allowed amount” code: “1” nsresult: “0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)” location: “/tinymce/utils/form_utils.js Line: 98”]

    Can you take a look and try to fix it? Thank in advance

    Regards,

    co.

  9. Peter Says:

    Hi there, and thanks for a really great piece of work. It works really well and the implementation went succesful.

    My question and thoughts are:
    I want to skip the file browser and when uploading an image I want it to be placed directly in the Preview window. Is that possible?

  10. Abe Spain Says:

    Hi, the upload seems to be working – that is files are written to the server – but then the image is not written back to the tinymce window. How is this done, by clicking the insert button when an image is in the preview window?

    Also, is there a way to define where the image is uploaded to on the server, without using the directory browser in the window? I would like to define a default path and only really allow users to upload to that.

  11. precompiled Says:

    Hi Abe, Peter,

    It is correct that the file you upload is not directly shown in the preview window. Uploading and previewing are currently more or less separate processes.
    It is more or less by design, it is quite possible people want to upload a file and then choose an entirely different file to insert. I must admit though, that showing it directly after uploading would be preferable. I’ll look into it when I have the time.

    Abe: As you can read above, the upload does place the file on the server, but to preview it, you will have to click on it in the directory browser window. Insert then places the image on the page.
    Using a default path is possible. You will have to go into the ASP page though. To change the default path go to tiny_mce\plugins\aspimage\image.asp and edit it. You will find a line that says:

    Dim strPath : strPath = “/” ‘Path of directory to show, default is root

    To change the default path to “\upload\images\” for example change this to:

    Dim strPath : strPath = “/upload/images/” ‘Path of directory to show, default is images in upload

    Hope this helps…

  12. Luca Says:

    Hi Precompliled,
    we tried to use your aspimage plugin but something is not working. It gives a script error sayng “tinymce ‘is not defined’, furthermore the windows that appear is still the one of advimage, not yours.
    We tried the configuration precompiled you suggested on Friday 15 February 2008 at 09:07 and also TinyMCE 3.0.8 with the aspimage-TinyMCE-3-releaseDate-2008-01-30.
    Aspimage directory is correctly copied into the the tinymce plugins directory.

    the present configuration is

    tinyMCE.init({
    theme : “advanced”,
    mode : “textareas”,
    plugins : “aspimage”,
    // Theme options
    theme_advanced_buttons1_add : “image”
    });

    Thank you if you can help us!!!
    Luca

  13. Pat Whitlock Says:

    co. had posted a question about an error and now in my application i am receiving the same error. Has anyone got any thoughts on this or is there maybe a fix in the works to resolve it? Any help would be great! Other than that, looks like a great plugin if I could get it to work :)

    Error: uncaught exception: [Exception… “Index or size is negative or greater than the allowed amount” code: “1” nsresult: “0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)” location: “/tinymce/utils/form_utils.js Line: 98”]

  14. precompiled Says:

    Hi Pat,

    I was never able to reproduce this particular error. Can you tell me what browsertype and version you use? Maybe even send me your tinyMCE directory so I can compare it with mine? Send it to posted at precompiled.com. Thanks.

  15. precompiled Says:

    BTW all, Luca’s problem above was solved by sending him my version of tiny with the plugin, if someone has similar problems, please send me your tiny-folder at the address I mention in the comment above. I can compare that with mine to see what’s going wrong.

  16. JD Says:

    When I change the directory of the upload directory (Dim strPath : strPath ) it uploads it to that directory, but does not output the directory name in HTML, only the root directory + filename. Any help? Many thanks!!!

  17. Poland Says:

    Somehow i missed the point. Probably lost in translation :) Anyway … nice blog to visit.

    cheers, Poland.

  18. Fred Clough Says:

    Sir:

    When I insert an image with your plugin the url is not a complete (full) url. For example,

    instead of

    I have convert_urls : false in the tinyMCE.init section but that doesn’t seem to make a difference. BTW the full url was correctly written when I used the default image plugin but not with ASPimage plugin.

    I really need the full url. What am I doing wrong or what am I not doing at all?

    Thanks for your help and this really neat plugin.

    Fred

  19. Fred Clough Says:

    Sir:

    I noticed that the sample I included in the above post don’t appear. What I am talking about is that the full url should be preceeded by http:// ….

  20. precompiled Says:

    Hey Fred,

    What you say is true, the images are uploaded and given a relative path. The reason for this is that I can never be sure if the URL used for maintaining the site is the same as the one for viewing the site.
    So, for example, if the URL for maintenance is http://admin.myurl.com/ , the site itself could be on http://www.myurl.com. So inserting images based on the URL of the maintenance tool doesn’t always work.

    I can help you out though: I have made a different version of image.asp that should give you a complete URL instead of the relative URL. This is based on the URL of the site that contains tinyMCE however.
    You can download image.zip from this location: http://www.precompiled.com/~downloads/image.zip and extract the image.asp file to \tinymce\jscripts\tiny_mce\plugins\aspimage\
    That should do the trick.

  21. carole Says:

    Hello,

    I want to change Dim strPath : strPath = “/” by something like
    strPath = “//myservername/myfolder/” .

    I explain : strPath = “/” open my default folder in a server (c:/inetpub/wwwroot). But I want to go in an other folder in this server in e:/. I have tried something like “/../../../e:/myfolder”. It didn’t work.

    Is it possible ?

    Thank you

  22. precompiled Says:

    Hi Carole,

    This should be possible, I think the easiest way is to use a “virtual folder” in IIS. To accomplish this:
    – go to Internet Information Services manager,
    – go to the website and right-click it
    – choose “new…virtual directory”
    – in the “alias” field type a name like “uploads”, for example
    – click “Next” and browse to your E: disk, to the folder you want to use
    – select at least “Read”, and “Write”
    – now set the correct permissions in windows aswell (give “write” rights to IUSR_[machinename])

    This creates a virtual folder in your website, that points to a folder on your E: disk. Sort of like a shortcut. You can now write to that folder and it will write to the E: disk.

    Here is the official explanation from Microsoft in French:
    http://msdn.microsoft.com/fr-fr/library/zwk103ab.aspx

    Je crois que vous etes francais, n’est-ce pas?

  23. carole Says:

    Hi,
    Oui je suis française ;)

    It’s OK now.
    My folder was already a virtual folder, but I put e: before, or the parent directory and it was not necessary, I must put directly the virtual folder ; the good string is /../../../myvirtualfolder/

    Thank you very much

  24. Dean D Says:

    Hey all. I’m getting an error in the image.js file at line 180…

    cl = tinyMCEPopup.editor.getClasses();

    The error is…
    Error: tinyMCEPopup.editor.getClasses is not a function

    Usually, when an error such as this comes up, it’s because of a bad js file reference or a case-sesitive error. As far as I can tell though, getClasses is declared here on tiny_mce_src.js at line 1986….

    getClasses : function() { …

    I’ve tried a few different versions of tinymce but the one I’m using now is 3.0 released on 1/30/2008 in hopes that it might be the best fit for the aspimage plugin. When I used the most recent version (3.2.?) I think I got the same error but I’m not 100% sure. Regardless, I’m perfectly fine with using 3.0.

    If anyone (precomplier? :) ) has any info on this that might help me out I’d be eternally grateful. My javascript skills are limited to more rudimentary coding methods.

    Oh, I guess I should mention that this error occurs when the aspimage.asp page is called and then again when I click the “INSERT” button. Everything in between works fine. I can browse the directory and select and preview an image without incident, though that doesn’t use and js so is inconsequential.

    Thanks for reading,
    Dean

  25. fyrye Says:

    3.2.1.1 Fixed Image.js
    Not sure what other versions this will work with
    Was getting an error with Lang, and can’t find anything referring to it in aspimage’s image.asp source though it is in advimage’s image.htm source
    So it is commented out as it causes the entire function to break with undefined error.

    var ImageDialog = {
    preInit : function() {
    var url;

    tinyMCEPopup.requireLangPack();

    if (url = tinyMCEPopup.getParam("external_image_list_url"))
    document.write('');
    },

    init : function(ed) {
    var f = document.forms[0], nl = f.elements, ed = tinyMCEPopup.editor, dom = ed.dom, n = ed.selection.getNode();

    tinyMCEPopup.resizeToInnerSize();
    this.fillClassList('class_list');
    this.fillFileList('src_list', 'tinyMCEImageList');
    this.fillFileList('over_list', 'tinyMCEImageList');
    this.fillFileList('out_list', 'tinyMCEImageList');

    if (n.nodeName == 'IMG') {
    nl.src.value = dom.getAttrib(n, 'src');
    nl.width.value = dom.getAttrib(n, 'width');
    nl.height.value = dom.getAttrib(n, 'height');
    nl.alt.value = dom.getAttrib(n, 'alt');
    nl.title.value = dom.getAttrib(n, 'title');
    nl.vspace.value = this.getAttrib(n, 'vspace');
    nl.hspace.value = this.getAttrib(n, 'hspace');
    nl.border.value = this.getAttrib(n, 'border');
    selectByValue(f, 'align', this.getAttrib(n, 'align'));
    selectByValue(f, 'class_list', dom.getAttrib(n, 'class'));
    nl.style.value = dom.getAttrib(n, 'style');
    nl.id.value = dom.getAttrib(n, 'id');
    nl.dir.value = dom.getAttrib(n, 'dir');
    nl.lang.value = dom.getAttrib(n, 'lang');
    nl.usemap.value = dom.getAttrib(n, 'usemap');
    nl.longdesc.value = dom.getAttrib(n, 'longdesc');
    nl.insert.value = ed.getLang('update');
    nl.onmouseoversrc.value = dom.getAttrib(n, 'onmouseover').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1');
    nl.onmouseoutsrc.value = dom.getAttrib(n, 'onmouseout').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1');
    }
    /*
    // Setup browse button
    document.getElementById('srcbrowsercontainer').innerHTML = getBrowserHTML('srcbrowser','src','image','theme_advanced_image');
    if (isVisible('srcbrowser'))
    document.getElementById('src').style.width = '260px';

    // Setup browse button
    document.getElementById('onmouseoversrccontainer').innerHTML = getBrowserHTML('overbrowser','onmouseoversrc','image','theme_advanced_image');
    if (isVisible('overbrowser'))
    document.getElementById('onmouseoversrc').style.width = '260px';

    // Setup browse button
    document.getElementById('onmouseoutsrccontainer').innerHTML = getBrowserHTML('outbrowser','onmouseoutsrc','image','theme_advanced_image');
    if (isVisible('outbrowser'))
    document.getElementById('onmouseoutsrc').style.width = '260px';

    // Check swap image if valid data
    if (nl.onmouseoversrc.value || nl.onmouseoutsrc.value)
    this.setSwapImage(true);
    else
    this.setSwapImage(false);
    */
    // If option enabled default contrain proportions to checked
    if (ed.getParam("advimage_constrain_proportions", true))
    f.constrain.checked = true;

    this.changeAppearance();
    this.updateStyle();
    this.showPreviewImage(nl.src.value, 1);

    },

    insert : function() {
    var t = this;
    t.insertAndClose();
    },

    insertAndClose : function() {
    var ed = tinyMCEPopup.editor, f = document.forms[0], nl = f.elements, v, args = {};
    // Fixes crash in Safari
    if (tinymce.isWebKit)
    ed.getWin().focus();

    if (!ed.settings.inline_styles) {
    args = tinymce.extend(args, {
    vspace : nl.vspace.value,
    hspace : nl.hspace.value,
    border : nl.border.value,
    align : getSelectValue(f, 'align')
    });
    }
    tinymce.extend(args, {
    src : nl.src.value,
    width : nl.width.value,
    height : nl.height.value,
    alt : nl.alt.value,
    title : nl.title.value,
    'class' : getSelectValue(f, 'class_list'),
    style : nl.style.value
    //lang : nl.lang.value
    });

    ed.execCommand('mceInsertContent', false, ed.dom.createHTML('img', args, ''));
    tinyMCEPopup.close();
    },

    getAttrib : function(e, at) {
    var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2;

    if (ed.settings.inline_styles) {
    switch (at) {
    case 'align':
    if (v = dom.getStyle(e, 'float'))
    return v;

    if (v = dom.getStyle(e, 'vertical-align'))
    return v;

    break;

    case 'hspace':
    v = dom.getStyle(e, 'margin-left')
    v2 = dom.getStyle(e, 'margin-right');
    if (v && v == v2)
    return parseInt(v.replace(/[^0-9]/g, ''));

    break;

    case 'vspace':
    v = dom.getStyle(e, 'margin-top')
    v2 = dom.getStyle(e, 'margin-bottom');
    if (v && v == v2)
    return parseInt(v.replace(/[^0-9]/g, ''));

    break;

    case 'border':
    v = 0;

    tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) {
    sv = dom.getStyle(e, 'border-' + sv + '-width');

    // False or not the same as prev
    if (!sv || (sv != v && v !== 0)) {
    v = 0;
    return false;
    }

    if (sv)
    v = sv;
    });

    if (v)
    return parseInt(v.replace(/[^0-9]/g, ''));

    break;
    }
    }

    if (v = dom.getAttrib(e, at))
    return v;

    return '';
    },

    fillClassList : function(id) {
    var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;

    if (v = tinyMCEPopup.getParam('theme_advanced_styles')) {
    cl = [];

    tinymce.each(v.split(';'), function(v) {
    var p = v.split('=');

    cl.push({'title' : p[0], 'class' : p[1]});
    });
    } else
    cl = tinyMCEPopup.editor.dom.getClasses();

    if (cl.length > 0) {
    lst.options[lst.options.length] = new Option(tinyMCEPopup.getLang('not_set'), '');

    tinymce.each(cl, function(o) {
    lst.options[lst.options.length] = new Option(o.title || o['class'], o['class']);
    });
    } else
    dom.remove(dom.getParent(id, 'tr'));
    },

    fillFileList : function(id, l) {
    var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;

    l = window[l];

    if (l && l.length > 0) {
    lst.options[lst.options.length] = new Option('', '');

    tinymce.each(l, function(o) {
    lst.options[lst.options.length] = new Option(o[0], o[1]);
    });
    } else
    dom.remove(dom.getParent(id, 'tr'));
    },

    resetImageData : function() {
    var f = document.forms[0];

    f.elements.width.value = f.elements.height.value = '';
    },

    updateImageData : function(img, st) {
    var f = document.forms[0];

    if (!st) {
    f.elements.width.value = img.width;
    f.elements.height.value = img.height;
    }

    this.preloadImg = img;
    },

    changeAppearance : function() {
    var ed = tinyMCEPopup.editor, f = document.forms[0], img = document.getElementById('alignSampleImg');

    if (img) {
    if (ed.getParam('inline_styles')) {
    ed.dom.setAttrib(img, 'style', f.style.value);
    } else {
    img.align = f.align.value;
    img.border = f.border.value;
    img.hspace = f.hspace.value;
    img.vspace = f.vspace.value;
    }
    }
    },

    changeHeight : function() {
    var f = document.forms[0], tp, t = this;

    if (!f.constrain.checked || !t.preloadImg) {
    t.updateStyle();
    return;
    }

    if (f.width.value == "" || f.height.value == "")
    return;

    tp = (parseInt(f.width.value) / parseInt(t.preloadImg.width)) * t.preloadImg.height;
    f.height.value = tp.toFixed(0);
    t.updateStyle();
    },

    changeWidth : function() {
    var f = document.forms[0], tp, t = this;

    if (!f.constrain.checked || !t.preloadImg) {
    t.updateStyle();
    return;
    }

    if (f.width.value == "" || f.height.value == "")
    return;

    tp = (parseInt(f.height.value) / parseInt(t.preloadImg.height)) * t.preloadImg.width;
    f.width.value = tp.toFixed(0);
    t.updateStyle();
    },

    updateStyle : function() {
    var dom = tinyMCEPopup.dom, st, v, f = document.forms[0];

    if (tinyMCEPopup.editor.settings.inline_styles) {
    st = tinyMCEPopup.dom.parseStyle(dom.get('style').value);

    // Handle align
    v = getSelectValue(f, 'align');
    if (v) {
    if (v == 'left' || v == 'right') {
    st['float'] = v;
    delete st['vertical-align'];
    } else {
    st['vertical-align'] = v;
    delete st['float'];
    }
    } else {
    delete st['float'];
    delete st['vertical-align'];
    }

    // Handle border
    v = f.border.value;
    if (v || v == '0') {
    if (v == '0')
    st['border'] = '0';
    else
    st['border'] = v + 'px solid black';
    } else
    delete st['border'];

    // Handle hspace
    v = f.hspace.value;
    if (v) {
    delete st['margin'];
    st['margin-left'] = v + 'px';
    st['margin-right'] = v + 'px';
    } else {
    delete st['margin-left'];
    delete st['margin-right'];
    }

    // Handle vspace
    v = f.vspace.value;
    if (v) {
    delete st['margin'];
    st['margin-top'] = v + 'px';
    st['margin-bottom'] = v + 'px';
    } else {
    delete st['margin-top'];
    delete st['margin-bottom'];
    }

    // Merge
    st = tinyMCEPopup.dom.parseStyle(dom.serializeStyle(st));
    dom.get('style').value = dom.serializeStyle(st);
    }
    },

    changeMouseMove : function() {
    },

    showPreviewImage : function(u, st) {
    if (!u) {
    tinyMCEPopup.dom.setHTML('prev', '');
    return;
    }

    if (!st && tinyMCEPopup.getParam("advimage_update_dimensions_onchange", true))
    this.resetImageData();

    u = tinyMCEPopup.editor.documentBaseURI.toAbsolute(u);

    if (!st)
    tinyMCEPopup.dom.setHTML('prev', '');
    else
    tinyMCEPopup.dom.setHTML('prev', '');
    }
    };

    ImageDialog.preInit();
    tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog);

  26. fyrye Says:

    An Idea if you’re willing.
    Add Scripting.FileSystemObject’s ability to delete the files for administrators.
    As well as Binary Write for the images, so that read access can be denied on the upload folder. Where the FSO will still work for delete/upload/GetSubfolders.

    Function CheckFile(FileSpec, UseMap)
    Dim FileSpec2, fso
    FileSpec2 = FileSpec
    CheckFile = False
    If UseMap Then
    FileSpec2 = Server.MapPath(FileSpec)
    End If
    Set fso = CreateObject("Scripting.FileSystemObject")
    If fso.FileExists(FileSpec2) Then
    CheckFile = True
    End If
    Set fso = Nothing
    End Function

    Function DeleteFile(FileSpec, UseMap)
    If CheckFile(FileSpec, UseMap) Then
    Dim FSO
    Set FSO = Server.CreateObject("Scripting.FileSystemObject")
    If UseMap then
    FSO.DeleteFile(Server.MapPath(FileSpec))
    Else
    FSO.DeleteFile(FileSpec)
    End If
    Set FSO = Nothing
    Else
    Exit Function
    End If
    End Function

    Function getBinaryFile(fileSpec)
    Dim adTypeBinary, oStream
    adTypeBinary = 1
    set oStream = server.createobject("ADODB.Stream")
    oStream.Open
    oStream.Type = adTypeBinary
    oStream.LoadFromFile fileSpec
    getBinaryFile= oStream.read
    set oStream=nothing
    End Function

    • zoepie Says:

      Where do you have inserted this script?
      I can’t get it working. Upload works perfect, but deleting isn’t.
      I get no button or something like that for deleting.

  27. precompiled Says:

    Nice one,

    The rights depend on the rights of the anonymous internet user on the server (IUSR[machinename]), so they can’t be enabled or disabled for different users.
    If you are using your own authentication system (not the windows integrated one) you could check the user and display an extra column in the directory browser, with the possibility to delete if the current user is an administrator.

    In my case, I didn’t run into these problems because the plugin isn’t used for “regular” users, so I didn’t have to deny any rights.
    The biggest problem with deleting is checking to see if an image isn’t still used anywhere.
    If a user uses an image a few times, and you give them the possibillity to delete, you’d have to have a mechanism in place that checks if the image is still in use in any other posts/articles in the database.

  28. Sander Versluys Says:

    Your plugin works perfectly, so uploading and preview are fine.

    But when I click insert, nothing is being added to the textarea…

    Any ideas why this could be?

    Thanks!

  29. Sander Versluys Says:

    To expand on my previous comment, firebug reports following error:

    tinyMCEPopup.editor.getClasses is not a function
    [Break on this error] cl = tinyMCEPopup.editor.getClasses();
    image.js (regel 180)
    uncaught exception: Index or size is negative or greater than the allowed amount (NS_ERROR_DOM_INDEX_SIZE_ERR)
    [Break on this error] return elm.options[elm.selectedIndex].value;

    Grtz

  30. precompiled Says:

    Hi Sander,

    This sounds as an incompatible version of tinyMCE. I’m going to send you the version that should definately work, please check if it works for you.
    Thanks,

    Erik

  31. Andy B Says:

    The insert button is also not working for me, using your latest build and tinymce versions. I tried in IE and firefox, same error as Sander Error: tinyMCEPopup.editor.getClasses is not a function
    Source File: http://eonetlab2/eonet2/tinymce/jscripts/tiny_mce/plugins/aspimage/js/image.js
    Line: 180

    If you have a working build please send it my way! Thanks

  32. Paul Allen Says:

    Hi,

    I’m also have issues with the image not being added to the textarea once the Insert button is clicked. I’ve downloaded the most recent version of Tinymce and aspimage today.
    cheers,
    paul

  33. Mark Says:

    Also got the same error, I am using version 3.2.1.1 of TinyMCE

  34. domino Says:

    Everything works fine; upload, file nav, preview… but when I click on “INSERT” nothing happens and Firefox is not firing off an error.

    IE does show an error in “image.asp” at line 181 as “Object doesn’t support this property or method” but this error is BEFORE I click INSERT. After clicking INSERT, the same error is shown at line 97.

    I have downgraded to tiny 3.0 dated 2008-01-30 in hopes of fixing, but no joy… Anyone find a solution?

  35. james Says:

    Guys

    The fix that fyrye supplier should work. By commenting out ‘lang : nl.lang.value’ and changing ‘tinyMCEPopup.editor.getClasses();’ to ‘tinyMCEPopup.editor.dom.getClasses();’ in image.js, this should then work with the latest version of tinymce.

  36. precompiled Says:

    Hi All,

    I have a fully functional implementation based on an older version of tinyMCE available. Leave a message if you can’t get it to work with all the tips above. I’ve sent it to several people that reported problems in these comments and they implemented it successfully.

  37. James Says:

    HI, i would like a version of that please. The tip i put above seems to work great……for firefox, but not for Ie i think!

    Regards
    James

  38. Nqaba Says:

    Hi, I would also like to have a version of that please. Since i’m using version 3.0.8 of tinyMCE and firefox gives the above stated errors and IE gives no response at all when I try and insert.

  39. JuanVeron Says:

    work in Asp.net 3.5???

  40. precompiled Says:

    @JuanVeron: this works in any IIS installation that can run classic ASP. So if you run ASP.NET on IIS6 or IIS7, just be sure classic asp is also enabled, you should be able to run the plugin just fine.

  41. JameNewton Says:

    Everything works fine; upload, file nav, preview… but when I click on “INSERT” nothing happens and Firefox is not firing off an error.

    IE does show an error in “image.asp” at line 181 as “Object doesn’t support this property or method” but this error is BEFORE I click INSERT. After clicking INSERT, the same error is shown at line 97.

    I used the latest tinymce

    Why can you upload both that tinymce and aspimage file

    If possible , send to me

  42. pliz22 Says:

    Hello, I’d like to try this out, really, really badly. But I can’t. The toolbar button for aspimage never shows up. Ever. I can’t get it to appear.

    Folder structure C:/extranetv1/_tiny_mce/plugins/aspimage/

    This is my tinyMCE.init

    tinyMCE.init({
    mode : “textareas”,
    theme : “advanced”,
    plugins : “aspimage,safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager”,

    plugin_preview_width : “500”,
    plugin_preview_height : “600”,
    plugin_preview_pageurl : “../../plugins/preview/example.html”,

    // Theme options
    theme_advanced_buttons1 : “bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor”,
    theme_advanced_buttons1_add : “image”,
    theme_advanced_buttons2 : “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,code,|,insertdate,inserttime,preview”,
    theme_advanced_buttons3 : “tablecontrols,|,removeformat,|,sub,sup,|,charmap,iespell,advhr,|,print,|,ltr,rtl,|,fullscreen,|,cite,abbr,acronym”,
    theme_advanced_toolbar_location : “top”,
    theme_advanced_toolbar_align : “left”,
    theme_advanced_statusbar_location : “bottom”,
    theme_advanced_resizing : true
    });

    The image button for tinymce image appears. Nothing resembling the screenshot above. Using tinymce 3.2. Tried all the fixes above with lang and getclasses. Using FF 3 and IE 6.

    Don’t know if someone wants to help but it’d be appreciated. Thanks!

  43. pliz22 Says:

    never mind. i’m an idiot. i just had to remove advimage in the plugins list. as mentionned elsewhere on this website, to replace advimage by aspimage.
    sorry.
    sorry.
    sorry.

  44. PrinceValiant Says:

    Hi precompiled. Your plugin is great. I used to use it but get the same errors as posted. And after finding that .dom. part makes it clear, i get strange error which said again “Object needed” and even after i did everything “fyrye” said. So i decided disable debugging of scripts in browser Tools->Internet options->Advanced Tab and everything is ok for now. :D But may be u have some time to watch this bug. May be this is because of w3c non-compliant coding? By the way i’m using stupid explorer version of IExplorer 7.0.5730.11 :D . Thanks in advance.

  45. pliz22 Says:

    Well I might as well give this a go. I’ve fixed my errors, etc. I changed image.js to what fyrye has above, so now I get dialogs instead of {#advimage……} in IE. So that’s done.

    I can’t upload though. This is structure:
    c:\extranet\_images\stories\
    c:\extranet\_tiny_mce\plugins\aspimage\

    URL is
    http://localhost/extranet/
    http://localhost/extranet/_images/stories/

    In IIS, the directory security is set to Anonymous Access, IUSR.
    And the security for the folder has Internet Guest Account, Full Control.

    Image.asp has this folder: /extranet/_images/stories/
    So it shows the folder, I can browse, and click upload.
    But the file is never sent to c:\extranet\_images\stories\

    Thanks for any ideas and help and your time!

  46. Gary Says:

    Hi,

    I just downloaded your file but me being new to the world of code I do not know how to make it work on my stie, can you please send me detailed instructions on how to use it?

  47. Jeffrey Says:

    Hey precompiled,

    Thanks for this plugin. But i’m still getting some errors in IE7 one Vista.
    The dialogs are not showing the correct name I get the variables ({#advimage_dlg.filename}) and the images are not inserted.

    Can you send me the correct version of TinyMCE maybe that will help?

    Greetings,
    Jeffrey

  48. precompiled Says:

    Hi Everybody, I have updated this post. It contains the working version of TinyMCE including the AspImage plugin. I’m afraid that’s the best I can do right now as I lack the time to update the plugin again for later versions of TinyMCE.

  49. Yves Jaques Says:

    Thanks, fabulous piece of work, would have taken me days to get together. Cheers.

  50. Kelvin Jones Says:

    Is it just me, or is it that when you go to edit an image it doesn’t remember any of the previous settings, sizes or selections??

    Can someone suggest a solution if its something that everyone gets?

    Cheers all.

    • Jeffrey Says:

      Hi Kelvin Jones,

      I guess you get this “error” when you use Google Chrome?
      If you click on a image in FF or IE then you need to click om the image-tree icon. The settings will be in there.

      I have added a “function” so that you can delete images in the editor.

      I am still getting a error when I click on an image and then edit the image (inserting a different image) the knew image will be inserted in the HTML of the page and not of the editor.
      Somebody has a solution to this?

  51. Miles Says:

    Thanks for the great plugin. Mine works great but when I mouseover the image icon the title shows as “aspimage.image_desc” instead of just “image” like when the default image plugin is used.

    Yeah, I know.. picky picky.. but would really like to clean that up.

    Thanks

  52. anon Says:

    in tiny_mce/langs/en.js add this:

    aspimage:{
    image_desc:”Insert or upload image”
    },

    inbetween the spellchecker and pagebreak section

  53. vijay punde Says:

    thanks dude, now it works fine for me,
    but let me know one thing, how should make the image.asp page look fine in all browsers. Because currently, if the selected image is of bigger size, then page look disturbs from its normal look..

  54. chenlim Says:

    hi,

    if anyone is looking for security for traversing up the root folder, this is my quick solution.

    in image.asp,

    above the line –
    Dim strPath : strPath = “etc/your/path/” ‘Path of directory to show, default is root

    add the following lines –
    Dim rootPath
    rootPath = “/10_starbay/prototype/images/”

    change the line –
    Dim strPath : strPath = “etc/your/path/” ‘Path of directory to show, default is root

    to –
    Dim strPath : strPath = rootPath ‘Path of directory to show, default is root

    below the lines –
    if right(Request.QueryString(“dirpath”),1)=”/” then
    strPath = Request.QueryString(“dirpath”)
    else
    strPath = Request.QueryString(“dirpath”) & “/”
    end If

    add –
    If Len(strPath < Len(rootPath)) Then
    strPath = rootPath
    End If

    with this, user using the aspimage will not be able to traverse anywhere up into your base root folder.

    chen lim, toh

    • David Toohey Says:

      This is great, thanks Chen Lim.

      Just one mistake it seems on that last add… had to change the brackets in the if to be:

      If Len(strPath) < Len(rootPath) Then
      strPath = rootPath
      End If

      What I'm also wondering, is if from the TinyMCE the rootPath can be passed in (I use jQuery)… so when it's used by different users the root might be: "User/1/", "User/2/" etc?

      Is there a relatively easy way to modify this to do that?

  55. Brian Snyder Says:

    This is absolutely fantastic. Thank you!!!!

  56. Paolo MACOR Says:

    Amazing! Thank you guys.
    Anyone knows if is there a way to invoke this plugin as standalone, so we can use it in TinyMCE and outside it to preserve the same interface while uploading files?

    • precompiled Says:

      Hi Paolo,

      That is not very easy, because it’s pretty much built on the TinyMCE ‘framework’ so to speak. All the GUI and translations are arranged by tinyMCE.
      I have a standalone version, but that has a different look and feel, but let me know if you’d like to see that.

  57. Paolo MACOR Says:

    Hello,
    thank you for your reply and yes, I’d like to have a look at your standalone version if you can.
    As you say I had managed to fire-up the plugin from an external call, but all translations where gone. That’s why I’m asking you to let me have a seen. Many, many thank you again.

  58. Joe Says:

    Your work has saved me alot of time, much appreciated. I have look around this page and the Moxiecode forums but I can’t find a solution to my problem. If anyone can help it will make my day.

    I am having problems, not sure if I’m alone though, with image parameters missing when right clicking on an image. Say that I add an image with aspimage. If I then rightclick on that image and choose Insert/edit image I sometimes get the image attributes but sometimes everything is blank. This is very annoying and makes changeing image dimensions a hazzle. Since it seems that this function uses advimage I’m sure it is not an aspimage issue but is there a solution to this problem?

  59. Ralph Says:

    Awesome, thanks. Saved me a lot of trouble, this.

    Works fine for me.

    Specified my own upload/insert path on line 68 of image.asp, then commented out the next 7 lines to prevent changing of location.

    The image html that is inserted though is of the form src=”../../location/etc” – I was wondering how I can alter that to be an absolute path, as my editor won’t be in the same location as the text it generates when it is displayed. So I’d prefer src=”/location/etc”. I can hack the resulting text to alter them, but it doesn’t feel ideal.

    Also, you insert ” /> for the end of image tags, again, I’d like to alter this to match my site’s encoding – any ideas how I’d do this?

    Thanks again, well done!

    Ralph

    • Ralph Says:

      Hi also, sorry to make two posts, in IE 8.0.6 I also get

      Webpage error details:

      User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727)
      Timestamp: Wed, 19 May 2010 13:21:36 UTC

      Message: Object doesn’t support this property or method
      Line: 2
      Char: 1
      Code: 0
      URI: http://%5Bmyurl%5D/editor/langs/en.js

      Any ideas?

      Thanks,

      Ralph

  60. cihip Says:

    ASPimage plugin for tinyMCE post thanx;)

  61. jigar Says:

    oh god ! too many errors , not interested at all time wasting

  62. David Toohey Says:

    Works great first time!

    I have the jQuery version of TinyMCE from the website and took the code you have from the plugins folder and added it, changed to aspimage and that was it!

    The only question I have is can a setting be applied to control the root folder for it? I’d like to be able to control the root with something in the init like:

    aspimage_rootpath : “/Images”

  63. David Toohey Says:

    Does anyone that’s used this know how to control the root folder for each implementation of it in the TinyMCE?

    Unfortunately this looks like a major let down and without this basic level of security it prevents me from being able to use it at all. :-(

  64. Chen Lim Says:

    Hi David,

    Try my solution from https://precompiled.wordpress.com/2008/02/02/the-all-new-aspimage-plugin-for-tinymce/#comment-207

    Follow the instructions, you can define a root folder… then there is no way to travel up beyond the root folder that you have defined.

  65. Ralpharama Says:

    @David T, have you tried, in image.asp? I needed to set the folder, and not allow them to browse around to other levels:

    1 Then
    ‘ if right(Request.QueryString(“dirpath”),1)=”/” then
    ‘ strPath = Request.QueryString(“dirpath”)
    ‘ else
    ‘ strPath = Request.QueryString(“dirpath”) & “/”
    ‘ end if
    ‘end If
    ‘ on submit – save files
    if Request.ServerVariables(“REQUEST_METHOD”) = “POST” then
    Dim uploadmessage
    uploadmessage = SaveFiles(Server.MapPath(strPath))
    End If
    %>

  66. Ralpharama Says:

    Sorry, that was mangled:

    ‘ Now to the Runtime code:
    Dim strPath : strPath = “/images2/” ‘Path of directory to show, default is root
    ‘ RC: Commented out to prevent uploads to any other area of the server!
    ‘If Len(Request.QueryString(“dirpath”)) &rt; 1 Then
    ‘ if right(Request.QueryString(“dirpath”),1)=”/” then
    ‘ strPath = Request.QueryString(“dirpath”)
    ‘ else
    ‘ strPath = Request.QueryString(“dirpath”) & “/”
    ‘ end if
    ‘end If
    ‘ on submit – save files
    if Request.ServerVariables(“REQUEST_METHOD”) = “POST” then
    Dim uploadmessage
    uploadmessage = SaveFiles(Server.MapPath(strPath))
    End If

  67. David Toohey Says:

    Thanks both of you for this… certainly will improve it.

    I had been hoping to identify the path in the call though, rather than hardcoded… as the path will depend on the user rather than the site. Would that be an “easy” change?

    (please bear with this non-programmer!)

  68. kavi Says:

    Nice one, thanks for the info!

  69. David Toohey Says:

    Does anyone know how the jQuery implementation of TinyMCE could pass through a variable that’s used in image.asp?

    Really trying to get some control happening over the root folder.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: