Click here to Skip to main content
11,708,312 members (74,815 online)
Click here to Skip to main content

Offline Article Editor For CodeProject

, 15 Dec 2013 CPOL 57K 3K 118
Rate this:
Please Sign up or sign in to vote.
An offline wysiwyg editor to backup, edit or create new articles for CodeProject.

Editorial Note

Having trouble writing or posting articles? These articles aim to gather together tips and tricks from authors and mentors to help you write great articles.

Contents

Introduction

CP Article Editor allows you to create/edit articles for CodeProject without internet connection requirement. You can also login to backup (both your articles and related images) and edit your published articles using this program. It is very small in size and portable. 

Screenshot of the main window. Browsing for an article to edit
(Click on the images to view the full sized images in a new window.)

Background

Let's learn or remember something that we will need to understand the source code.

Asynchronous Operations

Asynchronous operations work separately and they have their own threads. If we need to execute codes after they finished their works we can't write these codes below the method it starts them. Because they don't block the method they are called from. Another thing that we must know is that a thread can't access an object created on a different thread...

Generally we are using events for operations that must be done after an asynchronous method finished its mission or an event occured. But I used a different way for this purpose and I think it is relatively simpler to understand.

Suppose that we have a thread and we want to call a function after our thread finished its work:

class Example
{
    private Action after_MyThreadFinished;
    private Form invoker;

    public Example(Action after_MyThreadFinished, Form invoker)
    {
        this.after_MyThreadFinished = after_MyThreadFinished;
        this.invoker = invoker;
    }

    public void doSomeWorksAsynchronously()
    {
        new Thread(() =>
        {
            // some codes that take long time...
            Thread.Sleep(2000);

            if (after_MyThreadFinished != null)
                invoker.Invoke(after_MyThreadFinished);
        }).Start();
    }
}

A thread can't make any change directly on a visual object owned by an UI thread. And we can't be sure about that the user will not use codes in our new thread to access visual controls created by the UI thread. This is why we need an invoker object. 

Usage:

private void button1_Click(object sender, EventArgs e)
{
    Action myAction = new Action(() =>
    {
        MessageBox.Show("Finished.");
        this.Text = "I can access all the objects without any trouble." +
                    "Because I will be invoked by the thread of this form.";
    });

    Example example = new Example(myAction, this);
    example.doSomeWorksAsynchronously(); // It doesn't block the current thread.
}

CKEditor

CKEditor is an open source WYSIWYG editor that can be integrated with web pages easily. I used it inside a webbrowser in this project.

I customized the toolbar and removed unneccessary plugins to reduce total size. Additionally I modified image.js plugin to make using relative urls possible:

// Original code: B.preview.setAttribute('src',s.$.src);
// Modified for CP Article Editor
// The modification has been made to convert a relative image src to an
// absolute src in preview window.
// begin
if(s.$.src.substring(0,7)=='http://' || s.$.src.substring(0,8)=='https://')
    B.preview.setAttribute('src',s.$.src);
else
{
    var kok=(document.getElementsByTagName('base')[0]==null?'**biseyyapma**':
             document.getElementsByTagName('base')[0].getAttribute('href'));
    var verilenAdres=C;
    var tamAdres=kok+C;
    B.preview.setAttribute('src',tamAdres);
}
// end

// Original code: --
// Modified for CP Article Editor
// The modification has been made to convert an absolute image src to a relative src.
// begin
kok=(document.getElementsByTagName('base')[0]==null?'**biseyyapma**':
     document.getElementsByTagName('base')[0].getAttribute('href')),
D=(D.indexOf(kok)>-1?D.replace(kok,''):D),
// end

// Original code: C.data('cke-saved-src',D.getValue()); C.setAttribute('src',D.getValue());
// Modified for CP Article Editor
// The modification has been made to convert a relative image src to an absolute src.
// begin
var verilenAdres=D.getValue();
if(verilenAdres.substring(0,7)=='http://' || verilenAdres.substring(0,8)=='https://')
{
    C.data('cke-saved-src',D.getValue());
    C.setAttribute('src',D.getValue());
}
else
{
    var kok=(document.getElementsByTagName('base')[0]==null?'**biseyyapma**':
             document.getElementsByTagName('base')[0].getAttribute('href'));
    var tamAdres=(verilenAdres.indexOf(kok)<0?kok+verilenAdres:verilenAdres)
    C.data('cke-saved-src',tamAdres);
    C.setAttribute('src',tamAdres);
}
// end

Used configurations:

fullPage        : false  // We are not editing a full page
language        : 'en'   // I removed all other language files to decrease the size.
resize_enabled  : false  // Prevent resizing the editor.
uiColor         : '#CCC' // Grey
tabSpaces       : 4      // Each tab character is replaced with 4 spaces.
contentsCss     : 'CodeProject.css'  // CSS stylesheet file of codeproject template.
removePlugins   : 'contextmenu,liststyle,tabletools' // For hiding ckeditor's context menu
docType         : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"' +
                  '"http://www.w3.org/TR/html4/loose.dtd">' // Document type of CodeProject.

Accessing And Modifying Elements Of An Html Document

I used a WebBrowser to login and extract required data. Here are some important methods.

Reading an attribute of an element:

webBrowser.Document.GetElementById("IdOfTheElement").GetAttribute("attribute");

Changing an attribute of an element:

webBrowser.Document.GetElementById("IdOfTheElement").SetAttribute("attribute", "new value");

Calling a javascript function that is inside a WebBrowser object from c#:

object[] args = new object[] { ... };
object returned = webBrowser.Document.InvokeScript("functionName", args);

Downloading Files From A Website

There is a very simple method for downloading files from a website. I used that method to download images related with an article.

WebClient webClient = new WebClient();
webClient.DownloadFile("http://www.site.com/file.extension", "C:\file.extension");

Disabling Click Sound In A WebBrowser

There isn't a property to disable the click sound in a web browser. But there is a way to do that using CoInternetSetFeatureEnabled API:

static class ClickSoundDisabler
{
    // ---------------------------------------------------
    //  CodeProjectArticleEditor > ClickSoundDisabler.cs
    // ---------------------------------------------------
    //  CodeProject Article Editor
    //  Huseyin Atasoy
    //  September 2012
    // ---------------------------------------------------

    private const int FEATURE_DISABLE_NAVIGATION_SOUNDS = 21;

    private const int SET_FEATURE_ON_PROCESS = 0x00000002;

    [DllImport("urlmon.dll")]
    [PreserveSig]
    [return: MarshalAs(UnmanagedType.Error)]
    private static extern int CoInternetSetFeatureEnabled(int FeatureEntry,
        [MarshalAs(UnmanagedType.U4)] int dwFlags, bool fEnable);

    public static void disableClickSound()
    {
        try
        {
            CoInternetSetFeatureEnabled(FEATURE_DISABLE_NAVIGATION_SOUNDS,
                                        SET_FEATURE_ON_PROCESS, true);
        }
        catch{}
    }
}

Screenshots

This is the main window of the program:

Codeproject article editor main window

If you want to backup your published articles to edit or just to save them you can enter your email and password to login. Your articles will be listed after you logged in: 

Welcome after login

article list

When you choosed one of them, some informations about it will appear:

Informations about selected article

You can write a new article or edit an existing one even if you are not connected to the internet:

New article

Transferring Articles To CodeProject's Online Editor

  1. Select "Copy source to the clipboard" from the right-click menu.
    (Note that all absolute image paths are converted to relative paths. So you don't have to change anything on copied html codes.)
  2. Open codeproject online editor.
  3. Click on "HTML" button to switch to HTML mode:
  4. Paste your contents. (CTRL+V) 
  5. Click again on "HTML" button to switch back to design mode...

Points Of Interest

Let me list things that we can learn while examining the source codes:

  • WYSIWYG html editor in .NET.
  • How to use ckeditor in .NET?
  • How to call a javascript function inside a WebBrowser from a c# function?
  • Automated login and data extraction.
  • Using Actions instead of Events for asynchronous functions in c#.
  • Disabling click sound in a WebBrowser control.
  • Downloading files from internet in c#.

History

  • 15 December 2013 (v1.0.4) 
    • Article listing and login methods were fixed after some changes on CodeProject.
  • 4 April 2013 (v1.0.3)  
    • Logins have failed recently because of some updates on CodeProject. Fixed.  
    • Random strings were appended to the urls to force the WebBrowser to reload cached pages. 
  • 17 October 2012 (v1.0.2)
    • New codes to remember last browsed path 
    • A small change in extractMemberId() function
    • "Open with" support
      (You can use "Open with" menu or drag a cpa file and drop it on icon of the program.)
    • A unique file header to validate CPA (CodeProject Article) files
      (Because of that old cpa files cannot be opened with this version.)
  • 5 October 2012 (v1.0.1)
    • "ctl00" became "ctl01" on the login page of codeproject. So a new function (getElementId()) was written to get IDs of elements using Regex class and this function was used instead of all old constants that will be able to be changed by codeproject in future.
  • 1 October 2012 (v1.0.0)
    • First release.

License

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

Share

About the Author

Huseyin Atasoy
Engineer
Turkey Turkey
I am interested in artificial intelligence, signal processing, electronics, robotics and internet/network technologies.

A few of my works:
KANO (Real-time Optical Mark Recognition)
PAKEV
Real-time object recognition
Real-time facial expression recognition

My blog

You may also be interested in...

Comments and Discussions

 
QuestionSome online features appear to be missing Pin
Robert Gustafson17-Jan-15 15:22
memberRobert Gustafson17-Jan-15 15:22 
GeneralMy vote of 5 Pin
Manikandan1021-Jun-14 19:21
professionalManikandan1021-Jun-14 19:21 
GeneralMy vote of 5 Pin
Halil ibrahim Kalkan10-Aug-13 10:44
memberHalil ibrahim Kalkan10-Aug-13 10:44 
QuestionCannot Proceed Past 'Connected, Logging in...' Pin
Mike-MadBadger7-Aug-13 9:40
memberMike-MadBadger7-Aug-13 9:40 
AnswerRe: Cannot Proceed Past 'Connected, Logging in...' Pin
Huseyin Atasoy7-Aug-13 18:52
memberHuseyin Atasoy7-Aug-13 18:52 
GeneralRe: Cannot Proceed Past 'Connected, Logging in...' Pin
Mike-MadBadger10-Aug-13 11:54
memberMike-MadBadger10-Aug-13 11:54 
GeneralRe: Cannot Proceed Past 'Connected, Logging in...' Pin
Mike-MadBadger10-Aug-13 22:14
memberMike-MadBadger10-Aug-13 22:14 
GeneralRe: Cannot Proceed Past 'Connected, Logging in...' Pin
Huseyin Atasoy17-Aug-13 21:53
memberHuseyin Atasoy17-Aug-13 21:53 
GeneralRe: Cannot Proceed Past 'Connected, Logging in...' Pin
Mike-MadBadger17-Aug-13 23:20
memberMike-MadBadger17-Aug-13 23:20 
QuestionA great tool. I have a question/bug Pin
Matthew Faithfull27-May-13 6:33
professionalMatthew Faithfull27-May-13 6:33 
AnswerRe: A great tool. I have a question/bug Pin
Huseyin Atasoy27-May-13 20:14
memberHuseyin Atasoy27-May-13 20:14 
GeneralRe: A great tool. I have a question/bug Pin
Matthew Faithfull27-May-13 23:04
professionalMatthew Faithfull27-May-13 23:04 
GeneralMy vote of 5 Pin
Orcun Iyigun28-Apr-13 20:48
member Orcun Iyigun28-Apr-13 20:48 
GeneralMy vote of 4 Pin
AlluvialDeposit23-Apr-13 0:53
professionalAlluvialDeposit23-Apr-13 0:53 
GeneralRe: My vote of 4 Pin
Huseyin Atasoy27-May-13 17:46
memberHuseyin Atasoy27-May-13 17:46 
GeneralMy vote of 5 Pin
fwh_danny8-Apr-13 19:10
memberfwh_danny8-Apr-13 19:10 
GeneralMy vote of 5 Pin
JHQY7-Apr-13 0:53
memberJHQY7-Apr-13 0:53 
GeneralMy vote of 5 Pin
Shubham Choudhary4-Apr-13 21:13
memberShubham Choudhary4-Apr-13 21:13 
QuestionFederated Login Pin
Vasudevan Deepak Kumar4-Apr-13 6:23
memberVasudevan Deepak Kumar4-Apr-13 6:23 
GeneralMy vote of 5 Pin
Prasad Khandekar4-Apr-13 3:29
memberPrasad Khandekar4-Apr-13 3:29 
QuestionThank Pin
PrabaPrakash4-Apr-13 1:45
memberPrabaPrakash4-Apr-13 1:45 
QuestionError: Connection failed! Pin
Mike-MadBadger1-Apr-13 0:07
memberMike-MadBadger1-Apr-13 0:07 
AnswerRe: Error: Connection failed! Pin
Huseyin Atasoy3-Apr-13 23:13
memberHuseyin Atasoy3-Apr-13 23:13 
GeneralMy vote of 5 Pin
Mihai MOGA18-Nov-12 7:33
memberMihai MOGA18-Nov-12 7:33 
GeneralMy vote of 5 Pin
manoj kumar choubey15-Nov-12 19:47
membermanoj kumar choubey15-Nov-12 19:47 
GeneralGood article Pin
Mehdi Payervand14-Nov-12 18:36
memberMehdi Payervand14-Nov-12 18:36 
GeneralMy vote of 5 Pin
Sarvesh Kushwaha10-Nov-12 18:10
memberSarvesh Kushwaha10-Nov-12 18:10 
GeneralMy vote of 5 Pin
ibrahim ragab10-Nov-12 13:28
memberibrahim ragab10-Nov-12 13:28 
GeneralMy vote of 5 Pin
ProgramFOX9-Nov-12 6:07
memberProgramFOX9-Nov-12 6:07 
GeneralMy vote of 5 Pin
Mohammad A Rahman8-Nov-12 18:01
memberMohammad A Rahman8-Nov-12 18:01 
Questionnice Pin
CIDev8-Nov-12 11:10
memberCIDev8-Nov-12 11:10 
GeneralMy vote of 5 Pin
Hernán Hegykozi29-Oct-12 13:48
memberHernán Hegykozi29-Oct-12 13:48 
GeneralMy vote of 5 Pin
hari1911325-Oct-12 18:34
memberhari1911325-Oct-12 18:34 
QuestionThanks Pin
AlirezaDehqani25-Oct-12 4:16
memberAlirezaDehqani25-Oct-12 4:16 
QuestionThanks for a useful tool Pin
Jim Meadors22-Oct-12 19:16
memberJim Meadors22-Oct-12 19:16 
AnswerRe: Thanks for a useful tool Pin
Huseyin Atasoy23-Oct-12 1:15
memberHuseyin Atasoy23-Oct-12 1:15 
GeneralRe: Thanks for a useful tool Pin
Jim Meadors24-Oct-12 20:32
memberJim Meadors24-Oct-12 20:32 
GeneralMy vote of 5 Pin
Code Master3822-Oct-12 6:00
memberCode Master3822-Oct-12 6:00 
GeneralMy vote of 5 Pin
imgen17-Oct-12 17:33
memberimgen17-Oct-12 17:33 
Suggestionvote of 5, one correction regarding threads Pin
Antonio Nakić Alfirević17-Oct-12 1:19
memberAntonio Nakić Alfirević17-Oct-12 1:19 
GeneralRe: vote of 5, one correction regarding threads Pin
Huseyin Atasoy17-Oct-12 2:40
memberHuseyin Atasoy17-Oct-12 2:40 
QuestionMy vote of 5 Pin
Ratish Philip17-Oct-12 0:23
memberRatish Philip17-Oct-12 0:23 
GeneralMy vote of 5 Pin
Rajesh Pillai7-Oct-12 21:07
memberRajesh Pillai7-Oct-12 21:07 
GeneralMy vote of 5 Pin
Аslam Iqbal6-Oct-12 19:46
memberАslam Iqbal6-Oct-12 19:46 
GeneralRe: My vote of 5 Pin
Huseyin Atasoy7-Oct-12 7:39
memberHuseyin Atasoy7-Oct-12 7:39 
QuestionLooks very good, but why the use "different way" use of threading ? Pin
BillWoodruff5-Oct-12 14:20
memberBillWoodruff5-Oct-12 14:20 
Hi,

I voted this a 4; certainly looks like a useful tool, and one you put a lot of work into. I'm going to try it out today.

But, I am curious what this statement: "Generally we are using events for operations that must be done after an asynchronous method finished its missision or an event occured. But I used a different way for this purpose and I think it is relatively simpler to understand" means.

I'd like to know what problem your "different way" solved, or what advantage your "different way" gives your application. Or, just plain: why you needed to use multi-threading here in the first place.

thanks, Bill
~
Confused by Windows 8 ? This may help: [^] !

AnswerRe: Looks very good, but why the use "different way" use of threading ? Pin
Huseyin Atasoy6-Oct-12 4:35
memberHuseyin Atasoy6-Oct-12 4:35 
GeneralRe: Looks very good, but why the use "different way" use of threading ? Pin
BillWoodruff6-Oct-12 15:22
memberBillWoodruff6-Oct-12 15:22 
GeneralMy vote of 4 Pin
Al-Samman Mahmoud5-Oct-12 10:00
memberAl-Samman Mahmoud5-Oct-12 10:00 
GeneralRe: My vote of 4 Pin
Huseyin Atasoy6-Oct-12 4:01
memberHuseyin Atasoy6-Oct-12 4:01 

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
Web02 | 2.8.150819.1 | Last Updated 15 Dec 2013
Article Copyright 2012 by Huseyin Atasoy
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid