1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Popular WYSIWYG scripts too complex

Discussion in 'JavaScript' started by rsltech, Sep 7, 2007.

  1. #1
    I have been researching many of the textarea wysiwyg editors out there and they are too complex for the people who will be using my site. So I guess I am going to have to make my own. I found some info for inserting the tags in the textbox in another thread, but can anyone tell me the simplest way to actively show/edit like a wysiwyg so my customers don't get confused by all the code.

    Thanks
     
    rsltech, Sep 7, 2007 IP
  2. Close

    Close Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Have you tried SPAW?

    It allows you to disable text editing features you don't want easily.

    Not sure if this is what you wanted :S Hope it is
     
    Close, Sep 7, 2007 IP
  3. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	function wrapText(openTag,closeTag){ 
    
    		var workArea = document.getElementById('subjectMatter');
    		if (!document.selection)
    			{
    		 	 var workText = workArea.value.substring(workArea.selectionStart,workArea.selectionEnd);
    		 	 if (workText != "")
    				{
    				 workArea.value = workArea.value.replace(workText,openTag+workText+closeTag);
    				 workArea.selectionStart = "";
    				 workArea.selectionEnd = "";
    				}
    			}
    		else 	{ 
    			 var workText = document.selection.createRange();
    			 if (workText.text != "")
    				{
    				 workText.text = openTag+workText.text+closeTag;
    				 document.selection.empty();
    				}
    			}
    		xfer();
    	} 
    
    	function undoSelection(){
    
    		var workArea = document.getElementById('subjectMatter');
    		if (!document.selection)
    			{
    			 var workText = workArea.value.substring(workArea.selectionStart,workArea.selectionEnd)
    			 var tmp = workText.replace(/<[bui]+>/gi,'').replace(/<\/[bui]>/gi,'');
    			 workArea.value = workArea.value.replace(workText,tmp)
    			 workArea.selectionStart = "";
    			 workArea.selectionEnd = "";
    			}
    		else 	{
    	  		 var workText = document.selection.createRange();
    			 var tmp = workText.text;	
    			 tmp = tmp.replace(/<[bui]+>/gi,'').replace(/<\/[bui]>/gi,'');
    			 workText.text = ""+tmp+"";
    			 document.selection.empty();
    			}
    		xfer();
    	}
    	
    	function undoAll(){
    
    		var workArea = document.getElementById('subjectMatter');
    		workArea.value = workArea.value.replace(/<[bui]+>/gi,'').replace(/<\/[bui]>/gi,'');
    		xfer();
    	}	
    
    	function xfer(){
    		
    		document.getElementById('wysiwyg').innerHTML = document.getElementById('subjectMatter').value.replace(/\n/g,"<br>").replace(/\s/g,"&nbsp;");
    	}	
    
    </script>
    <style type="text/css">
    
    	body {background-color:#f0fff0;margin-top:60px}	
    	textarea {padding:8px;overflow:auto;margin-bottom:8px}
    	input {font-family:tahoma;font-size:10pt;font-weight:bold;margin-right:7px;margin-top:5px}
    	form {width:550px;margin:auto}
    	#wysiwyg {width:415px;height:180px;overflow:auto;margin-left:auto;margin-right:auto;margin-bottom:25px;font-family:Myriad Roman;font-size:11pt;padding:8px;background-color:#ffffff;border:1px solid black}
    	#subjectMatter {display:block;margin:auto;font-family:Myriad Roman;font-size:11pt}
    	
    </style>
    </head>
    	<body>
    		<div id="wysiwyg"></div>
    
    		<form action="" method="post">
    		   <fieldset style="border:none">
    	
    			<textarea id="subjectMatter" name="subjectMatter" cols="55" rows="10" wrap="off">Edit this text. 
    The rain in Spain falls mainly on the plain.</textarea> 		
    		
    			<div style="width:100%;text-align:center">
    				<input type="button" value="Boldface" onclick="wrapText('<b>','</b>')" >
    				<input type="button" value="Italic" onclick="wrapText('<i>','</i>')">
    				<input type="button" value="Underline" onclick="wrapText('<u>','</u>')">
    				<input type="button" value='Un-Do Selected' onclick="undoSelection()">
    				<input type="button" value='Un-Do All' onclick="undoAll()">
    			</div>
    
    			<input type="button" value="As Is" onclick="xfer()" style="width:75px;display:block;margin-left:auto;margin-right:auto;margin-top:8px">
    
    			<input type="submit" value="Submit" style="width:75px;display:block;margin-left:auto;margin-right:auto;margin-top:8px">
    
    		   </fieldset>		 
    		</form>
    	</body>
    </html>
    
    Code (markup):
     
    Mike H., Sep 7, 2007 IP
  4. rsltech

    rsltech Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks guys!
     
    rsltech, Sep 11, 2007 IP