Froala WYSIWYG editor in ExtJS 7.x

premium

Froala WYSIWYG editor in ExtJS 7.x

ExtJS 7.x has a Premium code package for Modern toolkit. The package lets you use the Froala WYSIWYG editor within your applications.

There are two versions of the component: a field version, for use in forms, and a regular component version, used anywhere else.

Both classes are simple wrappers around the Froala WYSIWYG editor, documented at https://www.froala.com/wysiwyg-editor. These are ExtJS components, so you can use them like any other component, including setting up listeners to detect component events and Froala native events. You can also run native Froala methods directly on the Froala instance.

Installation

The Froala code package is available via Open Tooling (ext-gen) as an npm package as well as a Sencha Cmd package hosted on Sencha’s CDN.

Install via Open Tools and npm

Links to detailed installation steps are given below, but in a nutshell you must:

Log in to the Sencha npm repository npm login --registry=https://npm.sencha.com --scope=@sencha
Use a terminal window and navigate to your ext-gen project and run npm install @sencha/ext-froala-editor
Configure your app to use the new code package by updating your app’s app.json.

In the app.json add froala-editor to the requires array.
```
 {
   // ...
   "requires": [
     "font-awesome",
     "froala-editor" 
   ],
   // ...
```
For details on npm repo login see Login to the npm repository.
For details on adding a package see Premium Packages - Add App Functionality Quickly.

Install via Sencha Cmd Packages on Sencha’s CDN

Configure your app to use the new code package by updating your app’s app.json requires array to include the package
Sencha Cmd will automatically download and install the new code package the next time you build your application

Add Froala to workspace.json

You have to add the Froala path to the workspace.json packages.dir string:

"packages": {
    "dir": "...,${workspace.dir}/node_modules/@sencha/ext-froala-editor",
    ...
}

Using the Froala Editor

There are two versions of the Froala Editor:

A component version — Ext.froala.Editor
A field version — Ext.froala.EditorField

These components are wrappers around a Froala Editor instance. They are configured and used identically, but the field version extends Ext.field.Field, and consequently, can be given a name and value, and be used in field panels and form panels.

Basic usage

There are two primary configs: value, which is the HTML value of the editor, and editor, which is the configuration for the Froala Editor instance being created.

The value config

The value config specifies the initial value of the editor. value is bindable and is the default bind property. Note that value is HTMl and therefore, will contain HTML tags.

Getting the value example:

myFroalaComponent.setValue('Hello world!');
console.log(myFroalaComponent.getValue()); // Logs "<p>Hello world!</p>"

Simple example:

Within a form you can use the field version. Its name-value pair will be reflected in form submits, or when calling getValue() on the form.

Froala instance configuration

The editor config lets you configure the Froala editor instance. You can use any Froala config, as documented at Froala Options.

Events

To listen to events, use the standard listeners component config. You can listen to native Froala events by using the froala prefix on the event name. Froala events are documented at Froala Events.

This example shows a Froala editor configured with listener for its change event, and in addition, a listener to the native Froala click event, specified by using the _froala-+ prefix.

Running Froala native methods

To run native Froala methods, use getEditor() to get a reference to the Froala instance, then run any method you wish. Froala methods are documented at Froala Methods.

For example, to get the character count you’d use this expression:

myFroalaComponent.getEditor().charCounter.count()

Startup time

When the FroalaEditor or FroalaEditorField is created, it takes a few milliseconds for the wrapped Froala instance to be created and initialized. When setting up events, this is transparent, but if you need to detect when the instance is ready, use the ready event. The instance also has an isReady boolean property that starts out false, and changes to true when the component is initialized.

This code illustrates the relationship between the property and event.

Specifying a Froala activation key

To use a licensed copy of the Froala Editor, you need an activation key, as documented at What is an Activation Key?

Note: The Froala Editor will display a red unlicensed banner when it is deployed to a published site without the activation key. Sencha Enterprise customers can request a free 12-month Froala Enterprise license for use with the Froala component by sending an email to [email protected] with their Sencha ID/customer account in an email, using “Sencha Ext JS 7.0 Froala Key Request” as the subject line.

You then specify the key in your applications app.json, within a config block named froala. This is an example that shows a section of app.json with the requires entry for the froala-editor code package, as well as the specification for the activation key.

{
    "name": "MyApp",
    "namespace": "MyApp",
    "framework": "ext",
    "requires": ["font-awesome", "froala-editor"],
    "froala": {
        "activation-key": "my-activation-key"
    }
    //...
}

Froala