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
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
<!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," "); } </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):