The all new ASPimage plugin for tinyMCE

By precompiled

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.

Tags: , , ,

49 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

  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.

Leave a Reply