Click here to Skip to main content
13,299,495 members (56,044 online)
Click here to Skip to main content
Add your own
alternative version


88 bookmarked
Posted 10 Nov 2002

Code Project Article Writer Helper

, 9 Aug 2003
Rate this:
Please Sign up or sign in to vote.
Some HTML and JavaScript that helps you write and preview CP articles.
<!-- Article image -->

Sample Image - articlehelp.jpg

<!-- Add the rest of your HTML here -->


<blink>Here is a utility you may find useful when writing articles for the Code Project[^] offline. It should cut down on your HTML formatting time plus it will give you a preview all on the same page. As far as I know, it only works in Internet Explorer.

How to Use It

There are buttons on the left of the textarea that mimic the HTML insertion on the CP forums pages. I added p (<p></p>), br (<br>), space (&nbsp;), sup (<sup></sup>), sub (<sub></sub>), H2 (<H2></H2>) and img (<img src=...>) since articles may need them.

The textarea is where you type the article, of course.

The buttons below the textarea are for normal editing of the textarea except for the preview button. Preview will show you a close approximation of how the page will look in a <div> below the buttons.

Here is some code for the preview:

function ShowPreview()
    // replace div innerHTML content
    previewarea.innerHTML = '<table border=1 width=100 
        height=100% cellpadding=0 cellspacing=0><tr>
        <td valign=top align=left>' + Form1.inputarea.value 
        + '</td></tr></table>';
<button onclick="ShowPreview()" type="button">Preview</button>
<div name="previewarea" id="previewarea" style="WIDTH: 100%;
    HEIGHT: 300px; BACKGROUND-COLOR: #ffffff"></div>


This article was created in the Article Helper, so as you can see, it seems to work OK. I hope you find it helpful.

Most of this javascript code was shamelessly stolen from the Code Project's Reply To a Message page. I hope Chris doesn't mind...

Revision History

Version 1.1

  • Updates the preview area on the OnKeyUp event of the textarea, and also after the OnClick of all relevant buttons. (Thanks for the suggestion Zek3vil!)

Version 1.2

  • Added ol, ul, and li buttons for making tables of contents.
  • Added buttons to open an HTML file, and Save the Helper text to an HTML file.

Version 1.3

  • XHTML compliant tags. (Suggested by Thomas Freudenberg)
  • Added a quot button for entering quotation marks. (" ")
  • Added a table button, plus row and column input areas to make HTML tables.
  • Added drop down list of less commonly used tags including:
    blockquote, center, cite, div, dl, dt, dd, em, H1, H3, H4, H5, H6, hr, iframe, hr, marquee, tt
    Choose a tag and click the use button to paste it into the page.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Jason Henderson
United States United States
I have been a professional developer since 1996. I live in the middle of no where in Illinois, USA. I am married and have four children.

You may also be interested in...


Comments and Discussions

GeneralMissing Functionality Pin
Bassam Abdul-Baki29-Jan-04 4:26
memberBassam Abdul-Baki29-Jan-04 4:26 
GeneralRe: Missing Functionality Pin
Jeffrey Walton16-Dec-06 21:19
memberJeffrey Walton16-Dec-06 21:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171207.1 | Last Updated 10 Aug 2003
Article Copyright 2002 by Jason Henderson
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid