| Name | Type | Default |
|---|
|
createCommand
|
(name:EditorCreateCommand['name']) => void
|
null
|
Interface EditorCreateCommand {
name?: string;
}
Sets or gets the jqxEditor's createCommand property. The property allows you to add new commands or override existing commands.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
constructor(props: {}) {
super(props);
this.state = {
createCommand: (name: string): any => {
switch (name) {
case 'datetime':
return {
type: 'list',
tooltip: 'Insert Date/Time',
init: function(widget) {
widget.jqxDropDownList({ placeHolder: 'Insert Custom HTML', width: 160, source: ['Insert Time', 'Insert Date'], autoDropDownHeight: true });
},
refresh: function(widget, style) {
// do something here when the selection is changed.
widget.jqxDropDownList('clearSelection');
},
action: function(widget, editor) {
const widgetValue = widget.val();
const date = new Date();
// return object with command and value members.
return { command: 'inserthtml', value: widgetValue == 'Insert Time' ? date.getHours() + ':' + date.getMinutes() : date.getDate() + '-' + date.getMonth() + '-' + date.getFullYear() };
}
}
case 'backcolor':
return {
type: 'colorPicker',
tooltip: 'Background',
init: function(widget) {
widget.jqxDropDownButton({ width: 160 });
widget.jqxDropDownButton('setContent', 'Choose Background');
},
refresh: function(widget, style) {
// do something here when the selection is changed.
},
action: function(widget, editor) {
// return nothing and perform a custom action.
const color = widget.val();
editor.css('background', color);
}
}
}
}
}
}
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'datetime backcolor'} createCommand={this.state.createCommand}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
disabled
|
boolean
|
false
|
Sets or gets whether the jqxEditor is disabled.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}
disabled={true}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
editable
|
boolean
|
true
|
Sets or gets the jqxEditor's editable property. The property determines whether the jqxEditor is read only.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}
editable={false}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
height
|
string | number
|
null
|
Sets or gets the jqxEditor's height.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
lineBreak
|
EditorLineBreak
|
"default"
|
EditorLineBreak: "br" | "p" | "div" | "default"
Sets or gets the jqxEditor's line break. The property determines whether the jqxEditor creates BR, P or DIV tag when the Enter key is pressed or uses the web browser's default mode.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}
lineBreak={'div'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
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;
html?: string;
}
Sets or gets the jqxEditor's localization. The property determines the localization of the jqxEditor.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
constructor(props: {}) {
super(props);
this.state = {
localization: { 'bold': 'Fett', 'italic': 'Kursiv', 'underline': 'Unterstreichen', 'format': 'Block-Format', 'font': 'Schriftname', 'size': 'Schriftgröße', 'color': 'Textfarbe', 'background': 'Hintergrundfarbe', 'left': 'Links ausrichten', 'center': 'Mitte ausrichten', 'right': 'Rechts ausrichten', 'outdent': 'Weniger Einzug', 'indent': 'Mehr Einzug', 'ul': 'Legen Sie ungeordnete Liste', 'ol': 'Geordnete Liste einfügen', 'image': 'Bild einfügen', 'link': 'Link einfügen', 'html': 'html anzeigen', 'clean': 'Formatierung entfernen' }
}
}
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}
localization={this.state.localization}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
pasteMode
|
EditorPasteMode
|
"html"
|
EditorPasteMode: "html" | "text"
Sets or gets the jqxEditor's paste mode. The property determines whether the clipboard data is pasted as HTML or Plain Text. Possible values: "html" and "text".
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}
pasteMode={'text'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
rtl
|
boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}
rtl={true}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
stylesheets
|
Array<any>
|
[]
|
Sets or gets the jqxEditor's stylesheets. The property allows you to include stylesheets into the jqxEditor's IFrame.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
constructor(props: {}) {
super(props);
this.state = {
stylesheets: ['../../jqwidgets/styles/jqx.base.css']
}
}
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}
stylesheets={this.state.stylesheets}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
theme
|
string
|
''
|
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}
theme={'material'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
toolbarPosition
|
EditorToolbarPosition
|
"top"
|
EditorToolbarPosition: "top" | "bottom"
Sets or gets the jqxEditor's toolbar position. The property determines the position of the jqxEditor's toolbar.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}
toolbarPosition={'bottom'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
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 jqxEditor's tools. The property determines the visibility and layout of the jqxEditor's tools.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
width
|
string | number
|
null
|
Sets or gets the jqxEditor's width.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
|
change
|
Event
|
|
This is triggered when the jqxEditor's value is changed.
Code examples
Bind to the change event of jqxEditor.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public render() {
return (
<JqxEditor ref={this.myEditor} onChange={this.onChange}
width={850} height={400} tools={'bold italic underline | format font size'}>
Editor Content Here...
</JqxEditor>
);
}
private onChange(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
| Name | Arguments | Return Type |
|---|
|
destroy
|
None
|
|
Destroys the widget.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public componentDidMount(): void {
this.myEditor.current!.destroy();
}
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
focus
|
None
|
|
Focuses the widget.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public componentDidMount(): void {
this.myEditor.current!.focus();
}
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
print
|
None
|
|
Prints the jqxEditor's value.
|
|
setMode
|
mode
|
|
Sets the jqxEditor's mode. The method has one boolean parameter which determines whether the jqxEditor displays its value as formatted html or html code.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public componentDidMount(): void {
this.myEditor.current!.setMode(true);
}
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
val
|
value
|
|
Sets or gets the value.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxEditor, { IEditorProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';
class App extends React.PureComponent<{}, IEditorProps> {
private myEditor = React.createRef<JqxEditor>();
public componentDidMount(): void {
this.myEditor.current!.val('New Editor Value!');
}
public render() {
return (
<JqxEditor ref={this.myEditor}
width={850} height={400} tools={'bold italic underline | format font size'}>
Editor Content Here...
</JqxEditor>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|