Вот как вы можете добавить его в приложение Ext JS 7 Classic.
Указания
Для использования редактора Froala в классическом режиме необходимо сделать две вещи. 1. Импортируйте ресурсы javascript в свое приложение. 2. Инициализируйте редактор Froala с помощью TextArea
Источник HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Include Editor style. -->
<link href='https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
<!-- Include JS file. -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/js/froala_editor.pkgd.min.js'></script>
</head>
<body>
</body>
</html>
Источник Javascript
Ext.application({
name: 'Ext JS 7 Classic & Froala Example for Modern & Classic Themes',
// You get a Froala license with the Ext JS enterprise edition.
// Email Froala support to get your license.
// https://wysiwyg-editor.froala.help/hc/en-us
launch: function () {
var editor;
var htmlValue = '<p>The <a href="https://www.froala.com/wysiwyg-editor">Froala Editor</a> is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications.</p><p><br></p><p><img src="https://www.sencha.com/wp-content/uploads/2015/03/built-in-support-for-rpc-requestfactory-and-json.png" style="width: 300px;" class="fr-fic fr-dib fr-fil"></p>';
var displayHtml = function () {
var htmlContent = editor.html.get();
Ext.Msg.alert('Status', htmlContent);
}
// Once the panel is ready, render the Froala HTML Editor
var renderEditor = function () {
editor = new FroalaEditor('#my-froala-editor-id1', {}, function () {
// Call the method inside the initialized event.
editor.html.set(htmlValue);
});
}
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
fullscreen: true,
margin: 20,
items: [{
xtype: 'panel',
padding: 0,
items: [{
xtype: 'textareafield',
id: 'my-froala-editor-id1',
width: '100%',
height: 400,
// Fix editor bottom clipping from panel margin...
margin: '0 0 80 0'
}],
listeners: {
boxready: renderEditor, // classic listener
painted: renderEditor, // modern listener
}
}, {
xtype: 'button',
text: 'Display HTML',
margin: '5 0 10 0',
handler: displayHtml, // classic listener
listeners: {
tap: displayHtml, // modern listener
}
}]
});
}
});
Пример Sencha Fiddle
Попробуйте код здесь: https://fiddle.sencha.com/#view/editor&fiddle/30hl