Click here to Skip to main content
11,479,486 members (46,372 online)
Click here to Skip to main content

Code Project Article Writer Helper

, 9 Aug 2003 174.1K 1.4K 88
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 -->

Introduction

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>

Conclusion

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Jason Henderson
Software Developer (Senior)
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.

Comments and Discussions

 
GeneralAccess Denied errors in Windows 7 (maybe vista too?) Pin
compninja254-Mar-10 15:22
membercompninja254-Mar-10 15:22 
GeneralChrome Doesn't like it. Pin
ely_bob9-Dec-09 10:12
memberely_bob9-Dec-09 10:12 
Generalnot Firefox Pin
Michael Sync6-Nov-06 0:23
memberMichael Sync6-Nov-06 0:23 
GeneralArticle Helper Earthquakes Pin
Dave Rapp13-Dec-04 14:37
memberDave Rapp13-Dec-04 14:37 
GeneralRe: Article Helper Earthquakes Pin
Jason Henderson13-Dec-04 17:47
memberJason Henderson13-Dec-04 17:47 
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 
GeneralQuick question... Pin
BoozeBomb4-Aug-03 5:42
memberBoozeBomb4-Aug-03 5:42 
GeneralRe: Quick question... Pin
Jason Henderson4-Aug-03 6:12
memberJason Henderson4-Aug-03 6:12 
GeneralRe: Quick question... Pin
BoozeBomb4-Aug-03 8:19
memberBoozeBomb4-Aug-03 8:19 
GeneralXHTML Pin
Thomas Freudenberg9-Mar-03 23:23
memberThomas Freudenberg9-Mar-03 23:23 
GeneralRe: XHTML Pin
Jason Henderson4-Aug-03 6:04
memberJason Henderson4-Aug-03 6:04 
GeneralRe: XHTML Pin
Thomas Freudenberg4-Aug-03 6:20
memberThomas Freudenberg4-Aug-03 6:20 
GeneralRe: XHTML Pin
GilesHinton11-May-07 22:11
memberGilesHinton11-May-07 22:11 
GeneralVersion 1.2 is not available for DL Pin
kbuchan5-Mar-03 5:44
memberkbuchan5-Mar-03 5:44 
GeneralRe: Version 1.2 is not available for DL Pin
Jason Henderson5-Mar-03 5:50
memberJason Henderson5-Mar-03 5:50 
GeneralRe: Version 1.2 is not available for DL Pin
kbuchan6-Mar-03 3:35
memberkbuchan6-Mar-03 3:35 
GeneralRe: Version 1.2 is not available for DL Pin
Jason Henderson6-Mar-03 4:00
memberJason Henderson6-Mar-03 4:00 
GeneralRe: Version 1.2 is not available for DL Pin
kbuchan6-Mar-03 4:33
memberkbuchan6-Mar-03 4:33 
GeneralRe: Version 1.2 is not available for DL Pin
Jason Henderson11-Mar-03 11:50
memberJason Henderson11-Mar-03 11:50 
GeneralMe again! Pin
Marc Clifton27-Feb-03 14:52
memberMarc Clifton27-Feb-03 14:52 
GeneralRe: Me again! Pin
Jason Henderson27-Feb-03 15:43
memberJason Henderson27-Feb-03 15:43 
GeneralRe: Me again! Pin
Marc Clifton28-Feb-03 1:26
memberMarc Clifton28-Feb-03 1:26 
GeneralRe: Me again! Pin
Chris Maunder28-Feb-03 8:28
adminChris Maunder28-Feb-03 8:28 
GeneralRe: Me again! Pin
Jason Henderson1-Mar-03 18:12
memberJason Henderson1-Mar-03 18:12 
GeneralRe: Me again! Pin
Jason Henderson1-Mar-03 18:14
memberJason Henderson1-Mar-03 18:14 
GeneralAdded source code coloring Pin
Jonathan de Halleux14-Feb-03 2:33
memberJonathan de Halleux14-Feb-03 2:33 
GeneralOutstanding. One "is it possible" feature request. Pin
Marc Clifton15-Dec-02 4:21
memberMarc Clifton15-Dec-02 4:21 
GeneralRe: Outstanding. One "is it possible" feature request. Pin
Jason Henderson14-Feb-03 3:59
memberJason Henderson14-Feb-03 3:59 
GeneralUseful one Pin
Andreas Saurwein15-Nov-02 4:39
memberAndreas Saurwein15-Nov-02 4:39 
Generalnice work Pin
Mingming Lu13-Nov-02 12:38
memberMingming Lu13-Nov-02 12:38 
GeneralExcellent Pin
Brian Delahunty13-Nov-02 5:35
editorBrian Delahunty13-Nov-02 5:35 
GeneralRe: Excellent Pin
Jason Henderson13-Nov-02 5:49
memberJason Henderson13-Nov-02 5:49 
GeneralRe: Excellent Pin
Brian Delahunty13-Nov-02 5:58
editorBrian Delahunty13-Nov-02 5:58 
GeneralRe: Excellent Pin
Anonymous15-Sep-03 8:54
sussAnonymous15-Sep-03 8:54 
GeneralCP tools rock Pin
Paul Watson13-Nov-02 5:33
sitebuilderPaul Watson13-Nov-02 5:33 
GeneralRe: CP tools rock Pin
Jason Henderson13-Nov-02 5:48
memberJason Henderson13-Nov-02 5:48 
GeneralRe: CP tools rock Pin
David Stone13-Nov-02 11:06
memberDavid Stone13-Nov-02 11:06 
GeneralRe: CP tools rock Pin
Paul Watson13-Nov-02 23:21
sitebuilderPaul Watson13-Nov-02 23:21 
GeneralInstead of clicking the Preview... Pin
Zek3vil13-Nov-02 4:32
memberZek3vil13-Nov-02 4:32 
GeneralRe: Instead of clicking the Preview... Pin
Jason Henderson13-Nov-02 4:52
memberJason Henderson13-Nov-02 4:52 
GeneralExcellent !!! Pin
Tom Wellige12-Nov-02 21:07
memberTom Wellige12-Nov-02 21:07 
GeneralRe: Excellent !!! Pin
Jason Henderson13-Nov-02 3:46
memberJason Henderson13-Nov-02 3:46 
GeneralNice Pin
Nick Parker12-Nov-02 12:13
editorNick Parker12-Nov-02 12:13 
GeneralClassic...You got my Five Pin
Kant11-Nov-02 16:03
memberKant11-Nov-02 16:03 
GeneralRe: Classic...You got my Five Pin
Jason Henderson11-Nov-02 17:43
memberJason Henderson11-Nov-02 17:43 
GeneralRe: Classic...You got my Five Pin
Anonymous2-Mar-03 19:03
sussAnonymous2-Mar-03 19:03 
GeneralI really hate it when someone... Pin
Chris Maunder11-Nov-02 13:29
adminChris Maunder11-Nov-02 13:29 
GeneralRe: I really hate it when someone... Pin
Paul Selormey11-Nov-02 14:30
memberPaul Selormey11-Nov-02 14:30 
GeneralRe: I really hate it when someone... Pin
Jason Henderson11-Nov-02 17:46
memberJason Henderson11-Nov-02 17:46 

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

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

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