6 Best WYSIWYG HTML Editor Open Source

In the world of coding, there are two kinds of code editor – Simple text based editor and WYSIWYG (short for wizzy-wig or what you see is what you get). In our previous article, we discussed some of the best Open Source HTML Editor where you manually type in the code. While there are no issues with the text-based HTML editors, they are none the less old-school. And that’s where WYSIWYG Editors comes in the picture. They have become quite popular over the past few years. And as opposed to actual HTML coding and other technical stuff to build your website, WYSIWYG HTML editors provide visually based options to build a website without any programming knowledge (remember the Wix Ad, that’s wizzy-sig)

WYSIWYG HTML editor has several advantages over the text-based editors. To start with, you can build a website with WYSIWYG editors even if you don’t know how to code. All you have to do is drag and drop items in the editors and once you are done just copy the code. However, finding a good WYSIWYG HTML Editor is not that easy, especially if you need it to be a free and open source. So, in this article, we have rounded up the best WYSIWYG HTML editor open source we could find. Let’s begin. Shall we?

Read: 50+ Open Source Android Apps When You Want to Ditch Google

Best WYSIWYG HTML Editor Open Source

1. Pell

Pell is probably the smallest and simplest WYSIWYG editor that you will ever come across. It is literally 1.38 kb in size!

It offers all the basic functionalities and formats like headings, bold, italic, lists, quotes, links and also images. Other available actions include indentation, superscripts, subscripts and font name and size. After you are done writing and formatting with the editor, Pell outputs the whole HTML code which you can then simply copy and paste on your website or page and you’re good to go.

Pell

Pros:
– Smallest and lightest WYSIWYG
– No dependencies
– Easily customisable

Cons:
– No fancy HTML editing
– Images only through links

Verdict:
Considering its size, Pell makes a compelling package; but let’s be honest, you can only get basic HTML files done with the limited editor and editing options. So, if you are someone looking for a fast and light-weight WYSIWYG editor for some very basic work, definitely check out Pell.

Try out Pell here

2. OpenWYSIWYG

OpenWYSIWYG is a cross-browser rich-text editor, coded entirely in JavaScript. By just copy-pasting a few lines of code, you can turn any <textarea> into OpenWYSIWYG’s robust WYSIWYG editor.

The UI and editing options with the drop-down menus are very similar to that of any text editor and you will feel right at home. Apart from all the basic formatting options, the program boasts of an enhanced colour picker with 216 web colours to choose from and a powerful table formatting tool with every option you could think of.

Another great thing about OpenWYSIWYG is that along with all the visual options, you can still view raw HTML code and make adjustments in the code.

OpenWYSIWYG

Pros:
– Powerful Editing Environment
– Intuitive and Easy UI
– Colour Picker and extensive Table editing options

Cons:

– Not updated in a few years

Verdict:
Being written in JavaScript, OpenWYSIWYG should work with any other web programming language and if you are looking for something a little more powerful than Pell to incorporate in your web application, this is a great option.

OpenWYSIWYG Demo available here

3. TinyMCE (Community Edition)

The next editor on our list is TinyMCE, a full-fledged WYSIWYG editor for the web. It is also completely written in JavaScript and offers an UI and experience like most word processors.

TinyMCE comes in a bunch of options, the Community Edition being the free and open-source one. It comes with all the basic editing options like formatting text, lists, tables and also some image editing options.

The developers have kept the pricing of the premium models according to your number of users, i.e. the more number of users you have, the more you have to pay. Some of the premium features include uploading and managing all your files from Google Drive or Microsoft Azure instead of your server, support for extensions, spelling checker, link checker and also premium technical support.

TinyMCE

Pros:
– Extension Support
– File Management
– Technical Support
– IDE-style code editor for HTML

Cons:
– Pricey
– Not fully open source

Verdict:
TinyMCE with its easy integration option, user-friendly UI and plethora of features including technical support, is a complete package. If you just want the most feature-rich WYSIWYG HTML editor open source and are okay with spending some money, TinyMCE is the way to go. Also, they offer a 1 month free trial for their Pro model which you can always check out!

Try TinyMCE Demo here

4. Jodit

Jodit is another fast and lightweight WYSIWYG editor which you can embed in your code and start editing your page. It is quite light at around 100 KB in size and it has been written completely in TypeScript, thus you don’t need any dependencies or libraries to run it.

Jodit is one of the most user-friendly WYSIWYG editors out there, with options like copy-pasting an image and drag and drop. You can also attach YouTube or Vimeo videos via a link or embed them.

The best thing I liked about Jodit is that it comes with an ACE editor out of the box and with a single button, you can switch between the actual code and the preview mode. You can make adjustments directly in the code or just copy and paste it on your website.

Jodit

Pros:
– Lightweight, No Libraries
– Drag & Drop
– ACE editor out of the box
Option for Technical Support (Paid)

Verdict:
Jodit provides you with the best of both worlds – easy visual WYSIWYG editing as well as adjusting through the raw code. If you are someone who has at least some knowledge in HTML, Jodit might be the best option for you.

Try Jodit Playground

5. Summernote

Summernote is a super simple WYSIWYG editor built on jQuery and based on Bootstrap. Since it supports Bootstrap, you can use all the supported styles and themes on your editor from Bootswatch.

The editor itself has a very clean and minimal UI and you can even edit out or add formatting options according to your need. With Summernote’s Air-mode, you can even hide the whole toolbar and edit your document on the fly which is really convenient. Along with all the basic formatting options, drag & drop, image copy/paste, it also automatically converts all images to base64, so you do not have to implement image handling at all.

To me, the best part about Summernote is the hardworking team of developers behind it who are always listening to the community and adding in new changes e.g. support for plugins, a lite or vanilla version of Summernote which doesn’t require Bootstrap.

Summernote

Pros:
– Minimum Learning Curve
– Air Mode for on the fly editing
– Supports Bootstrap 3.x.x to 4.x.x
– View and edit in HTML

Cons:
– No plugin support
– Requires Bootstrap

Verdict:
Summernote is probably the most feature rich but free WYSIWYG editor available in the market and it is constantly improving. If you are working with Bootstrap, then Summernote is a no brainer but even if you aren’t Summernote deserves to be checked out.

Try Summernote Demo

6. Froala

Last but definitely not least is Froala, a beautiful WYSIWYG written in JavaScript. Froala is one of the more popular tools on this list and its popularity with developers has been accounted by its easy integration and clean design.

Froala is a very powerful editor in itself and the wide myriad of plugins have only increased the same. There are more than 30 plugins which include an advanced image editor, emoticons, spell checker, and it’s easy to even create your own plugin. All the tools can also be accessed inline with the inline editor which is extremely convenient.

Like TinyMCE, Froala also comes in a lot of flavors, but even the free version consists of all the features. The only difference is that you won’t be getting the full source code and technical support.

Froala

Pros:
– Lightweight Powerful editor
– Inline editing
– Plethora of plugins

Cons:
– Not great for mobile hybrid app/website

Verdict:
Froala is fast and lightweight with a beautiful UI but yet manages to bring all the features one might be looking for in a WYSIWYG HTML editor. If you are okay without the source code and support, the free version will serve you just fine, else you know what to do; it doesn’t get better than this.

Demo: Try Froala live here

Special Mentions:

1. MediumEditor is an open source clone of the inline WYSIWYG editor for Medium.com. It is dead simple, lightweight and comes without any dependencies. Although it is not that powerful, it could function as a great inline editing tool for text or text related documents.

2. Atom’s HTML Preview package allows you to add a preview pane in which you can have a live preview of your HTML code, which can be very helpful for developers. While this is definitely not for beginners, it’s a great package to add to your existing workflow if you already do programming in HTML.

3. If you are working on an open source project, CKEditor is an alternative to consider as they can provide you with a free license. But, you must keep the copyright notices in each file intact and not delete the LICENSE.md file located in the CKEditor installation folder.

Best WYSIWYG HTML Editor Open Source

While HTML is still the more powerful way of building a website and much more intricate stuff is possible with it, WYSIWYG editors have secured a place of their own. Learning to code requires a lot of investment of time and energy and might not make sense for everyone. If you have to prior experience in programming and no time to learn, you can absolutely get away by using a WYSIWYG HTML editor and being open source.

So these were some of the best open source WYSIWYG HTML editors that you can use today. Which are you picking or which one do you already use? Let us know in the comment section below.

Also Read: 7 Best Open Source Browser for Android (2018)

About Anurag Roy

Sometimes I write. Business Enquiries: contact@techwiser.com