Introducing Froala into your Sencha Applications

We are happy to share that Froala recently became part of the Developer Tools portfolio and Sencha family! Froala provides a drop-in WYSIWYG rich text editor with a simple but powerful user interface for developing and editing web content easier and faster. In addition to the text editor, the company’s products include more than 170 pluggable, open source design blocks to build modern web applications. With Froala we can now add improved text editing capabilities to applications built with Ext JS, GXT and ExtReact. Take a tour for free!

Froala WYSIWYG Editor

The Froala editor is a beautiful Javascript web editor that’s easy to integrate for developers and your users will simply fall in love with its clean design. It’s so easy to add to your Javascript application by simply doing two steps. All you have to do is:

• Follow the getting started guide and import the Froala Javascript and CSS files into your application.
• Invoke the Froala editor to render the editor over the textarea.

That’s it! Now it’s ready to extend it further in your web application. It supports all the popular frameworks right off the bat. Try it out and see how easy it is by implementing it in your language or framework here.

Features

I get requests all the time for a more complex editor, and now we have an option with Froala. Like supporting RTL and all the popular languages, this editor scales nicely because of its high performance in complex and data rich applications.

Check out some of these nifty features:

• RTL & LTR support
• Over 37 languages supported
• Fully customizable, supports your branding
• Render images and document image placement
• Full page, popup, iframe editing modes and more
• Tables support
• 3rd party extension like the Wiris Math Editor

Using Froala with Ext JS

In this example, I’m showing how to use all the buttons for all the form factors. You can see below how easy it is to invoke the beautiful Froala editor to render over the textarea. This is a simple implementation, aimed at showing how simple it is to integrate it into your application. If you want to take it further, check out all the options you can add in the Froala documentation.

Check out the Sencha Fiddle example source:

Sencha Fiddle example source

And here’s a quick preview of what it looks like in the Sencha Fiddle.

Sencha Fiddle Preview

As part of the Sencha roadmap, we will be providing an Ext JS wrapper for the Froala editor that will help you easily integrate with Ext JS applications. We will also remove the jquery dependency with future Froala Ext JS wrappers.

Using Froala with ExtReact

If you’re using ExtReact, we have a simple application that shows how to configure the rich text editor together. It takes three steps to try it out.

• Fork the source, cloning a copy to your system
• Open terminal, navigate to cd packages/ext-react-froala-example/ and run npm install
• Then run npm start or use VSCode launcher to launch debugging

ExtReact with Froala Editor

Using Froala with GXT

I have added an editor example for GXT below to show how easy it is to integrate. It only took me two simple steps: import and call the Froala editor for my textarea. And now my application has a user friendly fashionable form editor.

Summary

We’re excited to welcome Froala to the Sencha family, enabling our community and customers to solve real world problems when expecting users to enter data into complex environments efficiently. Froala has flexible licensing for the editor and you can get yours now to start using with your Sencha applications.

Quick Reference

• Ext JS example source
• ExtReact example source
• GXT example source