| Name | Type | Default |
|---|
|
createCommand
|
(name:Any) => Void
|
null
|
Sets or gets the createCommand property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [createCommand]="createCommand"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [disabled]="true"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
editable
|
Boolean
|
true
|
Sets or gets the editable property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [editable]="true"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
height
|
String | Number
|
null
|
Sets or gets the height property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
lineBreak
|
enum:EditorLineBreak
|
"default"
|
enum EditorLineBreak { BR, P, DIV, default } Sets or gets the lineBreak property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [lineBreak]="'div'"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
localization
|
EditorLocalization
|
{ "bold": "Bold", "italic": "Italic", "underline": "Underline", "format": "Format Block", "font": "Font Name", "size": "Font Size", "color": "Text Color", "background": "Fill Color", "left": "Align Left", "center": "Align Center", "right": "Align Right", "outdent": "Indent Less", "indent": "Indent More", "ul": "Insert unordered list", "ol": "Insert ordered list", "image": "Insert image", "link": "Insert link", "html": "View source", "clean": "Remove Formatting" }
|
interface EditorLocalization { bold?: String; italic?: String; underline?: String; format?: String; size?: Number | String; font?: String; color?: String; background?: String; left?: String; center?: String; right?: String; outdent?: String; indent?: String; ul?: String; ol?: String; image?: String; link?: String; clean?: String; } Sets or gets the localization property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [localization]="localization"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
pasteMode
|
enum:EditorPasteMode
|
"html"
|
enum EditorPasteMode { html, text } Sets or gets the pasteMode property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [pasteMode]="'text'"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [rtl]="true"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
stylesheets
|
Array<Any>
|
[]
|
Sets or gets the stylesheets property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [stylesheets]="stylesheets"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [theme]="'energyblue'"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
toolbarPosition
|
enum:EditorToolbarPosition
|
"top"
|
enum EditorToolbarPosition { top, bottom } Sets or gets the toolbarPosition property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [toolbarPosition]="'bottom'"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
tools
|
String
|
"bold italic underline | format font size | color background | left center right | outdent indent | ul ol | image | link | clean | html"
|
Sets or gets the tools property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400" [tools]="'bold italic underline'"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
width
|
Size
|
null
|
Sets or gets the width property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
|
|
change
|
Event
|
|
This is triggered when the jqxEditor's value is changed.
Code examples
Bind to the change event of jqxEditor.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor (onChange)="Change($event)" [width]="800" [height]="400"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent {
|
|
|
| Name | Return Type | Arguments |
|---|
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myEditor') myEditor: jqxEditorComponent;
|
|
focus
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myEditor') myEditor: jqxEditorComponent;
|
|
print
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myEditor') myEditor: jqxEditorComponent;
|
|
setMode
|
Void
|
mode: Boolean
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myEditor') myEditor: jqxEditorComponent; ngAfterViewInit(): void { this.myEditor.setMode(true);
|
|
val
|
String
|
value: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxEditor #myEditor [width]="800" [height]="400"> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </jqxEditor> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myEditor') myEditor: jqxEditorComponent; ngAfterViewInit(): void { let value = this.myEditor.val();
|