Hi,
I have been requested to incorporate a rich text editor to allow a non profit group to be able to edit their website. I have looked everywhere on the web and have not been able to determine how to populate the rich text editor with information from the database. Any help would be greatly appreciated as I have been working on this for a while.
The code is as follows:
<%dim PageType
PageType = 2
'PageType = Request.Form("PageType"
%>
<STYLE TYPE="text/css">
TABLE#tblCoolbar
{
background-color:threedface; padding:1px; color:menutext;
border-width:1px; border-style:solid;
border-color:threedhighlight threedshadow threedshadow threedhighlight;
}
.cbtn
{
height:18;
BORDER-LEFT: threedface 1px solid;
BORDER-RIGHT: threedface 1px solid;
BORDER-TOP: threedface 1px solid;
BORDER-BOTTOM: threedface 1px solid;
}
.txtbtn {font-family:tahoma; font-size:70%; color:menutext;}
</STYLE>
<script LANGUAGE="JavaScript">
function button_over(eButton)
{
eButton.style.backgroundColor = "#B5BDD6";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_out(eButton)
{
eButton.style.backgroundColor = "threedface";
eButton.style.borderColor = "threedface";
}
function button_down(eButton)
{
eButton.style.backgroundColor = "#8494B5";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_up(eButton)
{
eButton.style.backgroundColor = "#B5BDD6";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
eButton = null;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</SCRIPT>
<P><STRONG><FONT size=3>Online Content Editor</FONT></STRONG></P>
<form name="editor" method="post" action="submit_editor.asp">
<table id="tblCoolbar" width=542 cellpadding="0" cellspacing="0">
<tr valign="middle">
<td colspan=16>
<select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
<option selected>Style</option>
<option value="Normal">Normal</option>
<option value="Heading 1">Heading 1</option>
<option value="Heading 2">Heading 2</option>
<option value="Heading 3">Heading 3</option>
<option value="Heading 4">Heading 4</option>
<option value="Heading 5">Heading 5</option>
<option value="Address">Address</option>
<option value="Formatted">Formatted</option>
<option value="Definition Term">Definition Term</option>
</select>
<select onchange="cmdExec('fontname',this[this.selectedIndex].value);">
<option selected>Font</option>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="System">System</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
</select>
<select onchange="cmdExec('fontsize',this[this.selectedIndex].value);">
<option selected>Size</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
</select>
</td>
</tr>
<tr>
<td><div class="cbtn" onClick="cmdExec('cut')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Cut.gif" alt="Cut">
</div></td>
<td><div class="cbtn" onClick="cmdExec('copy')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Copy.gif" alt="Copy">
</div></td>
<td><div class="cbtn" onClick="cmdExec('paste')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Paste.gif" alt="Paste">
</div></td>
<td><div class="cbtn" onClick="cmdExec('bold')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Bold.gif" alt="Bold">
</div></td>
<td><div class="cbtn" onClick="cmdExec('italic')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Italic.gif" alt="Italic">
</div></td>
<td><div class="cbtn" onClick="cmdExec('underline')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Under.gif" alt="Underline">
</div></td>
<td><div class="cbtn" onClick="cmdExec('justifyleft')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Left.gif" alt="Justify Left">
</div></td>
<td><div class="cbtn" onClick="cmdExec('justifycenter')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Center.gif" alt="Center">
</div></td>
<td><div class="cbtn" onClick="cmdExec('justifyright')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Right.gif" alt="Justify Right">
</div></td>
<td><div class="cbtn" onClick="cmdExec('insertorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/numlist.GIF" alt="Ordered List">
</div></td>
<td><div class="cbtn" onClick="cmdExec('insertunorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/bullist.GIF" alt="Unordered List">
</div></td>
<td><div class="cbtn" onClick="cmdExec('outdent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/deindent.gif" alt="Decrease Indent">
</div></td>
<td><div class="cbtn" onClick="cmdExec('indent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/inindent.gif" alt="Increase Indent">
</div></td>
<td><div class="cbtn" onClick="foreColor()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/fgcolor.gif" alt="Forecolor">
</div></td>
<td><div class="cbtn" onClick="cmdExec('createLink')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/Link.gif" alt="Link">
</div></td>
<td><div class="cbtn" onClick="insertImage()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/Image.gif" alt="Image">
</div></td>
<td><div class="cbtn" onClick="Save()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=left align=absmiddle src="images/Save.gif" alt="Save">
<font class=txtbtn>Save </font>
</div></td>
<td width=200></td>
</tr>
</table>
<input name="bodytext" type="hidden" value=""></form>
<iframe scr=" width="542" height="350" id="idContent" ></iframe>
<script LANGUAGE="JavaScript">
var isHTMLMode=false
function document.onreadystatechange()
{
idContent.document.designMode="On"
}
function cmdExec(cmd,opt)
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'"
;return;}
idContent.document.execCommand(cmd,"",opt);idContent.focus();
}
function setMode(bMode)
{
var sTmp;
isHTMLMode = bMode;
if (isHTMLMode){sTmp=idContent.document.body.innerHTML;idContent.document.body.innerText=sTmp;}
else {sTmp=idContent.document.body.innerText;idContent.document.body.innerHTML=sTmp;}
idContent.focus();
}
function createLink()
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'"
;return;}
cmdExec("CreateLink"
;
}
function insertImage()
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'"
;return;}
var sImgSrc=prompt("Insert Image File (You can use your local image file) : ", " if(sImgSrc!=null) cmdExec("InsertImage",sImgSrc);
}
function Save()
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'"
;return;}
var sImgTag = idContent.document.body.all.tags("IMG"
;
var oImg;
for (var i = sImgTag.length - 1; i >= 0; i--)
{
oImg = sImgTag;
alert("Add your code to Upload local image file here. Image Inserted : " + oImg.src );
}
document.editor.bodytext.value = idContent.document.body.innerHTML;
document.editor.submit()
alert("Your Document : " + idContent.document.body.innerHTML);
}
function foreColor()
{
var arr = showModalDialog("selcolor.htm","","font-family:Verdana; font-size:12; dialogWidth:30em; dialogHeight:34em" );
if (arr != null) cmdExec("ForeColor",arr);
}
</script>
<br>
<input type="checkbox" onclick="setMode(this.checked)"> Edit HTML
The code for getContents.asp is as follows:
<%
dim PageType
dim bodytext
dim conn
dim MdbFilePath
Set conn = Server.CreateObject("ADODB.Connection"
MdbFilePath = Server.MapPath("..\db\shci.mdb"
conn.Open "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & MdbFilePath & ";"
'Create the Connection object
'set conn = server.createobject("adodb.connection"
'conn.open strconn
'Create the recordset object
set rs = server.createobject("adodb.recordset"
'This statement opens the table so we can add a record notice the addnew
'The 2, 2 is how the table is opened there are many ways it can be opened
'rs.open "CustOrder", conn, 2, 2
PageType = 2
'PageType = Request.QueryString(PageType)
If PageType = "2" Then
SQL = "SELECT * FROM Welcome"
Set rs = conn.Execute(SQL)
End If
bodytext = rs("bodytext"
Response.Write(bodytext)
rs.Close
Set rs = Nothing
conn.Close
Set conn = Nothing
%>
getContents.asp works fine. I am having a javascript error with the document.onreadystatechange() function - error missing ; before statement. And last but certainly not least for the life of me I can not figure out how to insert the contents of getContents.asp into the iframe. Thank-you in advance for any help.
I have been requested to incorporate a rich text editor to allow a non profit group to be able to edit their website. I have looked everywhere on the web and have not been able to determine how to populate the rich text editor with information from the database. Any help would be greatly appreciated as I have been working on this for a while.
The code is as follows:
<%dim PageType
PageType = 2
'PageType = Request.Form("PageType"
<STYLE TYPE="text/css">
TABLE#tblCoolbar
{
background-color:threedface; padding:1px; color:menutext;
border-width:1px; border-style:solid;
border-color:threedhighlight threedshadow threedshadow threedhighlight;
}
.cbtn
{
height:18;
BORDER-LEFT: threedface 1px solid;
BORDER-RIGHT: threedface 1px solid;
BORDER-TOP: threedface 1px solid;
BORDER-BOTTOM: threedface 1px solid;
}
.txtbtn {font-family:tahoma; font-size:70%; color:menutext;}
</STYLE>
<script LANGUAGE="JavaScript">
function button_over(eButton)
{
eButton.style.backgroundColor = "#B5BDD6";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_out(eButton)
{
eButton.style.backgroundColor = "threedface";
eButton.style.borderColor = "threedface";
}
function button_down(eButton)
{
eButton.style.backgroundColor = "#8494B5";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_up(eButton)
{
eButton.style.backgroundColor = "#B5BDD6";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
eButton = null;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</SCRIPT>
<P><STRONG><FONT size=3>Online Content Editor</FONT></STRONG></P>
<form name="editor" method="post" action="submit_editor.asp">
<table id="tblCoolbar" width=542 cellpadding="0" cellspacing="0">
<tr valign="middle">
<td colspan=16>
<select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
<option selected>Style</option>
<option value="Normal">Normal</option>
<option value="Heading 1">Heading 1</option>
<option value="Heading 2">Heading 2</option>
<option value="Heading 3">Heading 3</option>
<option value="Heading 4">Heading 4</option>
<option value="Heading 5">Heading 5</option>
<option value="Address">Address</option>
<option value="Formatted">Formatted</option>
<option value="Definition Term">Definition Term</option>
</select>
<select onchange="cmdExec('fontname',this[this.selectedIndex].value);">
<option selected>Font</option>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="System">System</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
</select>
<select onchange="cmdExec('fontsize',this[this.selectedIndex].value);">
<option selected>Size</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
</select>
</td>
</tr>
<tr>
<td><div class="cbtn" onClick="cmdExec('cut')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Cut.gif" alt="Cut">
</div></td>
<td><div class="cbtn" onClick="cmdExec('copy')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Copy.gif" alt="Copy">
</div></td>
<td><div class="cbtn" onClick="cmdExec('paste')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Paste.gif" alt="Paste">
</div></td>
<td><div class="cbtn" onClick="cmdExec('bold')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Bold.gif" alt="Bold">
</div></td>
<td><div class="cbtn" onClick="cmdExec('italic')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Italic.gif" alt="Italic">
</div></td>
<td><div class="cbtn" onClick="cmdExec('underline')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Under.gif" alt="Underline">
</div></td>
<td><div class="cbtn" onClick="cmdExec('justifyleft')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Left.gif" alt="Justify Left">
</div></td>
<td><div class="cbtn" onClick="cmdExec('justifycenter')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Center.gif" alt="Center">
</div></td>
<td><div class="cbtn" onClick="cmdExec('justifyright')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Right.gif" alt="Justify Right">
</div></td>
<td><div class="cbtn" onClick="cmdExec('insertorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/numlist.GIF" alt="Ordered List">
</div></td>
<td><div class="cbtn" onClick="cmdExec('insertunorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/bullist.GIF" alt="Unordered List">
</div></td>
<td><div class="cbtn" onClick="cmdExec('outdent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/deindent.gif" alt="Decrease Indent">
</div></td>
<td><div class="cbtn" onClick="cmdExec('indent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/inindent.gif" alt="Increase Indent">
</div></td>
<td><div class="cbtn" onClick="foreColor()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/fgcolor.gif" alt="Forecolor">
</div></td>
<td><div class="cbtn" onClick="cmdExec('createLink')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/Link.gif" alt="Link">
</div></td>
<td><div class="cbtn" onClick="insertImage()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/Image.gif" alt="Image">
</div></td>
<td><div class="cbtn" onClick="Save()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=left align=absmiddle src="images/Save.gif" alt="Save">
<font class=txtbtn>Save </font>
</div></td>
<td width=200></td>
</tr>
</table>
<input name="bodytext" type="hidden" value=""></form>
<iframe scr=" width="542" height="350" id="idContent" ></iframe>
<script LANGUAGE="JavaScript">
var isHTMLMode=false
function document.onreadystatechange()
{
idContent.document.designMode="On"
}
function cmdExec(cmd,opt)
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'"
idContent.document.execCommand(cmd,"",opt);idContent.focus();
}
function setMode(bMode)
{
var sTmp;
isHTMLMode = bMode;
if (isHTMLMode){sTmp=idContent.document.body.innerHTML;idContent.document.body.innerText=sTmp;}
else {sTmp=idContent.document.body.innerText;idContent.document.body.innerHTML=sTmp;}
idContent.focus();
}
function createLink()
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'"
cmdExec("CreateLink"
}
function insertImage()
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'"
var sImgSrc=prompt("Insert Image File (You can use your local image file) : ", " if(sImgSrc!=null) cmdExec("InsertImage",sImgSrc);
}
function Save()
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'"
var sImgTag = idContent.document.body.all.tags("IMG"
var oImg;
for (var i = sImgTag.length - 1; i >= 0; i--)
{
oImg = sImgTag;
alert("Add your code to Upload local image file here. Image Inserted : " + oImg.src );
}
document.editor.bodytext.value = idContent.document.body.innerHTML;
document.editor.submit()
alert("Your Document : " + idContent.document.body.innerHTML);
}
function foreColor()
{
var arr = showModalDialog("selcolor.htm","","font-family:Verdana; font-size:12; dialogWidth:30em; dialogHeight:34em" );
if (arr != null) cmdExec("ForeColor",arr);
}
</script>
<br>
<input type="checkbox" onclick="setMode(this.checked)"> Edit HTML
The code for getContents.asp is as follows:
<%
dim PageType
dim bodytext
dim conn
dim MdbFilePath
Set conn = Server.CreateObject("ADODB.Connection"
MdbFilePath = Server.MapPath("..\db\shci.mdb"
conn.Open "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & MdbFilePath & ";"
'Create the Connection object
'set conn = server.createobject("adodb.connection"
'conn.open strconn
'Create the recordset object
set rs = server.createobject("adodb.recordset"
'This statement opens the table so we can add a record notice the addnew
'The 2, 2 is how the table is opened there are many ways it can be opened
'rs.open "CustOrder", conn, 2, 2
PageType = 2
'PageType = Request.QueryString(PageType)
If PageType = "2" Then
SQL = "SELECT * FROM Welcome"
Set rs = conn.Execute(SQL)
End If
bodytext = rs("bodytext"
Response.Write(bodytext)
rs.Close
Set rs = Nothing
conn.Close
Set conn = Nothing
%>
getContents.asp works fine. I am having a javascript error with the document.onreadystatechange() function - error missing ; before statement. And last but certainly not least for the life of me I can not figure out how to insert the contents of getContents.asp into the iframe. Thank-you in advance for any help.