Introducing Froala v4.0 —The Next Generation of WYSIWYG Editing

The latest and greatest milestone update for Our Best Wysiwyg HTML Editor, Froala Editor v4.0, was released today. The HTML Editor has undergone numerous changes and improvements, which you will learn about as you read this post.

What’s new in Version 4.0—Empowering Users 

The feedback loop that you maintain with our team allows us to turn around quality releases with an emphasis on your needs. To that end, we’ve been laser-focused on making the top-requested features of our users a reality.

With Track Changes, Markdown Support, and many other enhancements added to our Editor, there’s a lot to unpack with this release—read on to see the amazing things you can do with Froala Editor 4.0!

Track Changes

This feature enables Froala Editor to keep track of all the changes users make to their text, images, tables, styles, formatting, and more, followed by accepting and rejecting the changes accordingly through easy access to ‘Accept or Reject’ a ‘Single or All’ changes via accessible buttons in the toolbar. Additionally track addition and deletion of text, images, tables. Additionally, styling and formatting changes to text, images, tables.

Track Changes feature includes the following functionalities:

• Enable / Disable track changes – Users can enable and disable the track changes feature on Froala editor.
• Show / Hide tracked changes – Users can show or hide the changes made on the Froala editor.
• Accept / Reject Single change – Users can track and ACCEPT or REJECT the single / last change that is made on the editor. 
• Accept / Reject  ALL changes –  Users can track and ACCEPT or REJECT ALL changes that are made on the editor.

Try it yourself:

Track Changes makes WYSIWYG HTML editing awesome.

Track changes is a Froala Editor Plugin where we can track the new text, deleted text as well as various styling and format changes.

HTML

<div id="froala-editor">

  <h3>Track Changes makes WYSIWYG HTML editing awesome.</h3>

  <p>Track changes is a Froala Editor Plugin where we can track the new text, deleted text as well as various styling and format changes.</p>

</div>

JAVASCRIPT

<script>

  new FroalaEditor('div#froala-editor', {

    toolbarButtons: ['bold', 'italic', 'underline', 'fontFamily', 'color', 'paragraphStyle', 'trackChanges']

  })

</script>

Intuitive UI for Change Tracking: As with all our features, the UI for tracking changes will be simple and intuitive — aligned with the text editing usage everyone is most familiar with. With Track Changes enabled, any text or image additions are shown with a yellow highlight, and changes that are intended to be deleted are highlighted in red with a strikethrough.

Markdown Support : 

Markdown support provides the required formatting of words & phrases within the editor through code shortcuts. 

With this new feature Froala Editor users can easily add Markdown syntax to their text to indicate which words and phrases need to be formatted. The words and phrases can be formatted through code shortcuts through easy-to-use Markdown syntax.

When in markdown mode, the Froala Editor provides an easy split-screen view so users can see the changes in real-time.

Users can markdown Heading, Bold Text ,Italic, Blockquote, Ordered list , Unordered list, Code, Fenced code block, Horizontal rule, Link , Image, Table, Footnote , Strikethrough and Task list. Please find the list of Markdown Syntax provided by Froala under 4.0 release. 

For example, to denote a heading, users can add a hashtag before the word (e.g. #Heading1, #Heading2). Or to italicize text, *italic text*. Users can also mark down Bold Text, Blockquotes, Ordered or Unordered lists, Code blocks, Images, Task lists, and many more!

Try it yourself:

Markdown support makes WYSIWYG HTML editing awesome.

Markdown plugin in Froala editor provides flexible rich text and markdown content creation options for authors, and also provides robust, reliable markdown output for developer projects.

HTML

<div id="froala-editor">

  <h3>Markdown support makes WYSIWYG HTML editing awesome.</h3>

  <p>Markdown plugin in Froala editor provides flexible rich text and markdown content creation options for authors, and also provides robust, reliable markdown output for developer projects.</p>

</div>

JAVASCRIPT

<script>

  new FroalaEditor('div#froala-editor', {

    toolbarButtons: ['bold', 'italic', 'underline', 'fontFamily', 'color', 'paragraphStyle', 'markdown']

  })

</script>