Editor Value in React Rich Text Editor Component
16 May 202524 minutes to read
Set placeholder text
Specifies the placeholder for the Rich Text Editor’s content used when the editor’s content area is empty through the placeholder property.
You can customize the appearance of the placeholder text by targeting the e-rte-placeholder
class in your CSS. This allows you to modify properties such as font family, color, and other styles.
.e-richtexteditor .e-rte-placeholder {
font-family: monospace;
}
[Class-component]
/**
* Rich Text Editor - Placeholder Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
render() {
return (<RichTextEditorComponent placeholder={'Type Something'}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;
/**
* Rich Text Editor - Placeholder Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditor,RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
public render() {
return (
<RichTextEditorComponent placeholder={'Type Something'}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;
[Functional-component]
/**
* Rich Text Editor - Placeholder Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
return (<RichTextEditorComponent placeholder={'Type Something'}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;
/**
* Rich Text Editor - Placeholder Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditor,RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
return (
<RichTextEditorComponent placeholder={'Type Something'}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;
Get and set value
Setting Values
You can set the initial content of the Rich Text Editor using the value
property. There are two methods to accomplish this:
-
Using the value property directly.
-
Using the valuetemplate property allows you to customize the content of the Rich Text Editor.
Retrieving Values
To get the content from the Rich Text Editor, use the following approaches:
- Using the value property: This returns the current content of the editor.
[Class-component]
import { Component, RefObject, createRef } from 'react';
import * as React from 'react';
import { RichTextEditorComponent, Inject, Toolbar, HtmlEditor, Image, QuickToolbar, Link } from '@syncfusion/ej2-react-richtexteditor';
class App extends Component {
constructor(props) {
super(props);
this.editorRef = createRef();
this.state = {
editorValue: '',
};
}
toolbarSettings = {
items: [
'Bold',
'Italic',
'Underline',
'|',
'Formats',
'Alignments',
'OrderedList',
'UnorderedList',
'|',
'CreateLink',
'Image',
'|',
'SourceCode',
'|',
'Undo',
'Redo',
],
};
componentDidMount() {
if (this.editorRef.current) {
this.editorRef.current.value =
'<p>Welcome to Syncfusion RichTextEditor!</p>';
}
}
getEditorContent = () => {
if (this.editorRef.current) {
this.setState({ editorValue: this.editorRef.current.value });
}
};
render() {
return ( <div>
<h1>Rich Text Editor</h1>
<RichTextEditorComponent
ref={this.editorRef}
toolbarSettings={this.toolbarSettings}
>
<Inject services={[Toolbar, HtmlEditor, Image, QuickToolbar, Link]} />
</RichTextEditorComponent>
<button onClick={this.getEditorContent} style=>
Get Editor Value
</button>
<p>
<strong>Editor Value:</strong> {this.state.editorValue}
</p>
</div>);
}
}
export default App;
import { Component, RefObject, createRef } from 'react';
import * as React from 'react';
import { RichTextEditorComponent, Inject, Toolbar, HtmlEditor, Image, QuickToolbar, Link } from '@syncfusion/ej2-react-richtexteditor';
interface AppState {
editorValue: string;
}
class App extends Component<{}, AppState> {
private editorRef: RefObject<RichTextEditorComponent>;
private toolbarSettings: object = {
items: [
'Bold',
'Italic',
'Underline',
'|',
'Formats',
'Alignments',
'OrderedList',
'UnorderedList',
'|',
'CreateLink',
'Image',
'|',
'SourceCode',
'|',
'Undo',
'Redo',
],
};
constructor(props: {}) {
super(props);
this.editorRef = createRef();
this.state = {
editorValue: '',
};
}
componentDidMount() {
if (this.editorRef.current) {
this.editorRef.current.value = 'Welcome to Syncfusion RichTextEditor!';
}
}
getEditorContent = () => {
if (this.editorRef.current) {
this.setState({ editorValue: this.editorRef.current.value });
}
};
public render() {
return (
<div>
<h1>Rich Text Editor</h1>
<RichTextEditorComponent
ref={this.editorRef}
toolbarSettings={this.toolbarSettings}
>
<Inject services={[Toolbar, HtmlEditor, Image, QuickToolbar, Link]} />
</RichTextEditorComponent>
<button onClick={this.getEditorContent} style=>
Get Editor Value
</button>
<p>
<strong>Editor Value:</strong> {this.state.editorValue}
</p>
</div>
);
}
}
export default App;
[Functional-component]
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { useState, useRef, useEffect } from 'react';
function App() {
const [editorValue, setEditorValue] = useState('');
const editorRef = useRef(null);
const toolbarSettings = {
items: [
'Bold',
'Italic',
'Underline',
'|',
'Formats',
'Alignments',
'OrderedList',
'UnorderedList',
'|',
'CreateLink',
'Image',
'|',
'SourceCode',
'|',
'Undo',
'Redo',
],
};
useEffect(() => {
if (editorRef.current) {
editorRef.current.value = 'Welcome to Syncfusion RichTextEditor!';
}
}, []);
const getEditorContent = () => {
if (editorRef.current) {
setEditorValue(editorRef.current.value);
}
};
return ( <div className="App">
<h1>Rich Text Editor</h1>
<RichTextEditorComponent ref={editorRef} toolbarSettings={toolbarSettings}>
<Inject services={[Toolbar, HtmlEditor, Image, QuickToolbar, Link]} />
</RichTextEditorComponent>
<button onClick={getEditorContent}>Get Editor Value</button>
<div>
<h3>Editor Value:</h3>
<p>{editorValue}</p>
</div>
</div>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { useState, useRef, useEffect } from 'react';
function App() {
const [editorValue, setEditorValue] = useState<string>('');
const editorRef = useRef<RichTextEditorComponent | null>(null);
const toolbarSettings: object = {
items: [
'Bold',
'Italic',
'Underline',
'|',
'Formats',
'Alignments',
'OrderedList',
'UnorderedList',
'|',
'CreateLink',
'Image',
'|',
'SourceCode',
'|',
'Undo',
'Redo',
],
};
useEffect(() => {
if (editorRef.current) {
editorRef.current.value = 'Welcome to Syncfusion RichTextEditor!';
}
}, []);
const getEditorContent = () => {
if (editorRef.current) {
setEditorValue(editorRef.current.value);
}
};
return (
<div className="App">
<h1>Rich Text Editor</h1>
<RichTextEditorComponent ref={editorRef} toolbarSettings={toolbarSettings}>
<Inject services={[Toolbar, HtmlEditor, Image, QuickToolbar, Link]} />
</RichTextEditorComponent>
<button onClick={getEditorContent}>Get Editor Value</button>
<div>
<h3>Editor Value:</h3>
<p>{editorValue}</p>
</div>
</div>
);
}
export default App;
- Using the change event: The
change
event is triggered when the Rich Text Editor loses focus and its content has been modified. This event allows you to capture and handle content changes dynamically.
[Class-component]
import { Component} from 'react';
import * as React from 'react';
import { RichTextEditorComponent, Inject, Toolbar, HtmlEditor, Image, QuickToolbar, Link } from '@syncfusion/ej2-react-richtexteditor';
class App extends Component {
onChange = (args) => {
console.log('Rich Text Editor value is:' + args.value);
};
rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
render() {
return ( <div>
<RichTextEditorComponent
value={this.rteValue}
change={this.onChange}
>
<Inject services={[Toolbar, HtmlEditor, Image, QuickToolbar, Link]} />
</RichTextEditorComponent>
</div>);
}
}
export default App;
import { Component } from 'react';
import * as React from 'react';
import { RichTextEditorComponent, ChangeEventArgs, Inject, Toolbar, HtmlEditor, Image, QuickToolbar, Link } from '@syncfusion/ej2-react-richtexteditor';
class App extends Component<{}, AppState> {
onChange = (args: ChangeEventArgs) => {
console.log('Rich Text Editor value is:' + args.value);
};
private rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
public render() {
return (
<div>
<RichTextEditorComponent
value={this.rteValue}
change={this.onChange}
>
<Inject services={[Toolbar, HtmlEditor, Image, QuickToolbar, Link]} />
</RichTextEditorComponent>
</div>
);
}
}
export default App;
[Functional-component]
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
const onChange = (args) => {
console.log('Rich Text Editor value is:' + args.value);
};
return (<div className="App">
<RichTextEditorComponent height={350} value={rteValue} change={onChange}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
</div>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ChangeEventArgs } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
const onChange = (args: ChangeEventArgs ) => {
console.log('Rich Text Editor value is:' + args.value);
};
return (
<div className="App">
<RichTextEditorComponent height={350} value={rteValue} change={onChange}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
</div>
);
}
export default App;
Two-way binding value
Two-way binding allows the Syncfusion® React Rich Text Editor to stay synchronized with the component’s state. When the state is updated, all instances of the editor using the same state will reflect the changes automatically.
In the below example, the React useState
hook is used to manage the content of the editor. Initially, the editor displays “Initial content”. After one second, a useEffect
hook updates the state to “Updated content after 1 second”.
Since both editor instances use the same state variable (editorContent), they will update simultaneously when the state changes.
[Class-component]
import * as React from 'react';
import { HtmlEditor, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
editorContent: 'Initial content',
};
this.timer = null;
}
componentDidMount() {
this.timer = setTimeout(() => {
this.setState({ editorContent: 'Updated content after 1 seconds' });
}, 1000);
}
componentWillUnmount() {
if (this.timer) {
clearTimeout(this.timer);
}
}
render() {
return ( <div>
<h3>Editor 1</h3>
<RichTextEditorComponent value={this.state.editorContent}>
<Inject services={[Toolbar, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
<h3>Editor 2</h3>
<RichTextEditorComponent value={this.state.editorContent}>
<Inject services={[Toolbar, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
</div>);
}
}
export default App;
import * as React from 'react';
import { HtmlEditor, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
class App extends React.Component<{},{}> {
private timer: NodeJS.Timeout | null = null;
constructor(props: {}) {
super(props);
this.state = {
editorContent: 'Initial content'
};
}
componentDidMount() {
this.timer = setTimeout(() => {
this.setState({ editorContent: 'Updated content after 1 seconds' });
}, 1000);
}
componentWillUnmount() {
if (this.timer) {
clearTimeout(this.timer);
}
}
public render() {
return (
<div>
<h3>Editor 1</h3>
<RichTextEditorComponent value={this.state.editorContent}>
<Inject services={[Toolbar, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
<h3>Editor 2</h3>
<RichTextEditorComponent value={this.state.editorContent}>
<Inject services={[Toolbar, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
</div>
);
}
}
export default App;
[Functional-component]
import { useState, useEffect } from 'react';
import { HtmlEditor, Inject, Link,Image, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
const [editorContent, setEditorContent] = useState('Initial content');
useEffect(() => {
const timer = setTimeout(() => {
setEditorContent('Updated content after 1 seconds');
}, 1000);
return () => clearTimeout(timer);
}, []);
return (
<div>
<h3>Editor 1</h3>
<RichTextEditorComponent value={editorContent}>
<Inject services={[Toolbar, Link, Image, HtmlEditor]} />
</RichTextEditorComponent>
<h3>Editor 2</h3>
<RichTextEditorComponent value={editorContent}>
<Inject services={[Toolbar, Link, Image, HtmlEditor]} />
</RichTextEditorComponent>
</div>);
}
export default App;
import { useState, useEffect } from 'react';
import { HtmlEditor, Image, Inject, Link, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
const [editorContent, setEditorContent] = useState<string>('Initial content');
useEffect(() => {
const timer = setTimeout(() => {
setEditorContent('Updated content after 1 seconds');
}, 1000);
return () => clearTimeout(timer);
}, []);
return (
<div>
<h3>Editor 1</h3>
<RichTextEditorComponent value={editorContent}>
<Inject services={[Toolbar, Link, Image, HtmlEditor]} />
</RichTextEditorComponent>
<h3>Editor 2</h3>
<RichTextEditorComponent value={editorContent}>
<Inject services={[Toolbar, Link, Image, HtmlEditor]} />
</RichTextEditorComponent>
</div>
);
}
export default App;
With this setup, any changes made in the Rich Text Editor will update the editorContent
property, and any programmatic changes to editorContent
will update the editor’s content. This two-way binding ensures that your component always has the most up-to-date content from the editor, and vice versa.
Autosave
The auto-save option in the Rich Text Editor allows the content to be automatically saved during idle periods after you have typed. Once this option is enabled, the editor will save the content based on the saveInterval property’s value, which is specified in milliseconds.
The change event will be triggered if the content has been modified since the last saved state, ensuring consistent tracking of changes without manual intervention.
In the following example, the saveInterval={500}
property ensures content is saved every 500 milliseconds (0.5 seconds):
[Class-component]
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
onChange = (args) => {
//here you can add your code
const editorValue = args.value;
}
render() {
return (<RichTextEditorComponent height={450} value={this.rteValue} change={this.onChange} saveInterval={500}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
private onChange = (args) => {
//here you can add your code
const editorValue = args.value;
}
public render() {
return (
<RichTextEditorComponent height={450} value={this.rteValue} change={this.onChange} saveInterval={500}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;
[Functional-component]
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
function onChange (e) {
//here you can add your code
const editorValue = e.value;
}
return (
<RichTextEditorComponent height={450} saveInterval={500} change={onChange} value={rteValue}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>
);
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteValue:string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
function onChange (e) {
//here you can add your code
const editorValue = e.value;
}
return (
<RichTextEditorComponent height={450} saveInterval={500} change={onChange} value={rteValue}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;
Programmatic content access
You can use the getHtml public method to retrieve the Rich Text Editor content.
let editorValue: string = this.editorObj.getHtml();
To fetch the Rich Text Editor’s text content, use getText method.
let editorValue: string = this.editorObj.getText();
Encoded editor value
The enableHtmlEncode property in the Rich Text Editor specifies whether the source code is displayed in an encoded format. Additionally, the value property also returns the content in an encoded format. This feature is particularly useful when you want to ensure that HTML content is displayed safely without being interpreted by the browser.
[Class-component]
import { Image, Inject, Link, QuickToolbar, HtmlEditor, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
rteValue =
'<p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p><p><b>API’s:</b></p><ul><li><p>maxLength - allows restricting the maximum length to be entered.</p></li><li><p>readOnly - allows to change it as a non-editable state.</p></li><li><p>enabled - enable or disable the RTE component.</p></li><li><p>enableHtmlEncode - Get the encoded string value through value property and source code panel</p></li><li><p>getValue - get the value of RTE.</p></li><li><p>getSelection - get the selected text of RTE.</p></li><li><p>selectAll - select all content in RTE.</p></li></ul>';
render() {
return (
<RichTextEditorComponent enableHtmlEncode={true} value={this.rteValue} >
<Inject services={[ Toolbar, HtmlEditor, Image, Link, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;
import { Image, Inject, Link, HtmlEditor, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private rteValue: string =
'<p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p><p><b>API’s:</b></p><ul><li><p>maxLength - allows restricting the maximum length to be entered.</p></li><li><p>readOnly - allows to change it as a non-editable state.</p></li><li><p>enabled - enable or disable the RTE component.</p></li><li><p>enableHtmlEncode - Get the encoded string value through value property and source code panel</p></li><li><p>getValue - get the value of RTE.</p></li><li><p>getSelection - get the selected text of RTE.</p></li><li><p>selectAll - select all content in RTE.</p></li></ul>';
public render() {
return (
<RichTextEditorComponent enableHtmlEncode={true} value={this.rteValue} >
<Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;
[Functional-component]
import { Image, Inject, Link, HtmlEditor, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteValue =
'<p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p><p><b>API’s:</b></p><ul><li><p>maxLength - allows restricting the maximum length to be entered.</p></li><li><p>readOnly - allows to change it as a non-editable state.</p></li><li><p>enabled - enable or disable the RTE component.</p></li><li><p>enableHtmlEncode - Get the encoded string value through value property and source code panel</p></li><li><p>getValue - get the value of RTE.</p></li><li><p>getSelection - get the selected text of RTE.</p></li><li><p>selectAll - select all content in RTE.</p></li></ul>';
return (
<RichTextEditorComponent enableHtmlEncode={true} value={rteValue}>
<Inject services={[Toolbar, Image, HtmlEditor, Link, QuickToolbar]} />
</RichTextEditorComponent>);
}
export default App;
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Inject, Link, HtmlEditor, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteValue: string =
'<p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p><p><b>API’s:</b></p><ul><li><p>maxLength - allows restricting the maximum length to be entered.</p></li><li><p>readOnly - allows to change it as a non-editable state.</p></li><li><p>enabled - enable or disable the RTE component.</p></li><li><p>enableHtmlEncode - Get the encoded string value through value property and source code panel</p></li><li><p>getValue - get the value of RTE.</p></li><li><p>getSelection - get the selected text of RTE.</p></li><li><p>selectAll - select all content in RTE.</p></li></ul>';
return (
<RichTextEditorComponent enableHtmlEncode={true} value={rteValue}>
<Inject services={[ Toolbar, Image, HtmlEditor, Link, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;
Styling editor content
By default, the content styles of the Rich Text Editor are not included when retrieving the HTML value from the editor. This can result in the styles not being applied when using the HTML content outside of the editor. To ensure that the styles are correctly applied, you can copy and use the following styles directly in your application: These styles are used in the UI elements of the Rich Text Editor.
Make sure to add a CSS class ‘e-rte-content’ to the content container.
.e-rte-content p {
margin: 0 0 10px;
margin-bottom: 10px;
}
.e-rte-content li {
margin-bottom: 10px;
}
.e-rte-content h1 {
font-size: 2.17em;
font-weight: 400;
line-height: 1;
margin: 10px 0;
}
.e-rte-content h2 {
font-size: 1.74em;
font-weight: 400;
margin: 10px 0;
}
.e-rte-content h3 {
font-size: 1.31em;
font-weight: 400;
margin: 10px 0;
}
.e-rte-content h4 {
font-size: 1em;
font-weight: 400;
margin: 0;
}
.e-rte-content h5 {
font-size: 00.8em;
font-weight: 400;
margin: 0;
}
.e-rte-content h6 {
font-size: 00.65em;
font-weight: 400;
margin: 0;
}
.e-rte-content blockquote {
margin: 10px 0;
margin-left: 0;
padding-left: 5px;
}
.e-rte-content pre {
background-color: inherit;
border: 0;
border-radius: 0;
color: #333;
font-size: inherit;
line-height: inherit;
margin: 0 0 10px;
overflow: visible;
padding: 0;
white-space: pre-wrap;
word-break: inherit;
word-wrap: break-word;
}
.e-rte-content strong, .e-rte-content b {
font-weight: 700;
}
.e-rte-content a {
text-decoration: none;
-webkit-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
.e-rte-content a:hover {
text-decoration: underline;
}
.e-rte-content h3 + h4,
.e-rte-content h4 + h5,
.e-rte-content h5 + h6 {
margin-top: 00.6em;
}
.e-rte-content .e-rte-image.e-imgbreak {
border: 0;
cursor: pointer;
display: block;
float: none;
margin: 5px auto;
max-width: 100%;
position: relative;
}
.e-rte-content .e-rte-image {
border: 0;
cursor: pointer;
display: block;
float: none;
margin: auto;
max-width: 100%;
position: relative;
}
.e-rte-content .e-rte-image.e-imginline {
display: inline-block;
float: none;
margin-left: 5px;
margin-right: 5px;
max-width: calc(100% - (2 * 5px));
vertical-align: bottom;
}
.e-rte-content .e-rte-image.e-imgcenter {
cursor: pointer;
display: block;
float: none;
margin: 5px auto;
max-width: 100%;
position: relative;
}
.e-rte-content .e-rte-image.e-imgleft {
float: left;
margin: 0 5px 0 0;
text-align: left;
}
.e-rte-content .e-rte-image.e-imgright {
float: right;
margin: 0 0 0 5px;
text-align: right;
}
.e-rte-content .e-rte-img-caption {
display: inline-block;
margin: 5px auto;
max-width: 100%;
position: relative;
}
.e-rte-content .e-rte-img-caption.e-caption-inline {
display: inline-block;
margin: 5px auto;
margin-left: 5px;
margin-right: 5px;
max-width: calc(100% - (2 * 5px));
position: relative;
text-align: center;
vertical-align: bottom;
}
.e-rte-content .e-rte-img-caption.e-imgcenter {
display: block;
}
.e-rte-content .e-rte-img-caption .e-rte-image.e-imgright,
.e-rte-content .e-rte-img-caption .e-rte-image.e-imgleft {
float: none;
margin: 0;
}
.e-rte-content .e-rte-table {
border-collapse: collapse;
empty-cells: show;
}
.e-rte-content .e-rte-table td,
.e-rte-content .e-rte-table th {
border: 1px solid #bdbdbd;
height: 20px;
min-width: 20px;
padding: 2px 5px;
vertical-align: middle;
}
.e-rte-content .e-rte-table.e-dashed-border td,
.e-rte-content .e-rte-table.e-dashed-border th {
border-style: dashed;
}
.e-rte-content .e-rte-img-caption .e-img-inner {
box-sizing: border-box;
display: block;
font-size: 16px;
font-weight: initial;
margin: auto;
opacity: .9;
position: relative;
text-align: center;
width: 100%;
}
.e-rte-content .e-rte-img-caption .e-img-wrap {
display: inline-block;
margin: auto;
padding: 0;
width: 100%;
}
.e-rte-content blockquote {
border-left: solid 2px #333;
}
.e-rte-content a {
color: #2e2ef1;
}
.e-rte-content .e-rte-table th {
background-color: #e0e0e0;
}
Character count
The Character Count feature in the Rich Text Editor allows you to track and display the number of characters entered in the editor. This feature is particularly useful when you need to limit the content length or provide visual feedback to users about their input.
How to enable character count
To enable the character count feature, set the showCharCount property to true
. By default, this property is set to false
.
When enabled, the character count is displayed at the bottom right corner of the editor.
To use Count feature, inject Count module using the
<Inject services={[Count]} />
.
Understanding character count color indicators
The character count color will be modified based on the characters in the Rich Text Editor.
Status | Description |
---|---|
normal | The character count color remains black until 70% of the maxLength count is reached. |
warning | When the character count reaches 70% of the maxLength, the color changes to orange, indicating that the maximum limit is approaching. |
error | Once the character count hits 90% of the maxLength, the color turns red, signaling that the limit is nearly reached. |
[Class-component]
import { HtmlEditor, Image, Inject, Count, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
render() {
return (<RichTextEditorComponent height={450} value={this.rteValue} showCharCount={true}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Count]}/>
</RichTextEditorComponent>);
}
}
export default App;
import { HtmlEditor, Image, Inject, Link, Count, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
public render() {
return (
<RichTextEditorComponent height={450} value={this.rteValue} showCharCount={true}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Count]}/>
</RichTextEditorComponent>);
}
}
export default App;
[Functional-component]
import { HtmlEditor, Image, Inject, Link, Count, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return (
<RichTextEditorComponent height={450} value={rteValue} showCharCount={true}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Count]}/>
</RichTextEditorComponent>);
}
export default App;
import { HtmlEditor, Image, Inject, Count, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteValue:string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return (
<RichTextEditorComponent height={450} value={rteValue} showCharCount={true}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Count]} />
</RichTextEditorComponent>
);
}
export default App;
Setting maximum character limit
You can restrict the number of characters entered in the editor by setting the maxLength property to a specific numeric value. When set, the maximum allowable character count is displayed alongside the current count at the bottom right of the editor.
If maxLength
is not set, there is no limit to the character count in the editor.
Retrieving character count programmatically
You can programmatically get the current character count in the editor using the getCharCount public method.
const editorCount: number = this.editor.getCharCount();
Source code editing
Rich Text Editor includes the ability for users to directly edit HTML code via Source View
in the text area. If you made any modification in Source view directly, the changes will be reflected in the Rich Text Editor’s content. So, the users will have more flexibility over the content they have created.
Configuring source code tool in the toolbar
You can add the SourceCode
tool in the Rich Text Editor using the toolbarSettings
items property.
[Class-component]
import * as React from 'react';
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
class App extends React.Component {
toolbarSettings = {
items: ['SourceCode']
};
rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
render() {
return (<RichTextEditorComponent height={450} value={this.rteValue} toolbarSettings={this.toolbarSettings}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;
import * as React from 'react';
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
class App extends React.Component<{},{}> {
private toolbarSettings: object = {
items: ['SourceCode']
}
private rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
public render() {
return (
<RichTextEditorComponent height={450} value={this.rteValue} toolbarSettings={this.toolbarSettings}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>
);
}
}
export default App;
[Functional-component]
import * as React from 'react';
import { HtmlEditor,Image, Link, HtmlEditor, QuickToolbar, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
function App() {
let toolbarSettings = {
items: ['SourceCode']
};
let rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return (<RichTextEditorComponent height={450} value={rteValue} toolbarSettings={toolbarSettings} >
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;
import * as React from 'react';
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
function App() {
let toolbarSettings: object = {
items: ['SourceCode']
}
let rteValue:string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return (
<RichTextEditorComponent height={450} value={rteValue} toolbarSettings={toolbarSettings}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;
This functionality can also be enabled through the use of the CodeMirror plugin. It helps to highlight the HTML content and ensures that any modifications in the code view are instantly reflected in the preview mode.
The Rich Text Editor provides the showSourceCode method, which allows you to toggle programmatically between the code view and the formatted text view. When invoked, this method switches the editor’s view to the opposite state.