<!-- Article image -->
<!-- Add the rest of your HTML here -->
Introduction
<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 (
), 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()
{
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.