html editor (wysiwyg)Adding HTML editor (aka. WYSIWYG - "what you see is what you get") is such a very common task when you build input forms. In this article, I will share my experiences and best practices in decision making process and development time in order to help you find your most suitable control and integrate into your projects by the best way.

As you can see by yourself just after few minutes doing searches, there are lots of available solutions that may be confusing you. In my opinion, here is the list of questions you need to think about:

  • Opensource or commercial product?
  • The compatibility with your preferred platform?
  • Purpose of usage (or your must-have and nice-to-have features)
  • Image/file upload integration

Let take a short break and find your own answers before continuing on my explanations:

1. Choosing the editor

Standing in a garden with lots of flowers (different colors! different smells!), which one will be your choice? How can you make it and avoid regretting on next day after a nightmare in your sleep?

After going through a lot of articles and comments, TinyMCE and CKEditor should be the top editors that has been commonly used by developers in recent years. Both of them has community version (free and open source, with an interesting gallery of add-ons and plug-ins) while keeping the enterprise product-line for big business. They are built on Javascript, HTML and can be integrated into any server platforms.

TinyMCE

TinyMCE

CKEditor

CKEditor

Both editors announces the same number on their official sites: 15 millions of downloads till early 2016 (impressed!). Although CKEditor has its longer life, I have decided to use TinyMCE in my project because of its featherweight and the raising speed.

2. Configuration best practices

I always like using open source products in my projects, not only because it is free (YAY!), but also because of the contribution of the worldwide community. Before integrating any product, I advise you go through their documents and find interesting configuration tricks, available add-ons/plug-ins by yourself. I am sure that you will find some shining diamonds in the rough.

Back to the TinyMCE editor, here is my favorite configuration:

<script type="text/javascript">
	tinymce.init({
		selector: '.html-editor',
		plugins: "advlist anchor autoresize charmap code codesample textcolor colorpicker emoticons fullscreen hr image imagetools link media paste preview print searchreplace tabfocus table wordcount",
		toolbar: "undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | charmap emoticons | link image media codesample | searchreplace code",
		menubar: 'file edit insert view format table tools',
		browser_spellcheck: true,
		autoresize_max_height: 500,
		style_formats_merge: true,
		style_formats: [
			{
				title: 'Image Left',
				selector: 'img',
				styles: {
					'float': 'left',
					'margin': '0 15px 0 0'
				}
			},
			{
				title: 'Image Right',
				selector: 'img',
				styles: {
					'float': 'right',
					'margin': '0 0 0 15px'
				}
			}]
	});
</script>

3. Image/file upload integration

A common problem when adding HTML editor into web apps is about the image/file manager. Due to security reason, file uploading and accessing need to be done by the server code (in my case, it is ASP.NET C#). Thus, it is hard to find a free and stable package (by the way, there are - always! - great commercial choices, such as MoxieManager).

Fortunately, there is a great open source (GNU license) called Roxy File Manager that supports both TinyMCE and CKEditor on PHP and .NET. I have played with the module and the integration is quite easy and straightforward. Do not forget their important notes:

IMPORTANT - PHP!
Roxy Fileman requires PHP 5.2 or greater with GD and MB String libraries installed.
Security checks are implemented, but you have to fill "checkAccess()" function located in fileman/php/security.inc.php file in order to actually restrict the access. Usually this is pretty simple, it could be something like "if($_SESSION['is_admin_logged'] !== true)exit;". 
You can also use HTTP Basic authentication or any other authentication mechanism you want. See Roxy Fileman security for more details.

IMPORTANT - .NET!
Roxy Fileman requires .NET 4.5, but can run on .NET 2+ with minor modifications - see FAQ for more details.
.NET users have to map .json extension as static content in IIS configuration. 
All C# code is in one file which is generic web handler (.ashx) - see if you need to register it.
To implement security, you can enable user authentication in web.config file.

After some minutes, VOILA, you can upload pictures:

Roxy Fileman

Roxy File Manager

At this point, you already have a cool HTML editor in your project with suitable plugins for your (or your clients) daily usage.


Thanks for reading my post!

I hope you have good time. If you want to share an idea or discuss a job, do not hesitate to contact at

Happy working!


Other posts you may concern


Implement D3.js chart with time selector and highlighted values

Container Load Plan: showing 3D steps with animations (Three.js)

Building simple image editor with Fabric.js (Javascript HTML5 canvas library)

3D visualization programming with VTK (The Visualization Toolkit)

Stylink: An inside look of a startup social-commerce project

Stylink: Virtual dressing room for commercial purposes

Stylink: A tool for designing fashion collections

Stylink: Web-based tool for styling your hair

Some practices for setting up a clean, responsive and real-time support web project (ASP.NET)

3/N-tier for building web applications with ASP.NET MVC and .NET framework