Fate is a rich text editor (wysiwyg) natively written for angular (>= v2) in typescript with footprint and flexibility in mind. Its goal is to be very easy to customize and be as small as it can thanks to tree shaking. Bootstrap and Google Material styled version are included to fit in forms using those styles. To use the material one you will need to include Angular Material in your project.
Be warned that it's very early in the development of this module so many thing will change.
For a live demo of the editor you can go to the project's site.
Use npm to download the module: npm install --save fate-editor. Then import the FateModule in your app:
import { FateModule } from 'fate-editor';
// ...
@NgModule({
// ...
imports: [
// ...
FateModule
]
// ...
}) // ...This is the rich text input, it's a low level component that basically looks like a textbox. On it's own it doesn't have any UI to control the text but will respond to you system keyboard shortcut.
This is the id of the UI component that should target this input box. By default all inputs respond to all UIs which is normally not what you want. By specifying the uiIds you can choose which one to pair together.
This the number of row of text the input should show by default. This mimics the behaviour of the same property on textarea. Note that by default fate-input is resizable vertically so this only specifies the default height.
This is the placeholder text that will show when the input is empty and nothing is selected.
You can use ngModel like you would on any other input element and it will behave the same. The value that will be read and exported is dependent of the parser you've decided to inject, by default it's HTML.
This is the default UI for your input. It shows a bunch of buttons on a toolbar-like block. You can choose which buttons are available through the buttons property.
This allow you to choose which fate-input is targeted by this UI. For example you could do:
<fate-ui uiId="foo"></fate-ui>
<fate-input uiId="foo" [(ngModel)]="someHtml"></fate-input>This is an array of strings that define which buttons should be shown in which order, you can add "separator" at any position to add a separator between two buttons.
This is a all-in-one component that includes a UI and an input. It's mean to be a drop-in replacement to textarea in Bootstrap forms. Under the hood it's just using the two previously described components and styling them. You don't need to specify any uiId because they are generated automatically.
This the number of row of text the input should show by default. This mimics the behaviour of the same property on textarea. Note that by default fate-input is resizable vertically so this only specifies the default height.
This is the placeholder text that will show when the input is empty and nothing is selected.
This is an array of strings that define which buttons should be shown in which order, you can add "separator" at any position to add a separator between two buttons.
You can use ngModel like you would on any other input element and it will behave the same. The value that will be read and exported is dependent of the parser you've decided to inject, by default it's HTML.
This is a all-in-one component that includes a UI and an input. It's mean to be a drop-in replacement to textarea in Material forms. Under the hood it's just using the two previously described components and styling them. You don't need to specify any uiId because they are generated automatically.
This component is meant to be used like a normal input in material, that is it needs to be wrapped in a mat-form-field component like so:
<mat-form-field>
<fate-material placeholder="Some text"></fate-material>
</mat-form-field>You can use ngModel like you would on any other input element and it will behave the same. The value that will be read and exported is dependent of the parser you've decided to inject, by default it's HTML.
This the number of row of text the input should show by default. This mimics the behaviour of the same property on textarea. Note that by default fate-input is resizable vertically so this only specifies the default height.
This is the placeholder text that will show when the input is empty and nothing is selected.
This is an array of strings that define which buttons should be shown in which order, you can add "separator" at any position to add a separator between two buttons.
You can use ngModel like you would on any other input element and it will behave the same. The value that will be read and exported is dependent of the parser you've decided to inject, by default it's HTML.
Fate has been written to make it as easy as possible to extend and customize. This is done by subclassing one of its component or service and injecting it to replace the original.
Creating a custom set of icons for your app is the simplest form of customization:
import { Injectable } from '@angular/core';
import { FateIconService } from 'fate-editor';
@Injectable()
export class MyIconService extends FateIconService {
}export class MyIconService extends FateIconService {
protected iconMapping: any = {
'bold' : '<span>B<span>',
'italic' : '<span>I<span>',
// ...
};
}@NgModule({
// ...
providers: [
{ provide: FateIconService, useClass: MyIconService }
],
// ...
})