We are excited to announce that Froala has recently joined the Developer Tools portfolio and the Sencha family! Froala offers a drop-in WYSIWYG rich text editor with a simple but powerful user interface for creating and editing web content more easily and quickly. Aside from the text editor, the company’s products include over 170 pluggable, open-source design blocks for building modern web applications. We can now add improved text editing capabilities to applications built with Best Javascript Framework, GXT, and ExtReact thanks to Froala. Why don’t you take a free tour? Try the WYSIWYG Editor for free!
Table of Contents
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 Ext JS Bridges
If you’re using ExtReact, ExtAngular or ExtWebComponents we have an online kitchenSink application that shows how to configure the rich text editor together.
- ExtReact KitchenSink example
- ExtAngular KitchenSink example
- ExtWebComponents KitchenSink example
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
- ExtAngular example
- ExtWebComponents example
- GXT example source
What's your reaction?
0
0
So you’ve implemented integration but we need to acquire additional licensing in order to use it with ExtJS?
Was TinyMCE, CKEditor or other open source products considered or will they be considered in the future?
Good questions. You’ll have to acquire an additional licensing at froala.com. I think you’ll find that Froala is a fully featured product compared to the other editors at a lower cost.
Another note: The ‘so-called’ open source TinyMCE and CKEditor also require commercial licencing now for commercial projects.
Will Froala be rewritten for ExtJS 7.x to remove the jQuery dependency, and instead be based on ExtJS?
Good question, that’s one of the top feature requests. I’ve heard the Froala team has made some progress with the feature but there’s some work still to be done. It’s a big change but it’s on the roadmap, so it may take some more time to be done. https://wysiwyg-editor-roadmap.froala.com/public?_ga=2.178444835.681777149.1539804225-164891600.1536371244
We have some plans to integrate Froala into Ext JS, but it will be a two-stepped approach. At first, it will consume jQuery. We’re aiming at driving added value to start with. Secondly, engineering is looking at the options with deeper Ext JS integration, it’s new so I haven’t heard yet how this will land, but it is on our minds.
Thanks for the info.
Would be great to get the extjs integration blog post info into a repo and up on the froala page with a shiny extjs logo next to the other frameworks logos. ;-)
First I was excited then came the disappointment. Adding a “family” editor to Ext JS with jQuery is not really adding something new is it? When you add something to Ext JS it has to be a native Ext JS component, not a jQuery plugin in an iframe.
And also an additional license to buy? When comes the moment that at Sencha they make their very loyal developers happy, by offering something as a bonus for sticking around, when so many have left already? But then I mean something native to their frameworks.
This is a step backwards. JQuery is a legacy library and in no way should it be shoehorned into a ExtJS application just to run some licensed HTML editor. Sencha you are not listening to your loyal users. Why wouldn’t you just extend the current classic HTML editor or is the development team only capable of shoving in OEM stuff that makes the whole jQuery ecosystem such a mess. I don’t see a bright future for ExtJS anymore after this and it’s time for my company to move on I think.
This is a ‘first step’ of an externally successful product. (in fact the most popular current editor) and was AQUIRED, not written by Sencha.
The devs of Froala are now JS devs on the Sencha team. Froala has a large user base already, and already had removing jQuery dep on their roadmap pre-Idera buying it. (I knew this as we used it also previously) https://wysiwyg-editor-roadmap.froala.com/public?_ga=2.178444835.681777149.1539804225-164891600.1536371244 – has most votes to move it to vanilla js, which would also suit extjs, as perhaps extjs ‘core’ could be used in place.
If you’re deciding ExtJS or not by this first step, you’re not evaluating the proposition well IMHO.
This editor has been used widely on the web with jQuery for a while and requires a rewrite to get it working with ExtJS, which we have been given assurance that will happen in time.
Sorry, I don’t see this in the official blog or from an official employee of Sencha and even if it was, Idera has already changed decisions. If Froala wasn’t ready to be integrated into Ext JS maybe it wasn’t time to show an integration that causes you to include jQuery.
Also, Ext JS used to be “one install, no dependencies” and customers saw this as a big advantage of Ext JS over the open source world. Now this blog is showing a different path that gets away from the “no dependencies” so don’t be surprised if you get push back like what @Mike is doing.
It’s written above in reply to my other comment now.
While I agree about your comment, it wasn’t always dependency free, and as a stepping stone for immediate integration (which some of us already have done) with Froala, it’s at least acknowledgement of the future ahead.
Of course it would be great if Froala shipped with a lite extjs ‘core’ (with no OEM clause) under the hood for the framework free version.
I honestly have never heard of Froala until this blog post no matter how popular you say it is. There is nothing in the blog post to suggest this will become an integrated ExtJS component. If Froala was “AQUIRED” then why is it an extra cost? Shouldn’t it be included in the Premium subscription?
Hi there, everything is going sound here and ofcourse
every one is sharing information, that’s really fine, keep up writing. https://ketokenetics.org/
Sir thank you so much for the froala app; I would like to use it from now on.
How come ExtJS isn’t listed on the froala frameworks page?
https://www.froala.com/wysiwyg-editor
Application with many interesting features and attractive. I enjoyed this app.
Do this froala editor can be used in EXTJS 4.2 version or only can be used in the EXTJS new version only?
Great work on Rich text editor JavaScript . Very much useful for bloggers. Thank U.