PHP/JAVASCRIPT HELP REQUIRED

General PHP Help
#1

I am currentl working on a web based HTML editor for a php project I am doing. As this is client side it has to be in JAVA I know this is a PHP forum but I have recieved java help on here before.

Here is my scenarios.

I have the following

function addParagraph()
{
var current=document.editor.contents.value
document.editor.contents.value=current+"<strong></strong>"
}

This is only one function, I do have more, on my form I have

<form name="editor" action="<?=$_SERVER['PHP_SELF']?>" method="post"><!-- action="save.php" -->
<p>
<img src="editor_images/Bold.gif" onclick="addBold()" alt="bold" />
</p>
<p>
<textarea name="contents" cols="100" rows="20" wrap="false">
</textarea>
</p>

<p>
<input type="submit" value="Save" />
</p>
</form>

When I click the bold image it inserts , when I select the text i want to be bold it adds after the text. How would I go about wrapping the tags aroung the text if thext is selected.

#2

Here is where I am so far. I have virtually everything working. Its a bit crude but works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function addFormat(formVal) 
{ 
	if (formVal == "h1")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = "<h1 style="">" + str + "</h1>";
			return;
	 } 
	if (formVal == "h2")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = "<h2 style="">" + str + "</h2>";
			return;
	 } 
	if (formVal == "h3")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = "<h3 style="">" + str + "</h3>";
			return;
	 } 
	if (formVal == "h4")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = "<h4 style="">" + str + "</h4>";
			return;
	 } 
	if (formVal == "h5")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = "<h5 style="">" + str + "</h5>";
			return;
	 } 
	if (formVal == "h6")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = "<h6 style="">" + str + "</h6>";
			return;
	 }  
	if (formVal == "p")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = "<p style="">" + str + "</p>";
			return;
	 }  
} 
function addSize(formVal) 
{ 
	if (formVal == "9")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = " font-size:9px;";
			return;
	 } 
	if (formVal == "10")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = " font-size:10px;";
			return;
	}
	if (formVal == "12")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = " font-size:12px;";
			return;
	}
	if (formVal == "14")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = " font-size:14px;";
			return;
	}
	if (formVal == "16")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = " font-size:16px;";
			return;
	}
	if (formVal == "18")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = " font-size:18px;";
			return;
	}
	if (formVal == "24")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = " font-size:24px;";
			return;
	}
	if (formVal == "32")
	 {
		var str = document.selection.createRange().text;
			document.editor.contents.focus();
			var sel = document.selection.createRange();
			sel.text = " font-size:32px;";
			return;
	 }  
} 
//bold tag
function addBold()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<strong>" + str + "</strong>";
  return;
}
//italic function
function addItalic()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<em>" + str + "</em>";
  return;
}
//underline function
function addUnder()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<u>" + str + "</u>n";
  return;
}
function addUnList()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<ul>" + str + "</ul>n";
  return;
}
//List function
function addList()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<li>" + str + "</li>n";
  return;
}
//Paragraph function
function addParagraph()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<p>" + str + "</p>n";
  return;
}
//Table
function addTable()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<table cellpadding="" cellspacing="" border="" width="">n  <tr>n    <td></td>n    <td></td>n  </tr>n</table>n";
  return;
}
//Row
function addTableRow()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<tr>" + str + "</tr>n";
  return;
}
//Column
function addTableColumn()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<td>" + str + "</td>n";
  return;
}
function addIndent()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<blockquote>" + str + "</blockquote>";
  return;
}
function addOutdent()
{
var current=document.editor.contents.value
document.editor.contents.value=current-"<blockquote></blockquote>"
}
function addHR()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = "<hr>" + str + "</hr>n";
  return;
}

//anchor tag
function addLink()
{
  var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var my_link = prompt("Enter URL:","http://");
  if (my_link != null) {
    var sel = document.selection.createRange();
	sel.text = "<a href="" + my_link + "">" + str + "</a>";
  }
  return;
}
function alignLeft()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = " align='left'";
  return;
}
function alignRight()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = " align='right'";
  return;
}
function alignCenter()
{
var str = document.selection.createRange().text;
  document.editor.contents.focus();
  var sel = document.selection.createRange();
  sel.text = " align='center'";
  return;
}
function CopyToClipboard()
{ 
    document.selection.createRange().text;
    var texteACopier = document.selection.createRange();  
    texteACopier.execCommand("Copy");  
} 
function CutToClipboard()
{ 
    document.selection.createRange().text;
    var texteACopier = document.selection.createRange();  
    texteACopier.execCommand("Cut");  
} 

function PasteClipboard()
{ 
    document.editor.contents.focus();
    var texteACopier = document.selection.createRange();  
    texteACopier.execCommand("Paste");  
}

//That ends the javascript
function mouseover(el) {
  el.className = "raised";
}

function mouseout(el) {
  el.className = "button";
}

function mousedown(el) {
  el.className = "pressed";
}

function mouseup(el) {
  el.className = "raised";
}

function swapMode() {

	var eb = document.all.editbar._editor;
  eb.swapModes();
}

function SwapView_OnClick(){

  if(document.all.btnSwapView.value == "View Html"){
		var sMes = "View Wysiwyg";
    var sStatusBarMes = "Current View Html";
	} else {
		var sMes = "View Html"
    var sStatusBarMes = "Current View Wysiwyg";
  }
	
	document.all.btnSwapView.value = sMes;
  window.status  = sStatusBarMes;
	swapMode();
}

</script>
<style>
#toolbar 	{	
			margin: 0;
			padding: 0;
			width: 262px;
			background: buttonface;
			border-top: 1px solid buttonhighlight;
			border-left: 1px solid buttonhighlight;
			border-bottom: 1px solid buttonshadow;
			border-right: 1px solid buttonshadow;
			text-align:right;
		  	}
			
.button 	{
			background: buttonface; 
			border: 1px solid buttonface;
			margin: 1; 
			}
			
.raised		{ 
			border-top: 1px solid buttonhighlight;
			border-left: 1px solid buttonhighlight;
			border-bottom: 1px solid buttonshadow;
			border-right: 1px solid buttonshadow;
			background: buttonface;
			margin: 1;
			}
			
.pressed	{
			border-top: 1px solid buttonshadow;
			border-left: 1px solid buttonshadow;
			border-bottom: 1px solid buttonhighlight;
			border-right: 1px solid buttonhighlight;
			background: buttonface;
			margin: 1;
			}
</style>
</head>
<body>
<div style="width:800px; background-color:buttonface; text-align:center">
<form name="editor" action="<?=$_SERVER['PHP_SELF']?>" method="post">
format: 
<select name="format" onchange="addFormat(this.value)">
	<option value="" style="text-align:center">none</option>
	<option value="h1">heading 1</option>
	<option value="h2">heading 2</option>
	<option value="h3">heading 3</option>
	<option value="h4">heading 4</option>
	<option value="h5">heading 5</option>
	<option value="h6">heading 6</option>
	<option value="p">paragraph</option>
</select>
size: 
<select name="size"  onchange="addSize(this.value)">
	<option value="" style="text-align:center">none</option>
	<option value="9">9</option>
	<option value="10">10</option>
	<option value="12">12</option>
	<option value="14">14</option>
	<option value="16">16</option>
	<option value="18">18</option>
	<option value="24">24</option>
	<option value="32">32</option>
</select>
<img 
	class="button" 
	src="editor_images/Bold.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="addBold()" 
	alt="bold" 
/> <img 
	class="button" 
	src="editor_images/Italics.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="addItalic()" 
	alt="italics" 
/> <img 
	class="button" 
	src="editor_images/underline.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="addUnder()" 
	alt="underline"
/> <img 
	class="button" 
	src="editor_images/centre.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="alignCenter()"
	alt="align center" 
/> <img 
	class="button" 
	src="editor_images/left.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="alignLeft()"
	alt="align left" 
/> <img 
	class="button" 
	src="editor_images/right.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="alignRight()"
	alt="align right" 
/> <img 
	class="button" 
	src="editor_images/Copy.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="CopyToClipboard()" 
	alt="copy" 
/> <img 
	class="button" 
	src="editor_images/Cut.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="CutToClipboard()" 
	alt="cut" 
/> 
<img class="button" 
	src="editor_images/Paste.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="PasteClipboard()"
	alt="paste" 
/> 
<img class="button" 
	src="editor_images/hr.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="addHR()" 
	alt="horizontal rule" 
/> 
<img class="button" 
	src="editor_images/indent.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="addIndent()" 
	alt="indent" 
/> 
<img class="button" 
	src="editor_images/link.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="addLink()" 
	alt="add link" 
/> 
<img class="button" 
	src="editor_images/para_bul.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="addList()" 
	alt="bullet list" 
/> 
<img class="button" 
	src="editor_images/para_num.gif" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onclick="addUnList()" 
	alt="numbered list" 
/>
<img class="button" 
	src="editor_images/insert_table.gif"
	onclick="addTable()" 
	onmousedown="mousedown(this);" 
	onmouseup="mouseup(this);" 
	onmouseover="mouseover(this);" 
	onmouseout="mouseout(this);" 
	alt="insert table"
/>

<textarea name="contents" cols="90" rows="20" wrap="false">
<?=stripslashes($_POST['contents'])?>
</textarea><br />

<input type="submit" name="submit" value="Save" />

</form>
</div>
<?
if($_POST['submit']) {
echo stripslashes($_POST['contents']);
}
?>
</body>
</html>

If anyone has any suggestions on this code they would be much appreciated

Sponsor our Newsletter | Privacy Policy | Terms of Service