Properties

NameTypeDefault
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);

Events

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);

Methods

NameArgumentsReturn 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);