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:
Let take a short break and find your own answers before continuing on my explanations:
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?
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.
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:
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:
At this point, you already have a cool HTML editor in your project with suitable plugins for your (or your clients) daily usage.
I hope you have good time. If you want to share an idea or discuss a job, do not hesitate to contact at