Building a WYSIWYG HTML Editor Part 2/2 - Implementing the WYSIWYG HTML editor

(Page 3 of 6 )

In part one of this article we created a HTML and JavaScript WYSIWYG (What You See Is What You Get) Editor and saved it as editor.html. By now you should've extracted the source code from that articles support material and have editor.html opened in notepad or your favourite text editor.

We're going to add some features to editor.html and make it the page that we will use to add news posts to our database. Firstly, rename editor.html to newsposts.asp and save both it and all of the other files from the support material for the first part of this article into the same directory where you created topics.asp and authors.asp. Just to refresh your memory, running newsposts.asp in Internet Explorer looks like this:

 

Our news posts are going to be stored in the newsPosts table of our myNews database, so we will need to expand newsposts.asp to include a form with fields for the news posts title, author and topics. I'm not going to run through all of the changes to newsposts.asp because it's included as part of the support material for this article, however I will highlight some changes.

First off, we need to add a form tag as well as two hidden input tags:

<form onSubmit="return ProcessNews()" name="frmNews" action="addnews.asp" method="post"><input type="hidden" name="action" value="addNews"> <input type="hidden" name="newsPost" value="">

Notice the onSubmit event of the form tag? When the form is submitted either by clicking on the submit button or by pressing enter, the JavaScript function ProcessNews is called. ProcessNews grabs the HTML from the WYSIWYG HTML editor (which is actually an iFrame) and stores it in the hidden form variable newsPost, which is also shown above. ProcessNews also makes sure that each field in the form has a value in it. The code for the ProcessNews JavaScript function is inserted just before the </script> tag, and looks like this:

function ProcessNews() { // Assign the HTML code to a hidden form variable var htmlCode = iView.document.body.innerHTML; document.frmNews.newsPost.value = htmlCode;
// Make sure that all fields are completed
if(document.frmNews.author.selectedIndex == 0)
{
alert('Please select an author for this news post.');
document.frmNews.author.focus(); return false;
}
if(document.frmNews.title.value == '')
{
alert('This news post must contain a title.');
document.frmNews.title.focus(); return false;
}
if(document.frmNews.topics.selectedIndex == -1)
{
alert('Please select a topic for this news post.');
document.frmNews.topics.focus();
return false;
}
if(document.frmNews.newsPost.value == '')
{
alert('Please enter some content for this news post.');
iView.focus();
return false;
}
return true;
}

Between the time I wrote the first part of this article up until about 2 days ago, I received dozens of emails from people wanting to know how to use the generated HTML code from newsposts.asp. As you can see from the ProcessNews function, it's a simple matter of grabbing the iFrame's innerHTML value to a variable and then assigning the value of that variable to a hidden form field on the "main" document (i.e. the document that contains the iFrame):

// Assign the HTML code to a hidden form variable
var htmlCode = iView.document.body.innerHTML;
document.frmNews.newsPost.value = htmlCode;

Believe it or not, that's all we have to do to get the HTML code out of the iFrame! If you've been paying attention then you'll realize that I haven't discussed adding fields for the title and topics for a new news post. It's simple enough to do however, and we just add the following table below the <form> tag:

<table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td width="10%" height="30" class="title" colspan="2">
<h2> Add News Post</h2>
</td>
</tr>
<tr>
<td width="20%" height="22" class="title">
<p style="margin-left:5"> Author: </p>
</td>
<td width="80%" height="22" class="title">
<select name="author" style="width:335px">
<option value="NULL" checked>-- Select an Author --</option>
<%
objRS.Open "select * from newsAuthors order by name asc"
while not objRS.EOF
Response.Write "<option value='" & objRS("authorId") & "'>"
Response.Write objRS("name") & "</option>" objRS.MoveNext wend %>
</select>
</td>
</tr>
<tr>
<td width="20%" height="22" class="title">
<p style="margin-left:5"> Title: </p>
</td> <td width="80%">
<input type="text" name="title" maxlength="50" style="width:335px">
</td>
</tr>
<tr>
<td width="20%" height="22" class="title">
<p style="margin-left:5"> Topic(s): </p>
 </td>
<td width="80%" height="22">
<select name="topics" style="width:335px" multiple size="5">
 <% objRS.Close objRS.Open "select * from newsTopics order by topic asc"
while not objRS.EOF
Response.Write "<option value='" & objRS("topicId") & "'>"
Response.Write objRS("topic") & "</option>"
objRS.MoveNext wend %>
</select>
</td>
</tr>
<tr>
<td width="10%" height="22" colspan="2">
<hr width="98%" size="1" noshade color="gray">
</td>
 </tr>
</table>

Our newsposts.asp page also needs a submit button, which we add to the bottom of the page with this code:

<table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td width="10%" height="50" class="title" colspan="2">
<input type="submit" name="submit" style="width: 415px" value="Add News Post >>"> </td>
</tr>
</table>
</form>

Next: Implementing the WYSIWYG HTML editor (contd.) >>
 

More ASP Articles
More By Mitchell Harper

Comments On: Building a WYSIWYG HTML Editor Part 2/2

>>> Be the FIRST to comment on this article!