Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts

    object.execCommand - InsertImage's properties

    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);

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    *this message will self destruct in n-seconds*

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Did you try: object.setAttribute('class','myClass')

  • #4
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    *this message will self destruct in n-seconds*

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.
    Code:
    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>

  • #6
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv
    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

  • #7
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Last edited by codegoboom; 08-30-2004 at 11:25 AM.
    *this message will self destruct in n-seconds*

  • #8
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    	range = window.opener.document.selection.createRange();
    	
    	var newHTML = '<img src="' + imagePath + '" class="classypoopoo">';
    	
    	replaceText = window.opener.document.createTextNode(newHTML);
    	range.insertNode(replaceText);

  • #9
    New to the CF scene
    Join Date
    Sep 2004
    Location
    Slovenia
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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?!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •