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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    text editor like wiki's sandbox

    Hi,
    I was trying to implement a kind of text editor like Wikipedia's Sandbox but mine would just consists of the html tags so that when user submit a form, the form will comes out nicely with the formatting and all.

    Problem is, it fails when i want to add a tag into the next line. It will just keeps on inserting the tags to where i left off.

    Here's my script:

    <script type="text/javascript" language="javascript">
    var len=0;
    var front = "", back = "";
    function insertTags(opentag, closetag, cursor)
    {
    myField = document.form.text;

    this.opentag = opentag;
    this.closetag = closetag;
    this.cursor = cursor;

    front += opentag;
    back = closetag+ back;
    myField.value = front+back;

    myField.setSelectionRange(front.length,front.length);
    myField.focus();


    }
    </script></head>

    <body>
    <form id="form" name="form">
    <p><textarea id="text" name="text" cols="40" rows="5"></textarea></p>
    <p><a href="#" onclick="insertTags('<sub>', '</sub>', ''); return false;">Subscript</a></p>
    <p><a href="#" onclick="insertTags('<p>', '</p>', ''); return false;">Paragraph</a></p>
    </form>
    </body></html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I got it wrong! Sorry!
    Last edited by Philip M; 02-14-2007 at 07:38 PM. Reason: Found a glitch!

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Another problem to my script

    Another problem is, if i delete the text in the text area and click on any links to add the tags, the old text will spruce back up! What's up with that? Any ideas?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function checkCursor(zxcid,zxctag){
     var zxcobj=document.getElementById(zxcid)
     var zxcbegin=0;
     if (document.selection){
      zxcobj.focus();
      var zxcsel=document.selection.createRange();
      if(zxcsel.text==''){
       zxcsel.text='µµµ';
       dummy=zxcobj.createTextRange();
       dummy.findText('µµµ');
       dummy.select();
       zxcbegin=zxcobj.value.indexOf('µµµ');
       document.selection.clear();
       zxcAddTag(zxcobj,zxcbegin,zxcbegin,zxctag)
       zxcobj.focus();
      }
      if(zxcsel.text!=''){
       var zxclen=zxcsel.text.length
       zxcsel.text='µµµ'+zxcsel.text;
       zxcdummy=zxcobj.createTextRange();
       zxcdummy.findText('µµµ');
       zxcdummy.select();
       zxcdummy.scrollIntoView();
       zxcbegin=zxcobj.value.indexOf('µµµ');
       document.selection.clear();
       if(zxcbegin+1==zxcbegin+zxclen){ zxcAddTag(zxcobj,zxcbegin,zxcbegin,zxctag); }
       else{ zxcAddTag(zxcobj,zxcbegin,zxcbegin+zxclen,zxctag); }
      }
     }
     else if (zxcobj.selectionStart||zxcobj.selectionStart=='0') {
      zxcbegin=zxcobj.selectionStart;
      var zxcend=zxcobj.selectionEnd;
      if(zxcend==zxcbegin){ zxcAddTag(zxcobj,(zxcbegin),zxcbegin,zxctag); }
      if(zxcend!=zxcbegin){
       if(zxcend==zxcbegin+1){ zxcAddTag(zxcobj,zxcbegin,zxcbegin,zxctag); }
       else{ zxcAddTag(zxcobj,zxcbegin,zxcend,zxctag); }
      }
     }
    }
    
    function zxcAddTag(zxcobj,zxcsrt,zxcend,zxctag){
     var zxcval=zxcobj.value;
     zxctxt=zxcval.substring(zxcsrt,zxcend);
     zxcsrt=zxcval.substring(0,zxcsrt);
     zxcend=zxcval.substring(zxcend);
     zxcobj.value=zxcsrt+zxctag+zxctxt+zxctag.replace('<','</')+zxcend;
    }
    
    //-->
    </script>
    
    </head>
    <body>
    <textarea id="txt" value="abcdefgdefghijklmno"  >abcdefgdefghijklmno</textarea><br>
    <input type="button" name="" value="<p> Tag" onclick="checkCursor('txt','<p>');">
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks vwphillips, yours work perfectly fine... but not quite what im looking for.. coz its just adding the open and close tag right next to each other.

    inserting the 1st tag: <open1><close1>
    inserting the 2nd tag: <open1><close1><open2><close2>
    inserting the 3rd tag: <open1><close1><open2><close2><open3><close3>

    If you see wiki's sandbox, here's how it adds the open and close tag when button/link is clicked:

    inserting the 1st tag: <open1><close1>
    inserting the 2nd tag: <open1><open2><close2><close1>
    inserting the 3rd tag: <open1><open2><open3><close3><close2><close1>

    Also, the cursor returns in between of the most recently added tag, say for example, <open1><open2><open3>cursor here<close3><close2><close1> so that user can just type in their text easily.

    I get all that working but mine wont just wrap around! and there's the problem with previously entered text. help any1?

  • #6
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey hey i was too quick to judge. Your code works flawlessly, vwphillips. I just have to do a little modification to make it works as I want it to be. Thank you!

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    It woud be useful to see your finished script(so I can see what you needed to change).
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the full script. I left out the IE part tho. Will include that later.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <script language="JavaScript" type="text/javascript">
    
    function checkCursor(id,tag,tag2)
    {
    	var obj=document.getElementById(id)
    	var begin=0;
    	
    	if (obj.selectionStart||obj.selectionStart=='0') 
    	{
    		begin=obj.selectionStart;
    		var end=obj.selectionEnd;
    		if(end==begin)
    		{ 
    			AddTag(obj,begin,begin,tag,tag2); 
    		}
    		if(end!=begin) 
    		{
    			if(end==begin+1)
    			{ 
    				AddTag2(obj,begin,begin,tag,tag2); 
    			}
    			else 
    			{ 
    				AddTag2(obj,begin,end,tag,tag2); 
    			}
    		}
    	}
    }
    
    function AddTag(obj,srt,end,tag,tag2)
    {
    	var val=obj.value;
    	txt=val.substring(srt,end);
    	srt=val.substring(0,srt);
    	end=val.substring(end);
    	obj.value=srt+tag+txt+tag2+end;
    	var val2 = srt+tag+txt;
    	obj.setSelectionRange(val2.length, val2.length);
    	obj.focus();
    }
    
    function AddTag2(obj,srt,end,tag,tag2)
    {
    	var val=obj.value;
    	txt=val.substring(srt,end);
    	srt=val.substring(0,srt);
    	end=val.substring(end);
    	obj.value=srt+tag+txt+tag2+end;
    	obj.focus();
    }
    </script>
    
    </head>
    <body>
    <textarea id="txt" cols="80" rows="24" ></textarea><br/>
    <input type="button" name="" value="<p> Tag" onclick="checkCursor('txt','<p>', '</p>');">
    <input type="button" name="" value="<sub> Tag" onclick="checkCursor('txt','<sub>', '</sub>');">
    <input type="button" name="" value="<code> Tag" onclick="checkCursor('txt','<code>', '</code>');">
    <input type="button" name="" value="<a> Tag" onclick="checkCursor('txt','<a href=>', '</a>');">
    <input type="button" name="" value="<br> Tag" onclick="checkCursor('txt','', '</ br>');">
    
    </body>
    </html>


  •  

    Posting Permissions

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