Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML

Part 1: CodeProject.Show: A CodeProject offline article writer

Rate me:
Please Sign up or sign in to vote.
4.94/5 (18 votes)
20 May 2015CPOL14 min read 31.7K   515   17   19
Write your next CodeProject article using CodeProject.Show, a WinForms application

Download source

Download Installer

You could also be interested in CodeProject.Show DeepDive - exploring the source code behind

Introduction

The purpose of this article is to introduce CodeProject.Show, an offline CodeProject article writer. CodeProject.Show has been developed using WinForms, ICSharp.TextEditor and the Webbrowser control using VB.Net. I started developing this five days ago to enable me to write my CodeProject articles offline. This was due to internet connectivity issues at times being erratic and also me loosing an article due to these internet challenges. I also wanted to ensure that I kept track of my articles and are able to update them in one place.

A lot of research took place in making this possible and I found some very important information from this article here.

What you get...

An offline CodeProject article writer using the same template CodeProjet does when writing articles.

  • Ability to create an unlimited number of articles
  • Text formatting using Bold, Italic, Underline, Subscript, Superscript.
  • Ability to change fonts, size and color.
  • Ability to change the forecolor of text
  • Left align, center align, right align, full justify, indent, outdent
  • Cut, Copy, Paste, Unlimited Undo, Unlimited Redo
  • Unordered and ordered lists
  • Insert images, border images and resize images
  • Heading Formatting, H1 - H6, Remove Formatting
  • Blockquote (like CodeProject with gray background), <code>, <div>, <address>
  • Source Code Formatting, e.g. vb.net, css just like online writer
  • Inserting Form Controls to your document e.g. textbox, button, select lists etc
  • Print Preview, print, Page Setup
  • Article Aloud - reading your article using Speech Synthesis (Microsoft Narrator)
  • A read only HTML view of your article
  • Every minute article autosave
  • Every minute article backup (you just never loose your article!)
  • Ability to toggle the article treeview on and off
  • Ability to toggle the HTML view on and off
  • Ability to create BookMarks, Links, remove bookmarks and also remove links
  • Ability to view all your links from the article tree (these will open up the link for preview)
  • Ability to view all your media files from the article tree (these will open up the image for preview)

What I need to add...

  • Spell checking
  • Drag n Drop
  • Adding tables
  • <please suggest>

Some silly assumptions: You have written an online CodeProject article before and are familiar with word processing.

Background

Developing an application like this took some research. Microsoft has a webcontrol that one is able to pass to it commands using ExecCommand. More information about these commands is available here. As this is the first version of this project in a WinForms applications, I must say one of the inspirations to create such an article writer came from this article here. With that in mind, after searching for similar articles, I decided one day I will just do this, and here is it. I must admit, I have never programmed a webcontrol to such detail before and am grateful that through google I have been able to consolidate most of what I learned about the webcontrol and its automation using ExecCommand into this app. The best part for me in all of this is. I know how and my passion to change the world is again realised.

You as a possible end user of this app are please welcome to make suggestions and recommendations. I could use some, even if its about enhancing this application because I believe it will add a lot of value to people's lives, just like it has me. The article you are reading now is conceptualized and created directly from CodeProject.Show.

As indicated in my links above, there is quiet a lot that you can achieve with ExecCommand using the webcontrol however some commands are not supported in most browsers, even internet explorer and thus I had to write some few code to make some functions work. For example, to wrap a selection of article text within a <code> element, I had to write a script like this below:

VB.NET
    Private Sub WrapSelection(elementX As String)
        ' this does the same as formatcode, when it does not work
        ' element to set the attribute
        Dim hElement As IHTMLElement
        ' get the document
        Dim doc As IHTMLDocument2 = txtContent.Document.DomDocument
        ' get selected range
        Dim range As IHTMLTxtRange = doc.selection.createRange()
        ' text block quote
        hElement = doc.createElement(elementX)
        hElement.innerHTML = range.htmlText
        range.pasteHTML(hElement.outerHTML)
    End Sub

where elementX could be anything e.g. "code", "div" etc.

To be able to use CodeProject.Show, one needs to understand its structure. The application is broken down into various sections. These are the following:

The toolbar - this provides most functionality to write your article

The treeview - this lists all your articles, you can click on an article to open it, delete it, rename it etc. This is toggable and you can hide and show it.

Article Writer - the middle portion of the screen where one writes their articles. This part uses the WebControl in design mode and contentEditable on. Your article is saved every 1 minute intervals and a backup done when you are writing it. Each article is saved as a html file using a unique article number.

HTML - the right portion of the screen is also toggable and that is where you can view the HTML source of your article. This section is read only.

Statusbar - at the bottom of CodeProject.Show is the status bar that gives one statistics about their document. This tells how many words are in your article, when was it last saved, the size of the folder containing your article details and its location.

The purpose of this article is not about how I created this application, but more about how to use it to write your offline CodeProject articles. I will however write an article to detail how this WYSIWYG HTML editor was created and in that you will get the source code. Below are the three sections that CodeProject.Show uses.

Image 1

Using the code

1. Maintaining Articles with CodeProject.Show

Maintaining articles with CodeProject.Show involves, Creating a new Article, Deleting an article, Renaming an article, Resetting an article and Saving an artilcle as an html file.

1.1 File > New

This is to add a new article to your database of articles. You will be expected to type over the tree view item and type in your new article name and press Enter.

Image 2

Image 3

Each new article has a name of "New Article", you type over this name with the name of the article that you want. Article names are 255 characters in length and do not accept special characters like ,?><|* etc, just like a file name.

1.2 File > Delete

This is used to delete your article. You have to select your article from the listed article and click File > Delete to remove it. Deleted articles cannot be undone.

Image 4

1.3 File > Rename

Should you want to change your article name, click File > Rename and type over your article name just when you are creating a new article. Only the title of the article will be changed.

1.4. File > Reset

Resetting an article clears all the contents of the article and creates a blank template for you to write on. Only do this when you want to rewrite your article from scratch. This action cannot be undone.

Image 5

1.5. File > Save As

This functionality is the same functionality as saving a page from the internet browser. When selected your article is saved as a single htm file.

1.6 File > Close

This exists the application.

2. Writing and Formatting your article

Now that you have created your new article, it's time to write some content to it. Every time you create a new article, the CodeProject article template is used as a blank article and needs to be updated for your article to have some meat.

Click anywhere in the article and your mouse pointer will start blinking for you to type over.

Image 6

Before writing though you might want to hide the treeview and the HTML view of your article. To do so, click the TreeView Toggle and the HTML Toggle buttons as depicted below.

Image 7

The HTML toggle is also just next to the treeview toggle. This will open up the whole screen for you to write on. Now lets go on and write our article and format it for publishing.

NB: Something to remember: You need to select any text in the article that you want to process.

I have assumed that you have written a CodeProject article before and are familiar with word processing. That meant you understand the toolbar as it will look familiar to one that you have used before. Thus, you know what cut, copy, paste does. Just ensure that you select your text first and then click the appropriate button to process your article content. I will just touch on some features here for more clarity.

2.1 Formatting Headers

Image 8

The headers button has some functionality to format your headers from H1-H6 and also functionality to remove formatting, insert a <code>, <div> and <address> element to your selected text.

Select the text to format and click the appropriate header or action you want.

2.2 Formatting Source Code

Image 9

You might have source code in your article that you want to format. Select your source code and then click the appropriate format to apply such for the final article for publishing. Your formatted code will be highlighted with orange background as usual and you will see the outcome when you preview your article with the online CodeProject writer as depicted below.

Image 10

2.3 Changing the ForeColor of your text

Image 11

Select the text to apply a forecolor to and click the provided button and choose a color that you want to apply.

2.4 Changing the Font properties

Image 12

Select the text to apply a font to and click the Font button and apply your font properties.

2.5 Inserting Links

Image 13

Select the text to apply a link to and click the Link button. Copy or paste the link. To remove a link you need to select it and then click the unlink button.

2.6 You can also insert a horizontal rule to your content

Image 14

2.7 Inserting images

Image 15

Put your insertion point to where you want your image to be placed and click the respective button. Browse the image location. You might want to specify a border thickness for your images. I have used a border thickness of 2 for this article to differentiate my images. This button has functionality to insert a border of 2 around images and also resize the width of each image to 600px.

All your articles are accessible from the Media node of your article. These get copied to the article folder once you select this node.

Image 16

2.8 Inserting Form Controls

Image 17

You can insert form controls to an article, these are CheckBox, File Upload, Hidden, Password, Radio Button, Reset button, Submit, Text, Button, Field Set, Input Button, Input Image, DropDown, Select ListBox and Text Area, these will appear like this: (you can double click these to update)

<input id="chkBox" type="checkbox" />

<input id="fileUp" type="file" />

<input id="hidd" type="hidden" />

<input id="pwd" type="password" value="password" />

<input id="rbtn" type="radio" />

<input id="reset" type="reset" value="Reset" />

<input id="refer" type="submit" value="Submit Query" />

<input id="txt" value="Text" />

<button id="btn"></button>Button

 

 

 

<input id="inpB" type="button" />Input Button

<input id="inpImg" type="image" />input image

<select id="cbo"></select>

<select id="selList" multiple="multiple"></select>

<textarea id="txta"></textarea> 

2.9 Inserting Anchors / Bookmarks

Image 18

The anchor button is there for that. To remove a bookmark, select it and click on the Headers button > Remove Bookmark.

3. Print and Preview your Article

There is functionality within CodeProject.Show to print preview, print your article and also do page setup. These are depicted below.

Image 19

3.1 Print Preview

Image 20

This will generate a print preview of your article.

3.2 Properties

Image 21

This justs gives out the article properties.

3.3 Page Setup

Image 22

You can do a page setup for printing too.

3.4 Print

Image 23

On printing you can select which printer you want your article to print on and depending on that a paper or electronic version will be spilled out.

4. Article Aloud

Article aloud is a functionality to read your article aloud using speech synthesis, a microsoft narrator. You can click to read your article and also pause it at anytime

Image 24

To have CodeProject.Show read your article to you, select your narrator from the available list, I have Microsoft Anna installed. Then select the start reading button. You can also pause or stop reading by clicking the stop button.

5. The TreeView Article Details

When selecting an article, some interesting information is always displayed per article. This is zip files, media (all images) and links. To extract these per article, ensure that the article is selected and displaying as this transverses the document dom to read the links.

Image 25

You can select a link to have its details displayed within the article writing area. For example, my website. I added its link and it is available as part of my links. Selecting it from the links will open my website.

Image 26

The Media link shows all images, videos etc linked to the article. You will note that these are still in their original locations. We will have to move them to the location our article is stored so that we can just drag and drop these to our online article in CodeProject. Selecting the Media tag will copy all your images to the article folder and update the links in your document. This however has an effect of breaking your links within CodeProject.Show and the images will not be displayed. You can then Open With Browser from the File menu to check your artile.

To display the images again, on the Insert Image button, click Fix Image Links and these will be displayed again. Before you put your article on CodeProject though, please note that the images should indeed be shown as broken in CodeProject.Show.

HTML
<P><IMG border=2 hspace=0 alt="" src="C:\Source Code\CodeProject.Show\CodeProject.Show\bin\Debug\Articles\4\screens.png" align=baseline></P>

To work with CodeProject, each image should not have a path. To remove the path click the Media node of the article.

NB. Your article will not be saved while the Zip Files, Media and Links nodes are selected. Always ensure that the article is selected on the tree for it to be saved.

6. The HTML Details

The html details are readonly, even though you can change them, your changes do not reflect back.

Image 27

This just displays your article in HTML. As indicated this is just for displaying your content in a nice color coded format.

7. The StatusBar

The statusbar shows some interesting statistics about your article.

Image 28

This will be the number of words in your article, when was it last saved, the size of the folder contents and its location.

8. The Article Location

The article location in the status bar indicates where your article content is stored. Everything you have typed so far is stored in a single html file, case above in Articles Folder\4.

Image 29

4 is the unique number associated with this topic. To open the file location click on File > Open Location within CodeProject.Show. This will open explorer on that folder. This is the content that you can drag and drop to codeproject, i.e. images etc. For the article itself you need to do copy and paste for it.

Image 30

The BAK folder will contain all your minute back-ups for your article.

Image 31

9. Article Opened With Browser

Image 32

10. Copying your article to CodeProject

1. Create an article the normal way you would write an article online and specify the respective sections and sub-sections tags etc.

2. In CodeProject.Show goto File > Open Location. This will open your article folder for you to access your files.

3. In CodeProject.Show goto File > Publish. This will create an HTML content of your article. You will use this later. The file name will always be publish.txt.

4. Drag and drop all your images from the article folder to the online CodeProject drag and drop zone.

5. Select Source on the online CodeProject article writer. This should show your article source. Hold down Crtl+A to select everything, press Delete.

6. Copy all the content from publish.txt to the online article writer source section.

7. Click Source on the online article writer. Your article written offline and now posted to CodeProject should be intact. Your image links might appear broken though, don't worry.

8. Click on Preview to preview your article on the CodeProject website.

9. Finalize your article online and Publish it. Done! 

Points of Interest

One of the interesting things I managed was to generate the source code to block quote selected text. After much research, I managed to get this going by running this vb code.

Private Sub cmdBlockQuote_Click(sender As Object, e As EventArgs) Handles cmdBlockQuote.Click
        Timer1.Enabled = False
        ' build text to add
        Dim txtToAdd As New StringBuilder
        txtToAdd.Append("<div class=")
        txtToAdd.Append(Chr(34).ToString)
        txtToAdd.Append("op")
        txtToAdd.Append(Chr(34).ToString)
        txtToAdd.Append(">Quote:</div>")        ' element to set the attribute
        Dim hElement As IHTMLElement
        ' get the document
        Dim doc As IHTMLDocument2 = txtContent.Document.DomDocument
        ' get selected range
        Dim range As IHTMLTxtRange = doc.selection.createRange()   
hElement = doc.createElement("blockquote")
        hElement.setAttribute("class", "quote")
        hElement.innerHTML = txtToAdd.ToString & range.htmlText
        range.pasteHTML(hElement.outerHTML)
        SaveContent()
        Timer1.Enabled = True
    End Sub

This uses a range object to read the selected text, creates an element and adds a class to it and then pastes the html to render the quote. I will quote the text below within CodeProject.Show.

Quote:
I love CodeProject.Show! @mash

That's all folks. Welcome to the world of offline CodeProject Article writing!!

PS, the setup.zip file inside is an executable and needs to be renamed. Select the existing article and Run Fix Image Links to show your images after you install on the existing article.

License

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


Written By
Software Developer SITHASO HOLDINGS (PTY) LTD
South Africa South Africa
I'm a Bachelor of Commerce graduate, fell inlove with ICT years back with VB5. Used Pick & System Builder to create a windows app. Very curious, developed my first web database app called Project.Show using ExtJS. Published on Google Play Store, learned JQuery Mobile, a project manager at best. My first intranet app eFas with MySQL.

Fear closes people to a lot of things and we hold ourselves back being held by it. Thus the sooner you believe you can't do something, the sooner everything will work towards that belief. Believe in yourself at all times because you can do anything you set your mind to it!

I have a very beautiful woman and four kids, the best joys in the world. East London, South Africa is currently home.

Awards:

Best Mobile Article of February 2015 (First Prize)
http://www.codeproject.com/Articles/880508/Create-a-CRUD-web-app-using-JQuery-Mobile-and-Loca

Best Mobile Article of May 2015 (Second Prize)
http://www.codeproject.com/Articles/991974/Creating-JQuery-Mobile-CRUD-Apps-using-JQM-Show-Ge

Apps
Bible.Show (Android Store App)
https://www.facebook.com/bibleshow
https://play.google.com/store/apps/details?id=com.b4a.BibleShow

JQM.Show (Android Store App)
https://www.facebook.com/jqmshow
https://play.google.com/store/apps/details?id=com.b4a.JQMShow

CodeProject.Show (An offline CodeProject Article writer)
http://www.codeproject.com/Articles/993453/CodeProject-Show-A-CodeProject-offline-article-wri

Comments and Discussions

 
PraiseMobile App? Pin
Sharp Ninja31-Jul-17 18:13
Sharp Ninja31-Jul-17 18:13 
QuestionGood job fellow South African Pin
Bertus van Zyl24-Nov-15 21:28
Bertus van Zyl24-Nov-15 21:28 
AnswerRe: Good job fellow South African Pin
Anele 'Mashy' Mbanga26-Nov-15 3:12
professionalAnele 'Mashy' Mbanga26-Nov-15 3:12 
GeneralGreat Work...:) Pin
MayurDighe31-May-15 5:01
professionalMayurDighe31-May-15 5:01 
GeneralRe: Great Work...:) Pin
Anele 'Mashy' Mbanga26-Nov-15 3:12
professionalAnele 'Mashy' Mbanga26-Nov-15 3:12 
Thanks, Smile | :)
You can do anything you set your mind to! Believe in yourself!

QuestionWHere is the source code? Pin
Bill SerGio, The Infomercial King22-May-15 3:45
Bill SerGio, The Infomercial King22-May-15 3:45 
AnswerRe: WHere is the source code? Pin
jgakenhe22-May-15 4:12
professionaljgakenhe22-May-15 4:12 
GeneralRe: WHere is the source code? Pin
Anele 'Mashy' Mbanga23-May-15 3:08
professionalAnele 'Mashy' Mbanga23-May-15 3:08 
GeneralExcellent article! Pin
jediYL21-May-15 12:48
professionaljediYL21-May-15 12:48 
GeneralRe: Excellent article! Pin
Anele 'Mashy' Mbanga23-May-15 3:23
professionalAnele 'Mashy' Mbanga23-May-15 3:23 
QuestionWhere is the code? Pin
Frankie-C20-May-15 21:28
Frankie-C20-May-15 21:28 
AnswerRe: Where is the code? Pin
Anele 'Mashy' Mbanga20-May-15 22:06
professionalAnele 'Mashy' Mbanga20-May-15 22:06 
GeneralRe: Where is the code? Pin
Kenneth Haugland20-May-15 22:26
mvaKenneth Haugland20-May-15 22:26 
GeneralRe: Where is the code? Pin
Anele 'Mashy' Mbanga20-May-15 22:34
professionalAnele 'Mashy' Mbanga20-May-15 22:34 
GeneralRe: Where is the code? Pin
Kenneth Haugland20-May-15 22:39
mvaKenneth Haugland20-May-15 22:39 
GeneralRe: Where is the code? Pin
Anele 'Mashy' Mbanga20-May-15 22:43
professionalAnele 'Mashy' Mbanga20-May-15 22:43 
GeneralRe: Where is the code? Pin
Kenneth Haugland20-May-15 22:58
mvaKenneth Haugland20-May-15 22:58 
GeneralRe: Where is the code? Pin
Anele 'Mashy' Mbanga20-May-15 22:57
professionalAnele 'Mashy' Mbanga20-May-15 22:57 

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.