Froala Editor

Best Alternative WYSIWYG editor for Developers

Posted on

Do not think that WYSIWYG editor are TinyMCE and CKEditor, it turns out there are many WYSIWYG editor that you can add to the CMS. The majority of CMS using WYSIWYG editor to simplify the user to add and edit content. As in wordpress using TinyMCE that has been modified.
There are many WYSIWYG editor that you can use, there is a jquery based, CSS or HTML5, depending on the framework you use.
Here are some alternatives WYSIWYG editor that will open your eyes, the world is wide.

[code tipe=”rs”]

Froala Editor

Froala Editor

A beautiful WYSIWYG rich text editor (RTE) that was built on the latest technologies and according to the latest industry trends

WYSIWYG are bulky chunks of code that allow users to format text inside their browsers just like they’d do with desktop software like Word or OpenOffice.Most of them work by transforming a simple textarea into a fully-blown text formatting section, with lots of toolbars and buttons to style the contained text.Another way of adding a RTE to a page is to allow users to select text and then show a popup with formatting controls next to it.Both ways are great, but few WYSIWYG editors provide both these editing options, focusing on just one of these editing experiences.Froala Editor provides a solid WYSIWYG editor, working for both of the aforementioned editing experiences, but also offers a pretty solid codebase, coded according to the latest standards and industry best practices.The Froala Editor is one of the few RTEs around with mobile and Retina support, making it also ideal for usage on mobile devices also.Utilizing the FontAwesome icon font for the editor’s buttons, Froala also reduces HTTP requests when loading the editor, improving page load time and providing a much more easier to style editor UI.Everything inside the Froala editing toolbars is interchangeable, developers being able to turn buttons and functionality on or off, or move them around to custom positions as they see fit.All in all the Froala Editor is a very well done WYSIWYG solution, with lots of customization options, documentation and demos included.Froala Editor is available under a dual licensing model. The free version is available personal and non-commercial projects under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License, while for commercial usage, various paid licenses are available, depending on the desired usage requirements. Be sure to read the licensing agreement and don’t get mixed up.

[code tipe=”336″]

Download

Ponymark

Ponymark

A WYSIWYG editor that works using Markdown syntax, helping users easily format their text on the Web using a set of buttons and controls

Ponymark was forked and deployed on top of the PageDown WYSIWYG Markdown-powered editor. Just like most WYSIWYG editors, Ponymark works on top of a textarea, adding a text formatting toolbar above which users can utilize to format the text they enter inside the textarea.Support is included for most Markdown formatting options, from bold and italic text, to links, and image embeds.Developers can turn formatting buttons on or off in the toolbar, limiting or broadening the user’s text stylization options.Ponymark is framework agnostic, was built on a modular structure so it can be easily extended at later points and also supports GitHub Flavored Markdown as well.It also supports image drag and drop embedding, Imgur or local server uploads, and even syntax highlighting via highlight.js.

[code tipe=”300″]

Download

Redactor

Redactor

A jQuery rich text editor, a powerful tool for implementing a simple WYSIWYG editing experience for your site’s users and visitors

The Redactor jQuery plugin transforms regular textareas into WYSIWYG editors, allowing site users to enter and style their text as they see fit.Redactor was built to be used as a basic rich text editor, yet it has slowly evolved from a nice open source project to an advanced, commercially available, text formatting toolkit.The editor has seen wide-spread adoption in many open source or commercial projects, being the default text formatting WYSIWYG editor for projects like Pulse CMS, Perch, or Statamic.If you choose to go with Redactor for one of your next projects, the editor will greatly reduce the time spent formatting text, and make life a lot more easier for both developers and end-users alike.

[code tipe=”728″]

Download

Squire

Squire

A WYSIWYG editor for transforming your textareas into a fully-featured text formatting tool, complete with a fully-working editing toolbar

Squire is a rich text editor created using JavaScript and HTML5.It can be used in any project and help developers provide a text editing component.Most text editing controls like making text bold, italic or underline are included, along with inserting links, changing fonts, text size, direction or alignment.The default Squire package comes without a graphic package, letting developers create their own text formatting toolbars.This approach is much more professional than providing developers with a built-in toolbar UI, which in most cases needs to be stripped down and re-built to integrate with custom projects.There’s a ready-made toolbar UI included in the sample project download package, just in case you’re too lazy to build your own.The Squire component was created for usage in modern browsers, has no external dependencies and was created for dealing with text alone. This means no support for inserting iframes, Flash movies or anything else, Squire not including support for such features. For this, use more advanced/bulky tools like CKEditor or TinyMCE.

Download

Trumbowyg

Trumbowyg

A WYSIWYG editor working on top of jQuery and the HTML5 contentEditable feature, extremely easy to customize and ready for production usage

Trumbowyg is one of the new wave of rich text editors that utilize the new approach to text formatting by taking full advantage of HTML5’s new contentEditable attribute.The plugin looks and works like other WYSIWYG editors, using a toolbar on top of the editing area, full of buttons which will help format the contained text.All the text is formatted using HTML syntax, and the content of the toolbar is fully customizable, Trumbowyg letting developers decide what buttons to show using a simple config.Overall the editor is quite lightweight, and new features can easily be added via plugins or localization packages.A few demo editors are included with the Trumbowyg download package.

Download

Medium Editor

Medium Editor

A fantastically easy to deploy in-page WYSIWYG editor written in JavaScript, perfect for helping users edit the content of a page without reloading it

Modeled after the in-page editing toolkit provided by Medium.com to their editors, the Medium Editor will allow anyone to use a similar technology for editing the content of their page without relying on a bulky RTE that most of the time slow down page load times more than they help with text formatting.Medium Editor is also framework agnostic, being written in pure JavaScript. This means it can work with or without a bulky framework like Prototype or jQuery.A small demo is included with the Medium Editor download package.

Download

Dante Editor

Dante Editor

A simple WYSIWYG editor modeled after the inline text editor seen on the Medium.com blogging platform, with support for all of the original controls

Dante Editor, even if not the first clone of the Medium WYSIWYG editor, is actually the first that provides all of the originals formatting controls.This means you can actually embed media files inside your page with Dante, not just edit text like most of the other clones let you do.

Download

wysihtml

wysihtml

A framework-agnostic WYSIWYG editor, a tool for letting your users easily style their text using a simple Word-like formatting toolbar

Download

StackEdit

StackEdit

A JavaScript WYSIWYG editor for styling and previewing text inside a browser, complete with support for editing documents in the cloud

StackEdit uses Markdown to style text and is widely based on the PageDown editor. Besides just editing local files, it is also integrated with various document cloud storage services, helping users boost productivity by skipping the act of downloading and editing files in local desktop text editors.

Download

Decoda.js

Decoda.js

A WYSIWYG editor that you can use to replace your textareas with a modern formatting toolbar, with support for a multitude of text styling options

Decoda.js is a port to JavaScript of the Decoda PHP text parsing and formatting library. The editor works practically the same way, but instead of parsing text on the server side it uses a toolbar appended to a text area to replace or insert special (custom) formatting tags inside the text.Once the text entered inside the textarea, users can utilize the formatting toolbar to add their desired text styling options and submit the text when done.This text is then sent to a server where it can be passed through the Decoda library and converted to standards compliant HTML code.Basically Decoda.js is a frontend for the Decoda PHP library, allowing developers to easily embed it with their projects.All original Decoda features are supported and reflected as (optional) buttons on the Decoda.js formatting toolbar.This includes basic text beautification tags, embedding tags, table formatters, lists, code blocks, block quotes, links, and so on.A demo is included with the download package.

Download

Hallo

Hallo

A rich text editor (RTE) for the jQuery UI framework, working on top of the new HTML 5 contentEditable feature for real-time page edits

Works by editing text in-place, instead of loading a totally new page, where the desired text is shown inside an editor frame.To have additional text formatting options shown, just select a piece of text.Hallo’s source is written in CoffeeScript and compiled to JavaScript.The editor formats text via Markdown syntax.A demo is also included with the download package.

Download

Javascript Textarea BBCode Markup Editor

Javascript Textarea BBCode Markup Editor

This is a very simple and lightweight BBCode markup editor

Written in JavaScript, the editor replaces a normal textarea, adding a toolbar on the top with useful formatting commands. By default, it can make text bold/underline/italic, insert links, images, quotes and code sections.A similar HTML editor can be found here.

Download

Aloha Editor

Aloha Editor

An HTML5-based WYSIWYG editor, working on the front-end side of a site, allowing the user to edit the content right where it stands

Aloha Editor is what Web developers call an “inline” or “in-place” WYSIWYG editor.The editor works via the HTML5 contenteditable feature, and comes with proper support so it can be used across various browsers types and versions without having to worry about HTML5 support.After installing the editor, if you want to use it you can do so by hovering the mouse over a website section. A formatting toolbar will appear, relevant to the content the user will try to edit.Since Aloha is considerably smaller than classic WYSIWYG editors, it is very fast to load and save the edited content.

Download

fresherEditor

fresherEditor

A fully-featured WYSIWYG editor designed around the HTML 5 contentEditable feature and working atop the jQuery JavaScript framework

fresherEditor helps developers implement an inline rich text editor that lets users edit the page’s text content right where it stands.The plugin appends a formatting toolbar to each contentEditable zone, aiding users in styling their text with a set of ready-available controls.Various keyboard shortcuts are supported, along with Bootstrap integration.A demo fresherEditor is included with the download package.

Download

Popline

Popline

A powerful in-place WYSIWYG editor, built on top of jQuery and HTML 5, for adding a lightweight rich text editor to any Web page

Popline allows users to edit text with the help of a floating formatting toolbar.This toolbar appears only when a text is selected, and provides relevant options, based on the selected text.Besides the “Edit” mode, a “View” mode is also included for previewing the created text.A demo is included with the download package.Inspired by the PopClip Mac editor.

Download

ZenPen

ZenPen

A minimalistic JavaScript WYSIWYG text editor, allowing developers to edit a piece of text via the new HTML5 contenteditable attribute

ZenPen ships as a Web notepad where users can add their text and save it for later.Developers can utilize this feature and add ZenPen to their applications by integrating it with their CMSs or forums as a way for users to edit their text online, without a clumsy controls toolbar at the top.The ZenPen controls are non-intrusive and provide formatting options like blod, italic, quotes, links.After all the edits have been done, all page changes are saved client-side via localStorage, but this built-in behavior can be modified to save changes to a remote database as well.

Download

jQuery Notebook

jQuery Notebook

A jQuery-based WYSIWYG editor, inspired by the inline, in-place editing experience used by Medium.com to help their users format their blog posts

jQuery Notebook was developed to be a simple port of the Medium.com rich text editor.Most of the native Medium editor features are supported with jQuery Notebook as well, allowing developers to deploy a similar WYSIWYG tool for their sites as the one used on Medium.The plugin works by allowing the user to write his text, without showing any formatting toolbars above the text area.The formatting toolbar is only shown when selecting and hovering the text, as a popup tooltip with formatting controls inside it.Besides this, keyboard shortcuts are also supported, in the vase developers want to edit text in a fast pace and avoid selecting or hovering text.The keyboard shortcuts are customizable, along with the formatting buttons that appear on the WYSIWYG toolbar.A jQuery Notebook demo is included with the download package.

Download

ClassyEdit

ClassyEdit

A jQuery plugin that transforms regular textarea fields into fully blown WYSIWYG editors, perfect for enriching the user text writing experience

ClassyEdit can be used to add a small rich text editor instead of your ol’ classical textarea field.ClassyEdit allows users to enter their text and use a set of buttons and controls displayed on a toolbar above the textarea to style the text accordingly.The plugin can be used for comment fields, contact forms, forums, CMSs, blogs, and many other more.A demo is included with the download package.

Download

bootstrap-wysiwyg

bootstrap-wysiwyg

An open source, lightweight WYSIWYG editor for jQuery and the Bootstrap UI framework, a tool for easily formatting text on the Web

In case as a developer you really like working with Bootstrap, there’s a commonly used UI component that’s missing from the framework, and that’s the WYSIWYG editor.The “bootstrap-wysiwyg” jQuery plugin adds support for this component in Bootstrap, allowing developers to easily deploy it to a live project and provide rich text editing support to any textarea.As you’d imagine the editor is quite malleable and the formatting controls available on its toolbar can be turned on or off for faster loading or richer text editing features.The editor is also mobile friendly, uses an icon font for the toolbar buttons, and supports keyboard shortcuts as well.A basic demo editor is included with the bootstrap-wysiwyg download package.

Download

NicEdit

NicEdit

This is a JavaScript WYSIWYG editor for advance formatting text using a simple GUI

Can be used as a stand-alone, or integrated with more complex GUIs or CMSs as a plugin.Under the hood, NicEdit works by replacing a normal textarea with a set of controls that will allow the user to style entered text the way he wants with a Word-like set of controls.Various demos of NicEdit are included with the download package. Also a custom download package builder is provided for lighter or more advanced versions of NicEdit.

Download

Raptor Editor

Raptor Editor

An HTML5 WYSIWYG editor

Raptor is available as a jQuery UI widget or a stand alone HTML5-driven editor.A demo is included with the download package.A WP version of this editor can be downloaded from here.

Download

Incoming search terms:

  • froala textarea example
  • froala vs tinymce
  • using-editor-aloha
  • wordpress mce alternative
Gravatar Image
Web developer, big fan of CakePHP, loving wordpress soo much. You can found him on Google+ and Facebook. Dont forget to follow him on Twitter.