The smartest and world's most beautiful WYSIWYG rich text editor.

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