This document discusses adding rich text editing capabilities to web apps using the Froala editor. It covers Froala's features and capabilities, how to install and configure Froala in Ext JS apps, and a demo of Ext JS integrated with Froala. The latest Froala release, v2.9.0, is also summarized. Comparisons are made between Froala and Ext JS's built-in HTML editor component.

1. © 2018 Sencha Inc.
Adding Rich Text Editing to Your Web Apps
with Froala
Sandeep Adwankar
Sr. Product Manager
@adwankar

2. © 2018 Sencha Inc.
What will be covered
• Rich Text Editing Use Cases
• Froala Editor Capabilities
• Latest Release - Froala 2.9.0
• Comparison with Ext JS HTML Editor
• Using Froala in Ext JS Apps
• Demo
• Roadmap

3. © 2018 Sencha Inc.
Rich Email Authoring
https://www.froala.com/wysiwyg-editor/customers/closeio

4. © 2018 Sencha Inc.
Rich Email Authoring
https://www.froala.com/wysiwyg-editor/customers/closeio

5. © 2018 Sencha Inc.
Landing Page Creation
https://www.froala.com/wysiwyg-
editor/customers/unbounce

6. © 2018 Sencha Inc.
Portfolio Creation
https://www.froala.com/wysiwyg-
editor/customers/artstation

7. © 2018 Sencha Inc.
Website Design
https://www.froala.com/design-blocks/

8. © 2018 Sencha Inc.
Froala Editor Capabilities

9. © 2018 Sencha Inc.
Froala Editor
• Advanced feature set
• Powerful API
• Detailed documentation
• Easy customization
• Easy theming
9

10. © 2018 Sencha Inc.
WYSIWYG HTML Editor

11. © 2018 Sencha Inc.
Powerful API (and Docs)

12. © 2018 Sencha Inc.
Out-of-Box Plugins

13. © 2018 Sencha Inc.
Easy Customization

14. © 2018 Sencha Inc.
Easy Theming

15. © 2018 Sencha Inc.
Froala 2.9.0

16. © 2018 Sencha Inc.
Froala 2.9.0 Release
• Expanded Font Awesome icon support
• Document mode and PDF export
• Responsive videos
• Advanced Image Manager
• Advanced list item types
• Enhanced text formatting with inline classes & line height
16

17. © 2018 Sencha Inc.
Comparison with Ext JS HTML Editor

18. © 2018 Sencha Inc.
Ext JS HtmlEditor Component
18

19. © 2018 Sencha Inc.
Using Froala in Ext JS Apps

20. © 2018 Sencha Inc.
Install Froala
• Open Tooling:
npm install froala-editor -g
• Sencha Cmd
download Froala and copy into “resources” folder
20

21. © 2018 Sencha Inc.
app.json
21
"js": [
...
{
"path": "node_modules/jquery/dist/jquery.min.js"
},
{
"path": "node_modules/froala-editor/js/froala_editor.pkgd.min.js"
},
{
"path": "node_modules/froala-editor/js/plugins/video.min.js“
}
],

22. © 2018 Sencha Inc.
app.json
22
"css": [
...
{
"path": "node_modules/froala-editor/css/froala_style.min.css"
},
{
"path": "node_modules/froala-editor/css/froala_editor.pkgd.min.css"
},
{
"path": "node_modules/froala-editor/css/plugins/video.min.css"
}
],

23. © 2018 Sencha Inc.
Application Code: View
23
items: [{
xtype: 'textareafield',
id: 'mytextareaid
}],
listeners: {
//boxready event for classic toolkit
painted: 'renderEditor'
}

24. © 2018 Sencha Inc.
Application Code: Controller
24
renderEditor: function () {
$('#mytextareaid textarea').froalaEditor({
pluginsEnabled: ['video']
});
}

25. © 2018 Sencha Inc.
Ext JS with Froala Demo

26. © 2018 Sencha Inc.
Roadmap
• Froala V3
• Ext JS 7.0 - Froala Editor Component
26

27. © 2018 Sencha Inc.
Froala Download
https://www.froala.com/wysiwyg-
editor/download

28. © 2018 Sencha Inc.
Froala Download
https://www.froala.com/wysiwyg-
editor/download

29. © 2018 Sencha Inc.
Q &A

30. © 2018 Sencha Inc.
Sandeep Adwankar
Sr. Product Manager
Sandeep.adwankar@sencha.com
@adwankar