Email Password Remember me?  Lost your password?

• Download source files - 3 Kb

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 ( ), 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

• 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!)

• 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.

• 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.

You must Sign In to use this message board.

Per page 102550

FirstPrevNext

not Firefox Michael Sync 0:23 6 Nov '06   Why doesn't it run on Firefox? Thanks and Regards, Michael Sync Blog: http://michaelsync.net Sign In·View Thread·PermaLink Article Helper Earthquakes Dave Rapp 14:37 13 Dec '04   Hi, I have inserted Article Helper as a part of a script I'm putting together, but, when I get to the bottom of the textarea (inputarea) everything starts bouncing up and down as I try to enter more information. Is there anything I can do to fix this. Any help would be much&greatly apprecitated. Dave The url for this is: http://www.interactivechurch.netrulon.com/messenger/sermonapp.html[^] Sign In·View Thread·PermaLink Re: Article Helper Earthquakes Jason Henderson 17:47 13 Dec '04   My best guess... Too much text being updated in the keypressed event. It updates the entire div with the html frpm the text area with each additional character. Maybe you could turn off auto updates after so many characters to see if that helps. "Live long and prosper." - Spock Jason Henderson blog Sign In·View Thread·PermaLink Missing Functionality Bassam Abdul-Baki 4:26 29 Jan '04   One thing that's needed is a button that will add the default Code Project article template to the text area. This way, users without a handy article or an internet connection can still work on their article for submission. Good job. Sign In·View Thread·PermaLink Re: Missing Functionality Jeffrey Walton 21:19 16 Dec '06   http://www.codeproject.com/styles/global.css[^] Sign In·View Thread·PermaLink Quick question... BoozeBomb 5:42 4 Aug '03   This is a really great article, but I've got one question for you. Once I implement this html page; after a user has taken out all the extra html tags and the post is now formatted just how they want it, how can I grab the formatted text and insert that into a database? I'm not really sure how I can grab the formatted text from the second text field. I'm sure this is a really basic question and hopefully there is a simple answer. Thanks! Sign In·View Thread·PermaLink Re: Quick question... Jason Henderson 6:12 4 Aug '03   The formatted text (do you mean the preview area?) is in a div, so you may be able to select it and copy to the clipboard like I do for the text area above. However, you may only get plain text when you get it from the preview area. It may be better to get the HTML and save it to the database. Jason Henderson I bleed orange. Sign In·View Thread·PermaLink Re: Quick question... BoozeBomb 8:19 4 Aug '03   Yes, I do mean the preview area. I'm trying to get the text that's in the preview area after it has been formated by your scripts. I've tried a couple of different things and none of them seem to work. I'm trying to do a request.form("previewarea") to get the text and insert that (formatted) text into the database. Do you know of a way I can get the text from the div tag in your htm file? Your article is exactly what I need to fix a problem with posting on my site. Thanks! Sign In·View Thread·PermaLink XHTML Thomas Freudenberg 23:23 9 Mar '03   Hi Jason, your Article Helper is a great tool to easen writing a well-formatted article. While writing a new article, I noticed that some inserted tags aren't XHTML compatible. Empty elements (such as BR and IMG) must be marked as such. (see XHTML 1.0 Recommendation, section 4.6[^]) So please add a space and a forward slash before the trailing ">": <br /> <img src="src" /> Regards Thomas Disclaimer: Because of heavy processing requirements, we are currently using some of your unused brain capacity for backup processing. Please ignore any hallucinations, voices or unusual dreams you may experience. Please avoid concentration-intensive tasks until further notice. Thank you. Sign In·View Thread·PermaLink Re: XHTML Jason Henderson 6:04 4 Aug '03   Thomas Freudenberg wrote: your Article Helper is a great tool to easen writing a well-formatted article. While writing a new article, I noticed that some inserted tags aren't XHTML compatible. Empty elements (such as BR and IMG) must be marked as such. (see XHTML 1.0 Recommendation, section 4.6[^]) So please add a space and a forward slash before the trailing ">": Is the space before the forward slash necessary? Jason Henderson I bleed orange. Sign In·View Thread·PermaLink Re: XHTML Thomas Freudenberg 6:20 4 Aug '03   Jason Henderson wrote: Is the space before the forward slash necessary? IIRC it isn't required. Regards Thomas Disclaimer: Because of heavy processing requirements, we are currently using some of your unused brain capacity for backup processing. Please ignore any hallucinations, voices or unusual dreams you may experience. Please avoid concentration-intensive tasks until further notice. Thank you. Sign In·View Thread·PermaLink Re: XHTML GilesHinton 22:11 11 May '07   Actually, even the code in your example isn't XHTML compliant as you're advocating building tables without quotation marks around any of the attributes. Therefore the HTML is not well-formed and would not pass validation. Essentially, everything must have an opening and closing tag, or be self-closing (i.e. <br/> ) in order to pass. G Sign In·View Thread·PermaLink Version 1.2 is not available for DL kbuchan 5:44 5 Mar '03   When I download the source, I get version 1.1. -Kevin Sign In·View Thread·PermaLink Re: Version 1.2 is not available for DL Jason Henderson 5:50 5 Mar '03   That's odd. I thought I sent version 1.2. Maybe I didn't. I'll try and update it tonight, thanks. Jason Henderson "You must be the change you wish to see in the world." - Gandhi articles profile Sign In·View Thread·PermaLink Re: Version 1.2 is not available for DL kbuchan 3:35 6 Mar '03   No rush! I'll check back in a couple days. Just to make sure I wasn't being retarded (though we cannot rule that out just yet), I cleared my browser's temporary internet files and made sure that my browser is set to always check for new content. When I DL'd the source code, it has a November 2002 date on the file. -Kevin Buchan Sign In·View Thread·PermaLink Re: Version 1.2 is not available for DL Jason Henderson 4:00 6 Mar '03   I can email it to you if you want it quicker. Jason Henderson "You must be the change you wish to see in the world." - Gandhi articles profile Sign In·View Thread·PermaLink Re: Version 1.2 is not available for DL kbuchan 4:33 6 Mar '03   Thanks, man, but I can wait. I really like it (it's awfully cool), but I won't actually be using it for the next couple of weeks anyway. Have a great day. -Kevin Buchan Sign In·View Thread·PermaLink Re: Version 1.2 is not available for DL Jason Henderson 11:50 11 Mar '03   Ver. 1.2 is online. Jason Henderson "You must be the change you wish to see in the world." - Gandhi articles profile Sign In·View Thread·PermaLink Me again! Marc Clifton 14:52 27 Feb '03   (OK, I couldn't think of a good subject line). Cool updates. I've been using this for every article I've posted in the last several months! One thing I've noticed is that things start to get progressively slower as the article grows in size. Has anyone mentioned this (or am I the only one to have written 15 page articles?). And thanks for the updates! Marc Help! I'm an AI running around in someone's f*cked up universe simulator. Sensitivity and ethnic diversity means celebrating difference, not hiding from it. - Christian Graus Every line of code is a liability - Taka Muraoka Microsoft deliberately adds arbitrary layers of complexity to make it difficult to deliver Windows features on non-Windows platforms--Microsoft's "Halloween files" Sign In·View Thread·PermaLink Re: Me again! Jason Henderson 15:43 27 Feb '03   Marc Clifton wrote: Cool updates. I've been using this for every article I've posted in the last several months! Thanks! I've added what I thought would be useful when I use it. Glad to hear you use it! BTW, Chris e-mailed me about updating this article and said a new submission wizard would be coming soon (like tomorrow). Marc Clifton wrote: things start to get progressively slower as the article grows in size what gets slower? the previewing? Jason Henderson "You must be the change you wish to see in the world." - Gandhi articles profile Sign In·View Thread·PermaLink Re: Me again! Marc Clifton 1:26 28 Feb '03   what gets slower? the previewing? Things. Oh boy, can't believe I said that. More specifically, there is a noticeable delay between typing a letter and the letter appearing in the edit window. Is this because of the preview regeneration? I've also noticed that it is not uP / speed dependent, or at least I don't think so. The delay is much more noticeable on my P4/2Mhz than on my P4/1.6Mhz. Wierd. Anyways, I'm going to submit my next installment of the AAL in the next couple of days, so I'll let you know how the new version works out. It's another big article. It's really nice to be able to work offline for these large articles, because I don't have to get the whole thing done at once! Marc Help! I'm an AI running around in someone's f*cked up universe simulator. Sensitivity and ethnic diversity means celebrating difference, not hiding from it. - Christian Graus Every line of code is a liability - Taka Muraoka Microsoft deliberately adds arbitrary layers of complexity to make it difficult to deliver Windows features on non-Windows platforms--Microsoft's "Halloween files" Sign In·View Thread·PermaLink Re: Me again! Chris Maunder 8:28 28 Feb '03   I think I may have taken the wind out of this article's sails I'd be interested in your comments on the new submission wizard editor. cheers, Chris Maunder Sign In·View Thread·PermaLink Re: Me again! Jason Henderson 18:12 1 Mar '03   Don't sweat it Chris, this is more of an offline tool anyway. I mainly use it to write articles over a period of days. I'm writing a new one so I'll be able to checkout the new wizard soon. Jason Henderson "You must be the change you wish to see in the world." - Gandhi articles profile Sign In·View Thread·PermaLink Re: Me again! Jason Henderson 18:14 1 Mar '03   Marc Clifton wrote: More specifically, there is a noticeable delay between typing a letter and the letter appearing in the edit window. Is this because of the preview regeneration? It updates the preview on the OnKeyUp event of the text area. Try taking that out and update the preview window with the button. Marc Clifton wrote: It's really nice to be able to work offline for these large articles, because I don't have to get the whole thing done at once! That's what I use it for too, hence the Save and Open buttons. Jason Henderson "You must be the change you wish to see in the world." - Gandhi articles profile Sign In·View Thread·PermaLink 2.00/5 Added source code coloring Jonathan de Halleux 2:33 14 Feb '03   I have added an article about source code coloring in Javascript and I used your article as a basis for the demonstration. It can be interresting to integrate it into your version. If you are interrested check Multiple language syntax highlighting[^] Jonathan de Halleux. Jonathan de Halleux. Sign In·View Thread·PermaLink 2.00/5

Last Visit: 1:20 23 Nov '09     Last Update: 1:20 23 Nov '09 12 Next »