Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

ExHtmlEditor - Express WYSIWYG HTML Visual Editor

5.00/5 (9 votes)
14 Aug 2013CPOL2 min read 33.4K  
A program/application for learning and writing HTML. Get instant visual effect side by side with your code as you type. Support HTML5, Javascript and CSS3 elements.

Introduction

ExHtmlEditor is an open source program/application for learning and writing HTML. Get instant visual effect side by side with your code as you type. Support HTML5, Javascript and CSS3 elements rendering. This program is very useful for HTML learners. It is portable and lightweight, very suitable for web developers to perform quick code testing.

Website: http://exhtmleditor.codeplex.com

Image 1

Features
  • Support HTML5, Javascript and CSS3 elements.
  • Visual rendering output is displayed instantly side by side with HTML codes.
  • HTML Syntax highlighting.
  • Codes searching and replacing.
  • Portable, no installation needed.
  • Free, Open Source. 

Interesting Components Used in ExHtmlEditor

There are some interesting components that I would like to introduce to you while composing this program.

ScintillaNET

ScintillaNET is an open source text editor. It provides the ability for syntax highlighting, backward/forward text searching, line numbering, auto code block analyze for folding/collapse and expanding blocks. The syntax highlighting support for over 80 languages.

Website: http://scintillanet.codeplex.com/

Screenshot of ScintillaNET

Image 2

Awesomium

Awesomium is an advance HTML Rendering Engine developed based on Chromium, something close to a web browser but can be integrated into .NET WinForm and WPF application. It has great support for rendering HTML5 and CSS3 elements. 

The main problem of traditional WebBrowser control of WinForm is that it has poor support for rendering CSS3 elements.

Comparison of Rendering output of WebBrowser Control over Awesomium's WebControl:

Awesomium's Rendering Output of CSS3 elements:

Image 3

Traditional WinForm WebBrowser's Rendering Output of CSS3 elements:

Windows 7, Internet Explorer 8:

Image 4

As you can see, WebBrowser Control with Internet Explorer 8 fail to render CSS3 elements.

Another example: Inconsistent rendering result throughout different version of Internet Explorer:

Windows 7, Internet Explorer 9:

Image 5

Windows XP, Internet Explorer 6:

Image 6

WebBrowser's rendering results are based on installed version of Internet Explorer.

Therefore, Awesomium has came into the solution. Awesomium are free for 

  • personal use
  • non-commercial use
  • commercial use by companies/teams who made less than $100K in revenue last year. 

Read more about Awesomium: http://awesomium.comhttp://awesomium.codeplex.com

License

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