Home arrow ASP arrow Page 3 - Building a WYSIWYG HTML Editor Part 2/2
ASP

Building a WYSIWYG HTML Editor Part 2/2


In part one of this two part article we took a look at a simple way to create a fully functional browser-based HTML editor. In this article Mitchell shows us how to put it to good use, creating a database driven news system using the WYSIWYG editor, ASP and SQL Server 2000.

Author Info:
By: Mitchell Harper
Rating: 5 stars5 stars5 stars5 stars5 stars / 105
April 12, 2002
TABLE OF CONTENTS:
  1. · Building a WYSIWYG HTML Editor Part 2/2
  2. · Creating the database
  3. · Implementing the WYSIWYG HTML editor
  4. · Implementing the WYSIWYG HTML editor (contd.)
  5. · Displaying the news posts
  6. · Conclusion

print this article
SEARCH DEVARTICLES

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 WYSIWYG HTML Editor

 

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>


blog comments powered by Disqus
ASP ARTICLES

- Central Scoreboard with Flash and ASP
- Calorie Counter Using WAP and ASP
- Creating PGP-Encrypted E-Mails Using ASP
- Be My Guest in ASP
- Session Replacement in ASP
- Securing ASP Data Access Credentials Using t...
- The Not So Ordinary Address Book
- Adding and Displaying Data Easily via ASP an...
- Sending Email From a Form in ASP
- Adding Member Services in ASP
- Removing Unconfirmed Members
- Trapping HTTP 500.100 - Internal Server Error
- So Many Rows, So Little Time! - Case Study
- XDO: An XML Engine Class for Classic ASP
- Credit Card Fraud Prevention Using ASP and C...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials