whiteyoh 0 Posting Pro in Training

Hi all,

I have completed a cms system but at present they have to use html tags to edit the information. I recently found out about wysiwyg, which i would love to impliment but im having issues.

the two following files allow you to type something, then click edit, which opens a window with various editing functions. On clicking the bottom right button it the posts that information back to the first page.

What i would like, is an example of how i can then send that information to my database. the cell name is CONTENT and the value is always 1.

I look forward to your response.

this is the main file

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

var textfieldId;//global variable, keeps track of which textfield had the focus before calling the editor

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data" name="form1">
<table width="0%"  border="0" cellspacing="0" cellpadding="4">
	<tr>
		<td><input name="textfield1" type="text" id="textfield1" onBlur='javascript: textfieldId=this;'></td>
	</tr>
	<tr>
		<td><input name="textfield2" type="text" id="textfield2" onBlur='javascript: textfieldId=this;'></td>
	</tr>
	<tr>
		<td><div align="center">
			<input name="textfield3" type="text" id="textfield3" onBlur='javascript: textfieldId=this;'>
		</div></td>
	</tr>
	<tr>
		<td><div align="center"><a href="#" onClick="window.open('editor.html','editor','width=465,height=300')">edit HTML</a> </div></td>
	</tr>
</table>

</form>
</body>

THIS IS THE WYSIWYG JAVASCRIPT POP UP

<html>
<head>
<title>HTML Editor</title>
<script language="JavaScript">

  var viewMode = 1; // WYSIWYG
  
  function Init()
  {
    iView.document.designMode = 'On';
	// open document for further output
	iView.document.open();
	// create document
	iView.document.write(parent.window.opener.textfieldId.value);
  }
  
  function returnHtml()
  {
  	if (viewMode==1) parent.window.opener.textfieldId.value = iView.document.body.innerHTML;
	if (viewMode==2) parent.window.opener.textfieldId.value = iView.document.body.innerText;
  }
  
  function selOn(ctrl)
  {
	ctrl.style.borderColor = '#000000';
	ctrl.style.backgroundColor = '#B5BED6';
	ctrl.style.cursor = 'hand';	
  }
  
  function selOff(ctrl)
  {
	ctrl.style.borderColor = '#D6D3CE';  
	ctrl.style.backgroundColor = '#D6D3CE';
  }
  
  function selDown(ctrl)
  {
	ctrl.style.backgroundColor = '#8492B5';
  }
  
  function selUp(ctrl)
  {
    ctrl.style.backgroundColor = '#B5BED6';
  }
    
  function doBold()
  {
	iView.document.execCommand('bold', false, null);
  }

  function doItalic()
  {
	iView.document.execCommand('italic', false, null);
  }

  function doUnderline()
  {
	iView.document.execCommand('underline', false, null);
  }
  
  function doLeft()
  {
    iView.document.execCommand('justifyleft', false, null);
  }

  function doCenter()
  {
    iView.document.execCommand('justifycenter', false, null);
  }

  function doRight()
  {
    iView.document.execCommand('justifyright', false, null);
  }

  function doOrdList()
  {
    iView.document.execCommand('insertorderedlist', false, null);
  }

  function doBulList()
  {
    iView.document.execCommand('insertunorderedlist', false, null);
  }
  
  function doForeCol()
  {
    var fCol = prompt('Enter foreground color', '');
    
    if(fCol != null)
      iView.document.execCommand('forecolor', false, fCol);
  }

  function doBackCol()
  {
    var bCol = prompt('Enter background color', '');
    
    if(bCol != null)
      iView.document.execCommand('backcolor', false, bCol);
  }

  function doLink()
  {
    iView.document.execCommand('createlink');
  }
  
  function doImage()
  {
    var imgSrc = prompt('Enter image location', '');
    
    if(imgSrc != null)    
     iView.document.execCommand('insertimage', false, imgSrc);
  }
  
  function doRule()
  {
    iView.document.execCommand('inserthorizontalrule', false, null);
  }
  
  function doFont(fName)
  {
    if(fName != '')
      iView.document.execCommand('fontname', false, fName);
  }
  
  function doSize(fSize)
  {
    if(fSize != '')
      iView.document.execCommand('fontsize', false, fSize);
  }
  
  function doHead(hType)
  {
    if(hType != '')
    {
      iView.document.execCommand('formatblock', false, hType);  
      doFont(selFont.options[selFont.selectedIndex].value);
    }
  }
  
  function doToggleView()
  {  
    if(viewMode == 1) //WYSIWYG
    {
      iHTML = iView.document.body.innerHTML;
      iView.document.body.innerText = iHTML;
      
      // Hide all controls
      tblCtrls.style.display = 'none';
      selFont.style.display = 'none';
      selSize.style.display = 'none';
      selHeading.style.display = 'none';
      iView.focus();
      
      viewMode = 2; // Code
    }
    else
    {
      iText = iView.document.body.innerText;
      iView.document.body.innerHTML = iText;
      
      // Show all controls
      tblCtrls.style.display = 'inline';
      selFont.style.display = 'inline';
      selSize.style.display = 'inline';
      selHeading.style.display = 'inline';
      iView.focus();
      
      viewMode = 1; // WYSIWYG
    }
  }

</script>
<style>

  .butClass
  {    
    border: 1px solid;
    border-color: #D6D3CE;
  }
  
  .tdClass
  {
    padding-left: 3px;
    padding-top:3px;
  }

</style>
<body onLoad="Init();"> 
<table border="0" cellpadding="0" cellspacing="0"> 
	<tr> 
		<td width="443"><table id="tblCtrls" width="100%" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE"> 
				<tr> 
					<td class="tdClass"> <img alt="Bold" class="butClass" src="html_editor_images/bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()"> <img alt="Italic" class="butClass" src="html_editor_images/italic.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doItalic()"> <img alt="Underline" class="butClass" src="html_editor_images/underline.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doUnderline()"> <img alt="Left" class="butClass" src="html_editor_images/left.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLeft()"> <img alt="Center" class="butClass" src="html_editor_images/center.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doCenter()"> <img alt="Right" class="butClass" src="html_editor_images/right.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRight()"> <img alt="Ordered List" class="butClass" src="html_editor_images/ordlist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doOrdList()"> <img alt="Bulleted List" class="butClass" src="html_editor_images/bullist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBulList()"> <img alt="Text Color" class="butClass" src="html_editor_images/forecol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doForeCol()"> <img alt="Background Color" class="butClass" src="html_editor_images/bgcol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBackCol()"> <img alt="Hyperlink" class="butClass" src="html_editor_images/link.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLink()"> <img alt="Image" class="butClass" src="html_editor_images/image.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doImage()"> <img alt="Horizontal Rule" class="butClass" src="html_editor_images/rule.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRule()"> </td> 
				</tr> 
			</table></td> 
	</tr> 
	<tr> 
		<td><iframe id="iView" style="width: 444px; height:205px"></iframe></td> 
	</tr> 
	<tr> 
		<td><table height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE"> 
				<tr> 
					<td class="tdClass" colspan="1" width="87%"> <select name="selFont" onChange="doFont(this.options[this.selectedIndex].value)"> 
							<option value="">-- Font --</option> 
							<option value="Arial">Arial</option> 
							<option value="Courier">Courier</option> 
							<option value="Sans Serif">Sans Serif</option> 
							<option value="Tahoma">Tahoma</option> 
							<option value="Verdana">Verdana</option> 
							<option value="Wingdings">Wingdings</option> 
						</select> 
						<select name="selSize" onChange="doSize(this.options[this.selectedIndex].value)"> 
							<option value="">-- Size --</option> 
							<option value="1">Very Small</option> 
							<option value="2">Small</option> 
							<option value="3">Medium</option> 
							<option value="4">Large</option> 
							<option value="5">Larger</option> 
							<option value="6">Very Large</option> 
						</select> 
						<select name="selHeading" onChange="doHead(this.options[this.selectedIndex].value)"> 
							<option value="">-- Heading --</option> 
							<option value="Heading 1">H1</option> 
							<option value="Heading 2">H2</option> 
							<option value="Heading 3">H3</option> 
							<option value="Heading 4">H4</option> 
							<option value="Heading 5">H5</option> 
							<option value="Heading 6">H6</option> 
						</select> </td> 
					<td width="6%" colspan="1" valign="middle" class="tdClass"> <img alt="Toggle Mode" class="butClass" src="html_editor_images/mode.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doToggleView()"></td> 
				    <td class="tdClass" width="7%" align="right"><img alt="Return to field in EsotericCMS" class="butClass" src="html_editor_images/toCMS.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="returnHtml()"></td>
				</tr> 
			</table></td> 
	</tr> 
</table> 
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.