...

View Full Version : object.execCommand - InsertImage's properties



circusbred
08-30-2004, 07:34 AM
Okay, essentially I'm using object.execCommand InsertImage. The image is inserted fine and that works, but I would also like to edit that image's properties (namely "class").

I'd asume it would use the property "className" but I'm not sure how to implement it.

object.execCommand('InsertImage', false, imgPath);

codegoboom
08-30-2004, 07:45 AM
I'd think you'd have to find that image object in the document, after it is inserted (by comparing the src property to the imgPath parameter), and then add a className property to it...

Willy Duitt
08-30-2004, 08:09 AM
Did you try: object.setAttribute('class','myClass')

codegoboom
08-30-2004, 08:23 AM
execCommand Method applies to:
document, controlRange, TextRange

so, that probably wouldn't work...

... you might even need to store all images into a global array, as they are added, and reference them from that, because more than one may have the same src.

glenngv
08-30-2004, 08:40 AM
Is there any compelling reason you're using IE proprietary method? Maybe you find the InsertImage dialog box that allows browsing for local files handy?

This can be done cross-browser. Try this simple page.


function showImage(objFile, targetId){
if (objFile.value!=''){
document.getElementById(targetId).innerHTML = '<img src="file:///'+objFile.value.replace(/\//g, '/')+'" class="myclass" />';
}
else {
document.getElementById(targetId).innerHTML = '';
}
}
...
<input type="file" name="file1" onchange="showImage(this,'myimg')"/><span id="myimg"></span>

circusbred
08-30-2004, 10:27 AM
Is there any compelling reason you're using IE proprietary method? Maybe you find the InsertImage dialog box that allows browsing for local files handy?

This can be done cross-browser. Try this simple page.
It works with both Mozilla 1.3b + and IE. In fact, Mozilla uses the exact same method in their own RTE. I'm not using the dialog box either. I will need to add multiple images into the page at locations that are user specified.

I did try to compare the imgPath to the src property to no avail. Could I possibly check if class was set, and if it wasnt, set it to the specified value?

PS: Forgive my JS "noobness", as this is my first serious venture into JS & DHTML other than a menu :)

codegoboom
08-30-2004, 11:23 AM
yeah, it all depends... if the images can be inserted anywhere, and moved around, and have the same src, and have one of various classnames, you'll need to keep track of each image object, somehow, unless all of them are going to be assigned the same class...

src can also be tricky, in that you can set it as a virtual path, but the full path is returned from the property...

circusbred
08-30-2004, 06:41 PM
Very tricky indeed, which is why I've decided its probably better to move on. However, this leads to another question:
I'm essentially just trying to insert the HTML now, rather than the image.


range = window.opener.document.selection.createRange();

var newHTML = '<img src="' + imagePath + '" class="classypoopoo">';

replaceText = window.opener.document.createTextNode(newHTML);
range.insertNode(replaceText);

bryden
09-15-2004, 08:52 AM
Well, I have the same problem. I'm working on a WYSIWYG web editor and I want to add upload image option. It should upload chosen image to the webserver, resize it and make thumbnail.
When this is done, it should insert thumbnail into editor and make link to big image.

I insert with:
execCommand('InsertImage', false, imagePath)


But I am unable to find the way to create link to that image. In IE it wors fine, because IE automaticaly selects inserted image. Firefox, however, inserts the image but does not select it.



So does anybody have solution how to select inserted image - that is - how to add id="xyx" to inserted image?!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum