ionic-rich-text v0.2.7
Ionic 3 Rich Text
A simple rich text editor (or HTML editor) for Ionic 3 applications. I took the idea of judgewest2000 and adapted it to my needs.
Installing
npm i ionic-rich-text
Import it into your app.module
import { RichTextModule } from 'ionic-rich-text/dist/rich-text-module';
.
.
.
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
RichTextModule
],
If you are using lazy loading, you might have to import the module into the page's module as well.
Usage
You can just use the editor with the tag
<rich-text [formControlItem]="item"></rich-text>
and in your .ts file:
constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
this.item = this.fb.control('');
}
Options
You can pass an object to the component to enable/disable some of its functionalities (disabled ones will not be visible)
Option | Description |
---|---|
bold | If the bold option is enabled |
italic | If the italic option is enabled |
underline | If the underline option is enabled |
strikethrough | If the strikethrough option is enabled |
largeText | If the large text option is enabled |
smallText | If the small text option is enabled |
alignLeft | If the align left option is enabled |
alignCenter | If the align center option is enabled |
alignRight | If the align right option is enabled |
justify | If the justify option is enabled |
lineJump | If the line jump option is enabled |
orderedList | If the ordered list option is enabled |
unorderedList | If the unordered list option is enabled |
canClose | If the editor can be opened/closed on demand |
There is a type for this object definition:
export interface RichTextOptions {
undo?: boolean;
redo?: boolean;
bold?: boolean;
italic?: boolean;
underline?: boolean;
largeText?: boolean;
smallText?: boolean;
alignLeft?: boolean;
alignCenter?: boolean;
alignRight?: boolean;
justify?: boolean;
lineJump?: boolean;
orderedList?: boolean;
unorderedList?: boolean;
strikethrough?: boolean;
canClose?: boolean;
}
So you can do
<rich-text [formControlItem]="item" [options]="{canClose: true, lineJump: false}"></rich-text>
Authors
- Ismael Funes - Initial work - PurpleBooth
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Acknowledgments
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago