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 4 of 4
  1. #1
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,073
    Thanks
    11
    Thanked 96 Times in 94 Posts

    inserting text in Rich Text Editor via DOM

    Hi , I am messing with the Rich Text Editor from http://www.kevinroth.com/rte/demo.htm

    its does most of the things I want , however I want to be able to add a string of text at the current cursor position , in IE
    obj.document.execCommand('paste', false, '{whatever}');
    works (as does insertHTML) but neither work in Moz for, I gather, security reasons (so perhaps may not even work in IE in SP2?), so how would I go about inserting a string of text in the editor ?

    the function I have that gets the cursor position or range is ..
    Code:
    function add_template(rte,string_text){
    	var oRTE;
    	//get current selected range
    	if (document.all) {
    		oRTE = frames[rte];
    		var selection = oRTE.document.selection; 
    		if (selection != null) {
    			rng = selection.createRange();
    		}
    	} else {
    		oRTE = document.getElementById(rte).contentWindow;
    		var selection = oRTE.getSelection();
    		rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
    	}
    	//works in IE//
    	oRTE.document.execCommand('paste', false,string_text);
    }
    so is there a way / what is the way of perhaps adding the text via the DOM ?
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    Code:
    <script type="text/javascript">
    function setCaret (textObj) {
      if (textObj.createTextRange) {
        textObj.caretPos = document.selection.createRange().duplicate();
      }
    }
    function insertAtCaret (textObj, textFeildValue) {
      if(document.all){  
         if (textObj.createTextRange && textObj.caretPos) {
           var caretPos = textObj.caretPos;
           caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?textFeildValue + ' ' : textFeildValue;
         }else{
           textObj.value  = textFeildValue;
         }
      }else{
        if(textObj.setSelectionRange){
          var rangeStart = textObj.selectionStart;
          var rangeEnd   = textObj.selectionEnd;
          var tempStr1 = textObj.value.substring(0,rangeStart);
          var tempStr2 = textObj.value.substring(rangeEnd);
          textObj.value = tempStr1 + textFeildValue + tempStr2;
        }else{
          alert("This version of Mozilla based browser does not support setSelectionRange");
        }
      }
    }
    
    </script>
    
      <form id="form1" action="" onsubmit="" method="post" enctype="text/plain"> 
      <p>
         <textarea name="tarea" rows="" cols="" style="width:300px;height:120px;"
                   onselect="setCaret(this);"
                   onclick="setCaret(this);"
                   onkeyup="setCaret(this);" >
         Click in this textObj anywhere and then press the button below.
         It will insert the text at the caret position.</textarea>
         <br/><br/>
         <input type="text" name="textfield" style="width:220px;" value="Mozilla 1.4"/>
         <br/>
         <input type="button" value="insert at caret"
                onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/>
        </p>
       </form>
    .....Willy

  • #3
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,073
    Thanks
    11
    Thanked 96 Times in 94 Posts
    Hey Willy , cheers for that ,

    You have solved one of my problems as I also have to have a plain text-area based version which your code works a beaut for !

    but for the RTE itself the working area is actually an iframe not a textarea so the code does not work for that.

    still head scratching
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)

  • #4
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,073
    Thanks
    11
    Thanked 96 Times in 94 Posts
    aha solved ! , googled around and found another revision of the RTE & this works ..

    ....
    var tpl = document.createTextNode(strText);
    rng.deleteContents();
    rng.insertNode(tpl);

    so now its working in both ! , cheers again
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)


  •  

    Posting Permissions

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