| 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 {
Change(event: any): void
{
// Do Something
}
}
|
|
|
| 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;
ngAfterViewInit(): void
{
this.myEditor.destroy();
}
}
|
|
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;
ngAfterViewInit(): void
{
this.myEditor.focus();
}
}
|
|
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;
ngAfterViewInit(): void
{
this.myEditor.print();
}
}
|
|
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();
}
}
|