SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast Dunkel's Avatar
    Join Date
    Jun 2007
    Location
    Mexico
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Insert a node in the cursor position

    hello again, I'm looking for some help to make a function which helps me to insert a DOM node where my cursor is positioned i got one but it gets me an error in IE

    this is the function i have:

    Code JavaScript:
    function insertNodeAtSelection(win, insertNode)
    {
    	var sel=null;
    	// get current selection
      	sel = win.getSelection();
    	// get the first range of the selection
    	// (there's almost always only one range)
    	var range = sel.getRangeAt(0);
     
    	// deselect everything
    	sel.removeAllRanges();
     
    	// remove content of current selection from document
    	range.deleteContents();
     
    	// get location of current selection
    	var container = range.startContainer;
    	var pos = range.startOffset;
     
    	// make a new range for the new selection
    	range=document.createRange();
     
    	if (container.nodeType==3 && insertNode.nodeType==3) {
     
    		// if we insert text in a textnode, do optimized insertion
    		container.insertData(pos, insertNode.nodeValue);
     
    		// put cursor after inserted text
    		range.setEnd(container, pos+insertNode.length);
    		range.setStart(container, pos+insertNode.length);
     
    	} else {
     
     
    		var afterNode;
    		if (container.nodeType==3) {
     
    			// when inserting into a textnode
    			// we create 2 new textnodes
    			// and put the insertNode in between
     
    			var textNode = container;
    			container = textNode.parentNode;
    			var text = textNode.nodeValue;
     
    			// text before the split
    			var textBefore = text.substr(0,pos);
    			// text after the split
    			var textAfter = text.substr(pos);
     
    			var beforeNode = document.createTextNode(textBefore);
    			afterNode = document.createTextNode(textAfter);
     
    			// insert the 3 new nodes before the old one
    			container.insertBefore(afterNode, textNode);
    			container.insertBefore(insertNode, afterNode);
    			container.insertBefore(beforeNode, insertNode);
     
    			// remove the old node
    			container.removeChild(textNode);
     
    		} else {
     
    			// else simply insert the node
    			afterNode = container.childNodes[pos];
    			container.insertBefore(insertNode, afterNode);
    		}
     
    		range.setEnd(afterNode, 0);
    		range.setStart(afterNode, 0);
    	}
     
    	sel.addRange(range);
    };

    the parameter win is my object in this case an iframe and the nothe is a node object in this case an IMG

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is this for? You can easily create an object and absolutely position it where you click but from what i can see, your wanting to do something else.

    could you explain it further?


  3. #3
    SitePoint Enthusiast Dunkel's Avatar
    Join Date
    Jun 2007
    Location
    Mexico
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    What is this for? You can easily create an object and absolutely position it where you click but from what i can see, your wanting to do something else.

    could you explain it further?
    im creating my own wysiwyg editor, and im working on the image insert part, so i was trying to use the execCommand for inserting images but it doesn't work in firefox at least not the user interface, but even if it works, i want my own interface so i'm working on it.

    www.codeteam.net/dunkel/wysiwyg

    there u can see what i am doing

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm confused ?! Firefox is my primary browser, and I went to the above url, and upon clicking the image button, it inserts the Google logo and shows a Green window.

    Thinking there was something wrong with that, I went to see what Internet Explorer does, and I get even less. When I click the image button, the page just refreshes.

    Is there something even worse going wrong here?


  5. #5
    SitePoint Enthusiast Dunkel's Avatar
    Join Date
    Jun 2007
    Location
    Mexico
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    I'm confused ?! Firefox is my primary browser, and I went to the above url, and upon clicking the image button, it inserts the Google logo and shows a Green window.

    Thinking there was something wrong with that, I went to see what Internet Explorer does, and I get even less. When I click the image button, the page just refreshes.

    Is there something even worse going wrong here?
    yes the problem is IE the function getSelection doesnt work or i dont know how to use it :S

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have got to start reading questions properly, sorry.

    ok, you may need to play about with this, but it will give you an idea.

    Code:
    function imgIt(url)
    {
        if(navigator.userAgent.indexOf('MSIE') == -1) {
            ieimgIt(url);
            return;
        }
    
        iframe = document.getElementById('iView');
      
          pic = iframe.contentWindow.document.createElement("img");
          pic.setAttribute("src", url);
          pic.setAttribute("border", "0");
      
          insertNodeAtSelection(iframe.contentWindow, pic);
        iframe.contentWindow.focus();
    }
    function ieimgIt(url) {
        var iframe = document.getElementById('iView');
        var args = '"  id="1234567890';
        var sel = iframe.contentWindow.document.createRange();
            sel.execCommand('InsertImage', false, args);
        var img = iframe.contentWindow.document.getElementById('1234567890');
            img.src = url;
    }


  7. #7
    SitePoint Enthusiast Dunkel's Avatar
    Join Date
    Jun 2007
    Location
    Mexico
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you gRoberts i really appreciate ur help now it works... i just made some corrections to the code but is ok here is the code taht works for me.

    Code JavaScript:
    function imgIt(url)
    {
     
    	iframe = document.getElementById('iView');
     
    	if(navigator.userAgent.indexOf('MSIE') > 0) {
            ieimgIt(url,iframe);
     
            return false;
        }
     
      	pic = iframe.contentWindow.document.createElement("img");
      	pic.setAttribute("src", url);
      	pic.setAttribute("border", "1");
            insertNodeAtSelection(iframe.contentWindow, pic);
    	iframe.contentWindow.focus();
    }
     
    function ieimgIt(url,iframe) {
        var args = '"  id="1234567890';
     
            iframe.contentWindow.document.execCommand('InsertImage', false, args);
        var img = iframe.contentWindow.document.getElementById('1234567890');
            img.src = url;
    }


Bookmarks

Posting Permissions

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