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 :)
Seriously though, if there still are people with problems getting it to work, leave a comment or send me an e-mail.
Tags: asp, aspimage, classic asp, tinyMCE
the precompiled blog 
Tuesday 12 February 2008 at 11:29 |
Hi,
I’ve just downloaded this scipt but how i could insert the plugin into TinyMCE ?
Tuesday 12 February 2008 at 13:06 |
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
Friday 15 February 2008 at 02:07 |
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?
Friday 15 February 2008 at 09:07 |
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.
Friday 15 February 2008 at 13:15 |
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!
Saturday 16 February 2008 at 09:38 |
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.
Monday 18 February 2008 at 21:33 |
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.
Saturday 16 May 2009 at 12:46 |
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}
–>
Wednesday 12 March 2008 at 01:38 |
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.
Wednesday 12 March 2008 at 17:05 |
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?
Wednesday 7 May 2008 at 19:03 |
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.
Wednesday 7 May 2008 at 21:12 |
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…
Thursday 29 May 2008 at 14:31 |
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
Wednesday 4 June 2008 at 14:35 |
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”]
Wednesday 4 June 2008 at 16:57 |
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.
Wednesday 4 June 2008 at 16:59 |
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.
Friday 6 June 2008 at 16:09 |
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!!!
Thursday 19 June 2008 at 03:21 |
Somehow i missed the point. Probably lost in translation :) Anyway … nice blog to visit.
cheers, Poland.
Friday 8 August 2008 at 15:28 |
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
Friday 8 August 2008 at 15:56 |
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:// ….
Saturday 9 August 2008 at 10:55 |
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.
Thursday 28 August 2008 at 11:51 |
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
Thursday 28 August 2008 at 13:53 |
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?
Thursday 28 August 2008 at 15:10 |
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
Wednesday 22 October 2008 at 16:58 |
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
Friday 5 December 2008 at 23:54 |
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);
Saturday 6 December 2008 at 00:10 |
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
Thursday 31 December 2009 at 17:04 |
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.
Saturday 6 December 2008 at 10:33 |
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.
Tuesday 20 January 2009 at 10:25 |
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!
Tuesday 20 January 2009 at 11:28 |
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
Tuesday 20 January 2009 at 19:01 |
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
Tuesday 27 January 2009 at 20:59 |
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
Wednesday 28 January 2009 at 14:59 |
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
Tuesday 10 February 2009 at 22:50 |
Also got the same error, I am using version 3.2.1.1 of TinyMCE
Wednesday 11 February 2009 at 18:46 |
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?
Thursday 5 March 2009 at 16:58 |
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.
Thursday 5 March 2009 at 18:09 |
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.
Thursday 12 March 2009 at 12:35 |
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
Tuesday 17 March 2009 at 13:29 |
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.
Saturday 28 March 2009 at 13:00 |
work in Asp.net 3.5???
Sunday 29 March 2009 at 11:05 |
@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.
Wednesday 22 April 2009 at 12:25 |
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
Wednesday 22 April 2009 at 18:40 |
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!
Wednesday 22 April 2009 at 18:48 |
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.
Monday 27 April 2009 at 02:18 |
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.
Friday 8 May 2009 at 18:49 |
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!
Tuesday 19 May 2009 at 13:49 |
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?
Wednesday 20 May 2009 at 11:01 |
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
Wednesday 20 May 2009 at 18:33 |
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.
Tuesday 5 January 2010 at 14:50 |
Thanks, fabulous piece of work, would have taken me days to get together. Cheers.
Wednesday 13 January 2010 at 15:04 |
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.
Friday 29 January 2010 at 10:43 |
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?
Thursday 14 January 2010 at 09:02 |
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
Wednesday 3 February 2010 at 02:26 |
in tiny_mce/langs/en.js add this:
aspimage:{
image_desc:”Insert or upload image”
},
inbetween the spellchecker and pagebreak section
Saturday 20 March 2010 at 08:37 |
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..
Saturday 20 March 2010 at 09:03 |
Hi Vijay,
Try setting the width and/or height attribute of the image tag to a specific value.
Monday 5 April 2010 at 05:26 |
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
Tuesday 7 June 2011 at 10:45 |
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?
Wednesday 14 April 2010 at 20:28 |
This is absolutely fantastic. Thank you!!!!
Thursday 22 April 2010 at 23:03 |
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?
Friday 23 April 2010 at 07:13 |
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.
Wednesday 28 April 2010 at 06:48 |
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.
Thursday 6 May 2010 at 19:26 |
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?
Wednesday 19 May 2010 at 10:53 |
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
Wednesday 19 May 2010 at 14:22 |
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
Sunday 18 July 2010 at 10:09 |
ASPimage plugin for tinyMCE post thanx;)
Tuesday 24 August 2010 at 10:49 |
oh god ! too many errors , not interested at all time wasting
Tuesday 28 September 2010 at 11:26 |
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”
Friday 1 October 2010 at 06:48 |
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. :-(
Friday 1 October 2010 at 11:02 |
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.
Friday 1 October 2010 at 14:33 |
@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
%>
Friday 1 October 2010 at 14:34 |
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
Friday 1 October 2010 at 14:45 |
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!)
Thursday 3 March 2011 at 08:44 |
Nice one, thanks for the info!
Tuesday 7 June 2011 at 19:01 |
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.