| Name | Type | Default |
|---|
|
createCommand
|
Function
|
null
|
Sets or gets the createCommand property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size} 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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size} 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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
editable
|
Boolean
|
true
|
Sets or gets the editable property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size} 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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
height
|
Number
|
null
|
Sets or gets the height property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size}> <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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
lineBreak
|
String
|
"default"
|
Sets or gets the lineBreak property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={ 'bold italic underline | format font size'} 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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
localization
|
Object
|
{ "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" }
|
Sets or gets the localization property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size} 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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
pasteMode
|
String
|
"html"
|
Sets or gets the pasteMode property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={ 'bold italic underline | format font size'} 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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size} 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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
stylesheets
|
Array
|
[]
|
Sets or gets the stylesheets property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size} 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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={ 'bold italic underline | format font size'} 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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
toolbarPosition
|
String
|
"top"
|
Sets or gets the toolbarPosition property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={ 'bold italic underline | format font size'} 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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
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 React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= '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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
width
|
Number
|
null
|
Sets or gets the width property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size}> <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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
|
change
|
Event
|
|
This is triggered when the jqxEditor's value is changed.
Code examples
Bind to the change event of jqxEditor.
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { componentDidMount() { this.refs.myEditor.on('change', (event) => { // Do Something... }); } render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size}> <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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
| Name | Return Type |
|---|
|
destroy
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { componentDidMount() { this.refs.myEditor.destroy(); } render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size}> <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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
focus
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { componentDidMount() { this.refs.myEditor.focus(); } render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size}> <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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
print
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { componentDidMount() { this.refs.myEditor.print(); } render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size}> <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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
setMode
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { componentDidMount() { this.refs.myEditor.setMode(true); } render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size}> <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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
val
|
String
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxEditor from 'jqwidgets-react/react_jqxeditor.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myEditor.val(); } render() { return ( <JqxEditor ref= 'myEditor' width={800} height={400} tools={bold italic underline | format font size}> <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> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
