Contents
- Markdown Basic Formatting
- Insert table
- Insert image
- Insert link
- Custom format
- Markdown to HTML
- See Also
Having trouble getting help?
Contact Support
Contact Support
Markdown in the React Rich Text Editor component
17 Mar 202524 minutes to read
When you format the word in Markdown format, you should add Markdown syntax to the word to indicate the words and phrases that look different from each other.
The Rich Text Editor supports Markdown editing when the editorMode is set to markdown. You can apply formatting to text using both keyboard interactions and toolbar actions.
To enable the quick Markdown editing feature, inject the MarkdownEditor module to the RTE using the
RichTextEditor.Inject(MarkdownEditor)method.
Refer to the video below for guidance on building a Markdown editor with the React Rich Text Editor.
Markdown Basic Formatting
The React Markdown editor supports various commands to format markdown content. Below are the supported commands and their usage:
| Commands | Syntax | Description | |
|---|---|---|---|
| Bold | Sample content for **bold text**. |
For bold, add ** or __ to front and back of the text. |
For order list, precede each line with a number. |
| Italic | Sample content for *Italic text*. |
For Italic, add * or _ to front and back of the text. |
|
| Bold and Italics | Sample content for ***bold and Italic text***. |
For bold and Italics, add *** to the front and back of the text. |
|
| Heading 1 |
# Heading 1 content |
For heading 1, add # to start of the line. |
|
| Heading 2 |
## Heading 2 content |
For heading 2, add ## to start of the line. |
|
| Heading 3 |
### Heading 3 content |
For heading 3, add ### to start of the line. |
|
| Heading 4 |
#### Heading 4 content |
For heading 4, add #### to start of the line. |
|
| Heading 5 |
##### Heading 5 content |
For heading 5, add ##### to start of the line. |
|
| Heading 6 |
###### Heading 6 content |
For heading 6, add ###### to start of the line. |
|
| Line Break | First line <br>Second line |
For line break, press enter two times (or) add <br> in between the first and the second line. |
|
| Blockquotes |
> Blockquotes text |
For blockquotes, add > to start of the line. |
|
| Strike Through | Sample content for ~~strike through text~~. |
For strike through, add ~~ to front and back of the text. |
|
| Code (Single line) | `Single line code` | For single line code, add ` to front and back of the text. | |
| Code block (Multi Line) | ``` Multi line code text Multi line code text ``` |
For multiple line code, add ``` in the new line before and after the content. | |
| Subscript |
<sub>Subscript text</sub>
|
For subscript, add <sub> to the front and </sub> to the back of the text. |
|
| Superscript |
<sup>Superscript text</sup>
|
For superscript, add <sup> to the front and </sup> to the back of the text. |
|
| Ordered List |
1. First1. Second |
For ordered list, preceding one or more lines of text with 1.
|
|
| Unordered List |
* First* second |
For unordered list, preceding one or more lines of text with *. |
|
| Links |
Link text without title text[ Link text ](URL)Link text with title text [ Link text ](URL , “title text”)
|
Create an inline link by wrapping link text in brackets [ ], and then wrapping the URL as first parameter and title as second parameter in the parentheses ().Note: The title text is optional, if needed it can be given manually. |
|
| Table | | Heading 1 | Heading 2 |<br>|---------|---------|<br>| Col A1 | Col A2 |<br>| Col B1 | Col B2 | |
Create a table using the pipes and underscores as given in the syntax to create 2 x 2 table. | |
| Horizontal Line |
*** (three asterix in new line)(or) ___ (three underscores in new line) |
For horizontal line, add *** or ___ to the start of the new line. |
|
| Image | 
|
Create an image by wrapping the image source in parentheses (). |
|
| Image with alternate text | 
|
Create an image with alternate text by wrapping an alternative text in brackets [], and then link of the image source in parentheses ().Note: When inserting the image using toolbar, the alternate text cannot be provided that needs to be given manually. |
|
| Escape tick marks supported | Sample text content with **bold and **not bold** text can be in the same line.**
|
In the syntax, the whole content is made as bold where the content not bold can be made as normal text by adding the bold syntax to the start and end of the respective text. Likewise you can do the same for various inline commands. |
|
| Escape Character |
\(any syntax)
|
Escape any markdown syntax by prefix \ to the syntax.Example: \**Bold text**
|
|
| HTML Entities | Copyright: © - © Trade mark: ™ - ™Registered: ® - ®Ampersand: & - &Less than: < - <Greater than: > - >
|
For HTML entities, add & and ; to the front and back of the respective entities. |
The above listed commands are the only ones supported in the Syncfusion® Markdown editor. For other commands, use HTML tags within the Markdown editor. Additionally, footnotes, definitions, math, and checklist Markdown syntax are not supported.
Insert table
Add the CreateTable item to the toolbar items to use the table tool.
To insert a table in the Markdown editor, click the insert table icon in the toolbar. By default, the inserted Markdown table includes 2 rows and 2 columns, along with a heading.
[Class-component]
/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
class App extends React.Component {
mdSource;
mdSplit;
htmlPreview;
defaultRTE;
textArea;
value = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
componentDidMount() {
this.defaultRTE = new RichTextEditor({
actionComplete: (e) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
this.fullPreview({ mode: true, type: '' });
}
else if (!this.mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
if (this.htmlPreview) {
this.htmlPreview.style.display = 'none';
}
this.mdSplit.classList.remove('e-active');
this.mdSource.classList.remove('e-active');
}
this.markDownConversion();
}
setTimeout(() => {
this.defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
this.textArea = this.defaultRTE.contentModule.getEditPanel();
this.textArea.addEventListener('keyup', (e) => {
this.markDownConversion();
});
this.mdSource = document.getElementById('preview-code');
this.mdSource.addEventListener('click', (e) => {
this.fullPreview({ mode: true, type: 'preview' });
if (e.currentTarget.classList.contains('e-active')) {
this.defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.add('e-overlay');
}
else {
this.defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
this.mdSplit = document.getElementById('MD_Preview');
this.mdSplit.addEventListener('click', (e) => {
if (this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.fullPreview({ mode: true, type: '' });
}
this.mdSource.classList.remove('e-active');
if (!this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo'
]
},
valueTemplate: this.value
});
this.defaultRTE.appendTo('#markdownPreview');
}
markDownConversion() {
if (this.mdSplit.classList.contains('e-active')) {
const id = this.defaultRTE.getID() + 'html-preview';
const htmlPreview = this.defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked((this.defaultRTE.contentModule.getEditPanel()).value);
}
}
fullPreview(e) {
const id = this.defaultRTE.getID() + 'html-preview';
this.htmlPreview = this.defaultRTE.element.querySelector('#' + id);
if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
this.mdSource.classList.remove('e-active');
this.mdSplit.classList.remove('e-active');
this.mdSource.parentElement.title = 'Preview';
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
this.htmlPreview.style.display = 'none';
}
else {
this.mdSource.classList.add('e-active');
this.mdSplit.classList.add('e-active');
if (!this.htmlPreview) {
this.htmlPreview = createElement('div', { className: 'e-content' });
this.htmlPreview.id = id;
this.textArea.parentNode.appendChild(this.htmlPreview);
}
if (e.type === 'preview') {
this.textArea.style.display = 'none';
this.htmlPreview.classList.add('e-pre-source');
this.htmlPreview.style.width = '100%';
}
else {
this.htmlPreview.classList.remove('e-pre-source');
this.textArea.style.width = '50%';
this.htmlPreview.style.width = '50%';
}
this.htmlPreview.style.display = 'block';
this.htmlPreview.innerHTML = marked((this.defaultRTE.contentModule.getEditPanel()).value);
this.mdSource.parentElement.title = 'Code View';
}
}
render() {
return (<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>);
}
}
export default App;/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
class App extends React.Component<{},{}> {
public mdSource: HTMLElement;
public mdSplit: HTMLElement;
public htmlPreview: HTMLElement;
public defaultRTE: RichTextEditor;
public textArea: HTMLTextAreaElement;
public value: string = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
public componentDidMount(): void {
this.defaultRTE = new RichTextEditor({
actionComplete: (e: any) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
this.fullPreview({ mode: true, type: '' });
} else if (!(this as any).mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
if (this.htmlPreview) { this.htmlPreview.style.display = 'none'; }
this.mdSplit.classList.remove('e-active');
this.mdSource.classList.remove('e-active');
}
this.markDownConversion();
}
setTimeout(() => {
this.defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
this.textArea = (this.defaultRTE as any).contentModule.getEditPanel();
this.textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
this.markDownConversion();
});
this.mdSource = document.getElementById('preview-code') as any;
this.mdSource.addEventListener('click', (e: MouseEvent) => {
this.fullPreview({ mode: true, type: 'preview' });
if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
this.defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.add('e-overlay');
} else {
this.defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
this.mdSplit = document.getElementById('MD_Preview') as any;
this.mdSplit.addEventListener('click', (e: MouseEvent) => {
if (this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.fullPreview({ mode: true, type: '' });
}
this.mdSource.classList.remove('e-active');
if (!this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo']
},
valueTemplate: this.value
});
this.defaultRTE.appendTo('#markdownPreview');
}
public markDownConversion(): void {
if (this.mdSplit.classList.contains('e-active')) {
const id: string = this.defaultRTE.getID() + 'html-preview';
const htmlPreview: any = this.defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked(((this.defaultRTE as any).contentModule.getEditPanel()).value);
}
}
public fullPreview(e: { [key: string]: string | boolean }): void {
const id: string = this.defaultRTE.getID() + 'html-preview';
this.htmlPreview = this.defaultRTE.element.querySelector('#' + id);
if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
this.mdSource.classList.remove('e-active');
this.mdSplit.classList.remove('e-active');
this.mdSource.parentElement.title = 'Preview';
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
this.htmlPreview.style.display = 'none';
} else {
this.mdSource.classList.add('e-active');
this.mdSplit.classList.add('e-active');
if (!this.htmlPreview) {
this.htmlPreview = createElement('div', { className: 'e-content' });
this.htmlPreview.id = id;
(this.textArea as any).parentNode.appendChild(this.htmlPreview);
}
if (e.type === 'preview') {
this.textArea.style.display = 'none'; this.htmlPreview.classList.add('e-pre-source');
this.htmlPreview.style.width = '100%';
} else {
this.htmlPreview.classList.remove('e-pre-source');
this.textArea.style.width = '50%';
this.htmlPreview.style.width = '50%';
}
this.htmlPreview.style.display = 'block';
this.htmlPreview.innerHTML = marked(((this as any).defaultRTE.contentModule.getEditPanel()).value);
this.mdSource.parentElement.title = 'Code View';
}
}
public render() {
return (
<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
import { useEffect } from "react";
function App() {
useEffect(() => {
defaultRTE = new RichTextEditor({
actionComplete: (e) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
fullPreview({ mode: true, type: '' });
}
else if (!this.mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
textArea.style.display = 'block';
textArea.style.width = '100%';
if (htmlPreview) {
htmlPreview.style.display = 'none';
}
mdSplit.classList.remove('e-active');
mdSource.classList.remove('e-active');
}
markDownConversion();
}
setTimeout(() => {
defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
textArea = defaultRTE.contentModule.getEditPanel();
textArea.addEventListener('keyup', (e) => {
markDownConversion();
});
mdSource = document.getElementById('preview-code');
mdSource.addEventListener('click', (e) => {
fullPreview({ mode: true, type: 'preview' });
if (e.currentTarget.classList.contains('e-active')) {
defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.add('e-overlay');
}
else {
defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
mdSplit = document.getElementById('MD_Preview');
mdSplit.addEventListener('click', (e) => {
if (defaultRTE.element.classList.contains('e-rte-full-screen')) {
fullPreview({ mode: true, type: '' });
}
mdSource.classList.remove('e-active');
if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {
defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo'
]
},
valueTemplate: value
});
defaultRTE.appendTo('#markdownPreview');
});
let mdSource;
let mdSplit;
let htmlPreview;
let defaultRTE;
let textArea;
let value = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
function markDownConversion() {
if (mdSplit.classList.contains('e-active')) {
const id = defaultRTE.getID() + 'html-preview';
const htmlPreview = defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
}
}
function fullPreview(e) {
const id = defaultRTE.getID() + 'html-preview';
htmlPreview = defaultRTE.element.querySelector('#' + id);
if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
mdSource.classList.remove('e-active');
mdSplit.classList.remove('e-active');
mdSource.parentElement.title = 'Preview';
textArea.style.display = 'block';
textArea.style.width = '100%';
htmlPreview.style.display = 'none';
}
else {
mdSource.classList.add('e-active');
mdSplit.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content' });
htmlPreview.id = id;
textArea.parentNode.appendChild(htmlPreview);
}
if (e.type === 'preview') {
textArea.style.display = 'none';
htmlPreview.classList.add('e-pre-source');
htmlPreview.style.width = '100%';
}
else {
htmlPreview.classList.remove('e-pre-source');
textArea.style.width = '50%';
htmlPreview.style.width = '50%';
}
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
mdSource.parentElement.title = 'Code View';
}
}
return (<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>);
}
export default App;/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
import { useEffect } from "react";
function App() {
useEffect(() => {
defaultRTE = new RichTextEditor({
actionComplete: (e: any) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
fullPreview({ mode: true, type: '' });
} else if (!(this as any).mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
textArea.style.display = 'block';
textArea.style.width = '100%';
if (htmlPreview) { htmlPreview.style.display = 'none'; }
mdSplit.classList.remove('e-active');
mdSource.classList.remove('e-active');
}
markDownConversion();
}
setTimeout(() => {
defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
textArea = (defaultRTE as any).contentModule.getEditPanel();
textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
markDownConversion();
});
mdSource = document.getElementById('preview-code') as any;
mdSource.addEventListener('click', (e: MouseEvent) => {
fullPreview({ mode: true, type: 'preview' });
if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.add('e-overlay');
} else {
defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
mdSplit = document.getElementById('MD_Preview') as any;
mdSplit.addEventListener('click', (e: MouseEvent) => {
if (defaultRTE.element.classList.contains('e-rte-full-screen')) {
fullPreview({ mode: true, type: '' });
}
mdSource.classList.remove('e-active');
if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {
defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo']
},
valueTemplate: value
});
defaultRTE.appendTo('#markdownPreview');
});
let mdSource: HTMLElement;
let mdSplit: HTMLElement;
let htmlPreview: HTMLElement;
let defaultRTE: RichTextEditor;
let textArea: HTMLTextAreaElement;
let value: string = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
function markDownConversion(): void {
if (mdSplit.classList.contains('e-active')) {
const id: string = defaultRTE.getID() + 'html-preview';
const htmlPreview: any = defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked(((defaultRTE as any).contentModule.getEditPanel()).value);
}
}
function fullPreview(e: { [key: string]: string | boolean }): void {
const id: string = defaultRTE.getID() + 'html-preview';
htmlPreview = defaultRTE.element.querySelector('#' + id);
if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
mdSource.classList.remove('e-active');
mdSplit.classList.remove('e-active');
mdSource.parentElement.title = 'Preview';
textArea.style.display = 'block';
textArea.style.width = '100%';
htmlPreview.style.display = 'none';
} else {
mdSource.classList.add('e-active');
mdSplit.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content' });
htmlPreview.id = id;
(textArea as any).parentNode.appendChild(htmlPreview);
}
if (e.type === 'preview') {
textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
htmlPreview.style.width = '100%';
} else {
htmlPreview.classList.remove('e-pre-source');
textArea.style.width = '50%';
htmlPreview.style.width = '50%';
}
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
mdSource.parentElement.title = 'Code View';
}
}
return (
<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>
);
}
export default App;Insert image
Add the Image item to the toolbar to enable the image tool.
To insert an image in the Markdown editor, follow these steps:
- Click the
Insert Imageicon in the toolbar. - Browse and select an image from your local machine by clicking the browse button, or enter an image link from an online source.
- Click the Insert button in the image dialog.
The selected image will be added to the editor area.
Please refer to the sample and code snippets below to add the image in the Markdown editor.
[Class-component]
/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
class App extends React.Component {
mdSource;
mdSplit;
htmlPreview;
defaultRTE;
textArea;
value = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
componentDidMount() {
this.defaultRTE = new RichTextEditor({
actionComplete: (e) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
this.fullPreview({ mode: true, type: '' });
}
else if (!this.mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
if (this.htmlPreview) {
this.htmlPreview.style.display = 'none';
}
this.mdSplit.classList.remove('e-active');
this.mdSource.classList.remove('e-active');
}
this.markDownConversion();
}
setTimeout(() => {
this.defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
this.textArea = this.defaultRTE.contentModule.getEditPanel();
this.textArea.addEventListener('keyup', (e) => {
this.markDownConversion();
});
this.mdSource = document.getElementById('preview-code');
this.mdSource.addEventListener('click', (e) => {
this.fullPreview({ mode: true, type: 'preview' });
if (e.currentTarget.classList.contains('e-active')) {
this.defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.add('e-overlay');
}
else {
this.defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
this.mdSplit = document.getElementById('MD_Preview');
this.mdSplit.addEventListener('click', (e) => {
if (this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.fullPreview({ mode: true, type: '' });
}
this.mdSource.classList.remove('e-active');
if (!this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo'
]
},
valueTemplate: this.value
});
this.defaultRTE.appendTo('#markdownPreview');
}
markDownConversion() {
if (this.mdSplit.classList.contains('e-active')) {
const id = this.defaultRTE.getID() + 'html-preview';
const htmlPreview = this.defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked((this.defaultRTE.contentModule.getEditPanel()).value);
}
}
fullPreview(e) {
const id = this.defaultRTE.getID() + 'html-preview';
this.htmlPreview = this.defaultRTE.element.querySelector('#' + id);
if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
this.mdSource.classList.remove('e-active');
this.mdSplit.classList.remove('e-active');
this.mdSource.parentElement.title = 'Preview';
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
this.htmlPreview.style.display = 'none';
}
else {
this.mdSource.classList.add('e-active');
this.mdSplit.classList.add('e-active');
if (!this.htmlPreview) {
this.htmlPreview = createElement('div', { className: 'e-content' });
this.htmlPreview.id = id;
this.textArea.parentNode.appendChild(this.htmlPreview);
}
if (e.type === 'preview') {
this.textArea.style.display = 'none';
this.htmlPreview.classList.add('e-pre-source');
this.htmlPreview.style.width = '100%';
}
else {
this.htmlPreview.classList.remove('e-pre-source');
this.textArea.style.width = '50%';
this.htmlPreview.style.width = '50%';
}
this.htmlPreview.style.display = 'block';
this.htmlPreview.innerHTML = marked((this.defaultRTE.contentModule.getEditPanel()).value);
this.mdSource.parentElement.title = 'Code View';
}
}
render() {
return (<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>);
}
}
export default App;/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
class App extends React.Component<{},{}> {
public mdSource: HTMLElement;
public mdSplit: HTMLElement;
public htmlPreview: HTMLElement;
public defaultRTE: RichTextEditor;
public textArea: HTMLTextAreaElement;
public value: string = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
public componentDidMount(): void {
this.defaultRTE = new RichTextEditor({
actionComplete: (e: any) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
this.fullPreview({ mode: true, type: '' });
} else if (!(this as any).mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
if (this.htmlPreview) { this.htmlPreview.style.display = 'none'; }
this.mdSplit.classList.remove('e-active');
this.mdSource.classList.remove('e-active');
}
this.markDownConversion();
}
setTimeout(() => {
this.defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
this.textArea = (this.defaultRTE as any).contentModule.getEditPanel();
this.textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
this.markDownConversion();
});
this.mdSource = document.getElementById('preview-code') as any;
this.mdSource.addEventListener('click', (e: MouseEvent) => {
this.fullPreview({ mode: true, type: 'preview' });
if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
this.defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.add('e-overlay');
} else {
this.defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
this.mdSplit = document.getElementById('MD_Preview') as any;
this.mdSplit.addEventListener('click', (e: MouseEvent) => {
if (this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.fullPreview({ mode: true, type: '' });
}
this.mdSource.classList.remove('e-active');
if (!this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo']
},
valueTemplate: this.value
});
this.defaultRTE.appendTo('#markdownPreview');
}
public markDownConversion(): void {
if (this.mdSplit.classList.contains('e-active')) {
const id: string = this.defaultRTE.getID() + 'html-preview';
const htmlPreview: any = this.defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked(((this.defaultRTE as any).contentModule.getEditPanel()).value);
}
}
public fullPreview(e: { [key: string]: string | boolean }): void {
const id: string = this.defaultRTE.getID() + 'html-preview';
this.htmlPreview = this.defaultRTE.element.querySelector('#' + id);
if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
this.mdSource.classList.remove('e-active');
this.mdSplit.classList.remove('e-active');
this.mdSource.parentElement.title = 'Preview';
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
this.htmlPreview.style.display = 'none';
} else {
this.mdSource.classList.add('e-active');
this.mdSplit.classList.add('e-active');
if (!this.htmlPreview) {
this.htmlPreview = createElement('div', { className: 'e-content' });
this.htmlPreview.id = id;
(this.textArea as any).parentNode.appendChild(this.htmlPreview);
}
if (e.type === 'preview') {
this.textArea.style.display = 'none'; this.htmlPreview.classList.add('e-pre-source');
this.htmlPreview.style.width = '100%';
} else {
this.htmlPreview.classList.remove('e-pre-source');
this.textArea.style.width = '50%';
this.htmlPreview.style.width = '50%';
}
this.htmlPreview.style.display = 'block';
this.htmlPreview.innerHTML = marked(((this as any).defaultRTE.contentModule.getEditPanel()).value);
this.mdSource.parentElement.title = 'Code View';
}
}
public render() {
return (
<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
import { useEffect } from "react";
function App() {
useEffect(() => {
defaultRTE = new RichTextEditor({
actionComplete: (e) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
fullPreview({ mode: true, type: '' });
}
else if (!this.mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
textArea.style.display = 'block';
textArea.style.width = '100%';
if (htmlPreview) {
htmlPreview.style.display = 'none';
}
mdSplit.classList.remove('e-active');
mdSource.classList.remove('e-active');
}
markDownConversion();
}
setTimeout(() => {
defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
textArea = defaultRTE.contentModule.getEditPanel();
textArea.addEventListener('keyup', (e) => {
markDownConversion();
});
mdSource = document.getElementById('preview-code');
mdSource.addEventListener('click', (e) => {
fullPreview({ mode: true, type: 'preview' });
if (e.currentTarget.classList.contains('e-active')) {
defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.add('e-overlay');
}
else {
defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
mdSplit = document.getElementById('MD_Preview');
mdSplit.addEventListener('click', (e) => {
if (defaultRTE.element.classList.contains('e-rte-full-screen')) {
fullPreview({ mode: true, type: '' });
}
mdSource.classList.remove('e-active');
if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {
defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo'
]
},
valueTemplate: value
});
defaultRTE.appendTo('#markdownPreview');
});
let mdSource;
let mdSplit;
let htmlPreview;
let defaultRTE;
let textArea;
let value = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
function markDownConversion() {
if (mdSplit.classList.contains('e-active')) {
const id = defaultRTE.getID() + 'html-preview';
const htmlPreview = defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
}
}
function fullPreview(e) {
const id = defaultRTE.getID() + 'html-preview';
htmlPreview = defaultRTE.element.querySelector('#' + id);
if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
mdSource.classList.remove('e-active');
mdSplit.classList.remove('e-active');
mdSource.parentElement.title = 'Preview';
textArea.style.display = 'block';
textArea.style.width = '100%';
htmlPreview.style.display = 'none';
}
else {
mdSource.classList.add('e-active');
mdSplit.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content' });
htmlPreview.id = id;
textArea.parentNode.appendChild(htmlPreview);
}
if (e.type === 'preview') {
textArea.style.display = 'none';
htmlPreview.classList.add('e-pre-source');
htmlPreview.style.width = '100%';
}
else {
htmlPreview.classList.remove('e-pre-source');
textArea.style.width = '50%';
htmlPreview.style.width = '50%';
}
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
mdSource.parentElement.title = 'Code View';
}
}
return (<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>);
}
export default App;/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
import { useEffect } from "react";
function App() {
useEffect(() => {
defaultRTE = new RichTextEditor({
actionComplete: (e: any) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
fullPreview({ mode: true, type: '' });
} else if (!(this as any).mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
textArea.style.display = 'block';
textArea.style.width = '100%';
if (htmlPreview) { htmlPreview.style.display = 'none'; }
mdSplit.classList.remove('e-active');
mdSource.classList.remove('e-active');
}
markDownConversion();
}
setTimeout(() => {
defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
textArea = (defaultRTE as any).contentModule.getEditPanel();
textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
markDownConversion();
});
mdSource = document.getElementById('preview-code') as any;
mdSource.addEventListener('click', (e: MouseEvent) => {
fullPreview({ mode: true, type: 'preview' });
if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.add('e-overlay');
} else {
defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
mdSplit = document.getElementById('MD_Preview') as any;
mdSplit.addEventListener('click', (e: MouseEvent) => {
if (defaultRTE.element.classList.contains('e-rte-full-screen')) {
fullPreview({ mode: true, type: '' });
}
mdSource.classList.remove('e-active');
if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {
defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo']
},
valueTemplate: value
});
defaultRTE.appendTo('#markdownPreview');
});
let mdSource: HTMLElement;
let mdSplit: HTMLElement;
let htmlPreview: HTMLElement;
let defaultRTE: RichTextEditor;
let textArea: HTMLTextAreaElement;
let value: string = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
function markDownConversion(): void {
if (mdSplit.classList.contains('e-active')) {
const id: string = defaultRTE.getID() + 'html-preview';
const htmlPreview: any = defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked(((defaultRTE as any).contentModule.getEditPanel()).value);
}
}
function fullPreview(e: { [key: string]: string | boolean }): void {
const id: string = defaultRTE.getID() + 'html-preview';
htmlPreview = defaultRTE.element.querySelector('#' + id);
if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
mdSource.classList.remove('e-active');
mdSplit.classList.remove('e-active');
mdSource.parentElement.title = 'Preview';
textArea.style.display = 'block';
textArea.style.width = '100%';
htmlPreview.style.display = 'none';
} else {
mdSource.classList.add('e-active');
mdSplit.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content' });
htmlPreview.id = id;
(textArea as any).parentNode.appendChild(htmlPreview);
}
if (e.type === 'preview') {
textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
htmlPreview.style.width = '100%';
} else {
htmlPreview.classList.remove('e-pre-source');
textArea.style.width = '50%';
htmlPreview.style.width = '50%';
}
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
mdSource.parentElement.title = 'Code View';
}
}
return (
<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>
);
}
export default App;Insert link
To use a link, add the CreateLink item to the toolbar items.
To create a link for a text or an image in the Markdown editor, follow these steps:
- Click the
Inserticon in the link dialog. - Enter the link and other relevant information.
- Click the Insert button to add the link to the editor area.
The link will be added to the editor area.
Please refer to the sample and code snippets below to add the link in the Markdown editor.
[Class-component]
/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
class App extends React.Component {
mdSource;
mdSplit;
htmlPreview;
defaultRTE;
textArea;
value = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
componentDidMount() {
this.defaultRTE = new RichTextEditor({
actionComplete: (e) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
this.fullPreview({ mode: true, type: '' });
}
else if (!this.mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
if (this.htmlPreview) {
this.htmlPreview.style.display = 'none';
}
this.mdSplit.classList.remove('e-active');
this.mdSource.classList.remove('e-active');
}
this.markDownConversion();
}
setTimeout(() => {
this.defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
this.textArea = this.defaultRTE.contentModule.getEditPanel();
this.textArea.addEventListener('keyup', (e) => {
this.markDownConversion();
});
this.mdSource = document.getElementById('preview-code');
this.mdSource.addEventListener('click', (e) => {
this.fullPreview({ mode: true, type: 'preview' });
if (e.currentTarget.classList.contains('e-active')) {
this.defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.add('e-overlay');
}
else {
this.defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
this.mdSplit = document.getElementById('MD_Preview');
this.mdSplit.addEventListener('click', (e) => {
if (this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.fullPreview({ mode: true, type: '' });
}
this.mdSource.classList.remove('e-active');
if (!this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo'
]
},
valueTemplate: this.value
});
this.defaultRTE.appendTo('#markdownPreview');
}
markDownConversion() {
if (this.mdSplit.classList.contains('e-active')) {
const id = this.defaultRTE.getID() + 'html-preview';
const htmlPreview = this.defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked((this.defaultRTE.contentModule.getEditPanel()).value);
}
}
fullPreview(e) {
const id = this.defaultRTE.getID() + 'html-preview';
this.htmlPreview = this.defaultRTE.element.querySelector('#' + id);
if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
this.mdSource.classList.remove('e-active');
this.mdSplit.classList.remove('e-active');
this.mdSource.parentElement.title = 'Preview';
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
this.htmlPreview.style.display = 'none';
}
else {
this.mdSource.classList.add('e-active');
this.mdSplit.classList.add('e-active');
if (!this.htmlPreview) {
this.htmlPreview = createElement('div', { className: 'e-content' });
this.htmlPreview.id = id;
this.textArea.parentNode.appendChild(this.htmlPreview);
}
if (e.type === 'preview') {
this.textArea.style.display = 'none';
this.htmlPreview.classList.add('e-pre-source');
this.htmlPreview.style.width = '100%';
}
else {
this.htmlPreview.classList.remove('e-pre-source');
this.textArea.style.width = '50%';
this.htmlPreview.style.width = '50%';
}
this.htmlPreview.style.display = 'block';
this.htmlPreview.innerHTML = marked((this.defaultRTE.contentModule.getEditPanel()).value);
this.mdSource.parentElement.title = 'Code View';
}
}
render() {
return (<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>);
}
}
export default App;/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
class App extends React.Component<{},{}> {
public mdSource: HTMLElement;
public mdSplit: HTMLElement;
public htmlPreview: HTMLElement;
public defaultRTE: RichTextEditor;
public textArea: HTMLTextAreaElement;
public value: string = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
public componentDidMount(): void {
this.defaultRTE = new RichTextEditor({
actionComplete: (e: any) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
this.fullPreview({ mode: true, type: '' });
} else if (!(this as any).mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
if (this.htmlPreview) { this.htmlPreview.style.display = 'none'; }
this.mdSplit.classList.remove('e-active');
this.mdSource.classList.remove('e-active');
}
this.markDownConversion();
}
setTimeout(() => {
this.defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
this.textArea = (this.defaultRTE as any).contentModule.getEditPanel();
this.textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
this.markDownConversion();
});
this.mdSource = document.getElementById('preview-code') as any;
this.mdSource.addEventListener('click', (e: MouseEvent) => {
this.fullPreview({ mode: true, type: 'preview' });
if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
this.defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.add('e-overlay');
} else {
this.defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
this.mdSplit = document.getElementById('MD_Preview') as any;
this.mdSplit.addEventListener('click', (e: MouseEvent) => {
if (this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.fullPreview({ mode: true, type: '' });
}
this.mdSource.classList.remove('e-active');
if (!this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo']
},
valueTemplate: this.value
});
this.defaultRTE.appendTo('#markdownPreview');
}
public markDownConversion(): void {
if (this.mdSplit.classList.contains('e-active')) {
const id: string = this.defaultRTE.getID() + 'html-preview';
const htmlPreview: any = this.defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked(((this.defaultRTE as any).contentModule.getEditPanel()).value);
}
}
public fullPreview(e: { [key: string]: string | boolean }): void {
const id: string = this.defaultRTE.getID() + 'html-preview';
this.htmlPreview = this.defaultRTE.element.querySelector('#' + id);
if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
this.mdSource.classList.remove('e-active');
this.mdSplit.classList.remove('e-active');
this.mdSource.parentElement.title = 'Preview';
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
this.htmlPreview.style.display = 'none';
} else {
this.mdSource.classList.add('e-active');
this.mdSplit.classList.add('e-active');
if (!this.htmlPreview) {
this.htmlPreview = createElement('div', { className: 'e-content' });
this.htmlPreview.id = id;
(this.textArea as any).parentNode.appendChild(this.htmlPreview);
}
if (e.type === 'preview') {
this.textArea.style.display = 'none'; this.htmlPreview.classList.add('e-pre-source');
this.htmlPreview.style.width = '100%';
} else {
this.htmlPreview.classList.remove('e-pre-source');
this.textArea.style.width = '50%';
this.htmlPreview.style.width = '50%';
}
this.htmlPreview.style.display = 'block';
this.htmlPreview.innerHTML = marked(((this as any).defaultRTE.contentModule.getEditPanel()).value);
this.mdSource.parentElement.title = 'Code View';
}
}
public render() {
return (
<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
import { useEffect } from "react";
function App() {
useEffect(() => {
defaultRTE = new RichTextEditor({
actionComplete: (e) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
fullPreview({ mode: true, type: '' });
}
else if (!this.mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
textArea.style.display = 'block';
textArea.style.width = '100%';
if (htmlPreview) {
htmlPreview.style.display = 'none';
}
mdSplit.classList.remove('e-active');
mdSource.classList.remove('e-active');
}
markDownConversion();
}
setTimeout(() => {
defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
textArea = defaultRTE.contentModule.getEditPanel();
textArea.addEventListener('keyup', (e) => {
markDownConversion();
});
mdSource = document.getElementById('preview-code');
mdSource.addEventListener('click', (e) => {
fullPreview({ mode: true, type: 'preview' });
if (e.currentTarget.classList.contains('e-active')) {
defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.add('e-overlay');
}
else {
defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
e.currentTarget.parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
mdSplit = document.getElementById('MD_Preview');
mdSplit.addEventListener('click', (e) => {
if (defaultRTE.element.classList.contains('e-rte-full-screen')) {
fullPreview({ mode: true, type: '' });
}
mdSource.classList.remove('e-active');
if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {
defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo'
]
},
valueTemplate: value
});
defaultRTE.appendTo('#markdownPreview');
});
let mdSource;
let mdSplit;
let htmlPreview;
let defaultRTE;
let textArea;
let value = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
function markDownConversion() {
if (mdSplit.classList.contains('e-active')) {
const id = defaultRTE.getID() + 'html-preview';
const htmlPreview = defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
}
}
function fullPreview(e) {
const id = defaultRTE.getID() + 'html-preview';
htmlPreview = defaultRTE.element.querySelector('#' + id);
if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
mdSource.classList.remove('e-active');
mdSplit.classList.remove('e-active');
mdSource.parentElement.title = 'Preview';
textArea.style.display = 'block';
textArea.style.width = '100%';
htmlPreview.style.display = 'none';
}
else {
mdSource.classList.add('e-active');
mdSplit.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content' });
htmlPreview.id = id;
textArea.parentNode.appendChild(htmlPreview);
}
if (e.type === 'preview') {
textArea.style.display = 'none';
htmlPreview.classList.add('e-pre-source');
htmlPreview.style.width = '100%';
}
else {
htmlPreview.classList.remove('e-pre-source');
textArea.style.width = '50%';
htmlPreview.style.width = '50%';
}
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
mdSource.parentElement.title = 'Code View';
}
}
return (<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>);
}
export default App;/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
import { useEffect } from "react";
function App() {
useEffect(() => {
defaultRTE = new RichTextEditor({
actionComplete: (e: any) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
fullPreview({ mode: true, type: '' });
} else if (!(this as any).mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
textArea.style.display = 'block';
textArea.style.width = '100%';
if (htmlPreview) { htmlPreview.style.display = 'none'; }
mdSplit.classList.remove('e-active');
mdSource.classList.remove('e-active');
}
markDownConversion();
}
setTimeout(() => {
defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
textArea = (defaultRTE as any).contentModule.getEditPanel();
textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
markDownConversion();
});
mdSource = document.getElementById('preview-code') as any;
mdSource.addEventListener('click', (e: MouseEvent) => {
fullPreview({ mode: true, type: 'preview' });
if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.add('e-overlay');
} else {
defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
mdSplit = document.getElementById('MD_Preview') as any;
mdSplit.addEventListener('click', (e: MouseEvent) => {
if (defaultRTE.element.classList.contains('e-rte-full-screen')) {
fullPreview({ mode: true, type: '' });
}
mdSource.classList.remove('e-active');
if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {
defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'CreateTable', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor'
},
'FullScreen', '|', 'Undo', 'Redo']
},
valueTemplate: value
});
defaultRTE.appendTo('#markdownPreview');
});
let mdSource: HTMLElement;
let mdSplit: HTMLElement;
let htmlPreview: HTMLElement;
let defaultRTE: RichTextEditor;
let textArea: HTMLTextAreaElement;
let value: string = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
function markDownConversion(): void {
if (mdSplit.classList.contains('e-active')) {
const id: string = defaultRTE.getID() + 'html-preview';
const htmlPreview: any = defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked(((defaultRTE as any).contentModule.getEditPanel()).value);
}
}
function fullPreview(e: { [key: string]: string | boolean }): void {
const id: string = defaultRTE.getID() + 'html-preview';
htmlPreview = defaultRTE.element.querySelector('#' + id);
if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
mdSource.classList.remove('e-active');
mdSplit.classList.remove('e-active');
mdSource.parentElement.title = 'Preview';
textArea.style.display = 'block';
textArea.style.width = '100%';
htmlPreview.style.display = 'none';
} else {
mdSource.classList.add('e-active');
mdSplit.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content' });
htmlPreview.id = id;
(textArea as any).parentNode.appendChild(htmlPreview);
}
if (e.type === 'preview') {
textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
htmlPreview.style.width = '100%';
} else {
htmlPreview.classList.remove('e-pre-source');
textArea.style.width = '50%';
htmlPreview.style.width = '50%';
}
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
mdSource.parentElement.title = 'Code View';
}
}
return (
<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>
);
}
export default App;Custom format
The Rich Text Editor allows you to customize the markdown syntax by overriding its default syntax. Configure the customized markdown syntax using the formatterproperty.
This example demonstrates how to customize tags in Markdown formatting.
For example, use ‘+’ for unordered lists, ‘1., 2., 3.’ for ordered lists, ‘__ ‘for bold text, and ‘_’ for italic text.
[Class-component]
/**
* Rich Text Editor - Markdown - Custom Format Sample
*/
import { createElement } from '@syncfusion/ej2-base';
import { Image, Inject, Link, MarkdownEditor, MarkdownFormatter, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as Marked from 'marked';
class App extends React.Component {
rteObj;
mdSource;
mdSplit;
htmlPreview;
rteObj;
textArea;
// set the value to Rich Text Editor
template = `The sample is configured with customized markdown syntax using the __formatter__ property. Type the content and click the toolbar item to view customized markdown syntax. For unordered list, you need to add a plus sign before the word (e.g., + list1). Or To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).`;
// Rich Text Editor items list
items = ['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-icons e-md-preview"></span></button>',
tooltipText: 'Preview',
}, 'Undo', 'Redo'];
mdsource;
mdPreview;
// Rich Text Editor ToolbarSettings
toolbarSettings = {
items: this.items
};
formatter = new MarkdownFormatter({
formatTags: {
'Blockquote': '> '
},
listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
selectionTags: { 'Bold': '__', 'Italic': '_' }
});
markDownConversion() {
if (this.mdsource.classList.contains('e-active')) {
const id = this.rteObj.getID() + 'html-view';
const htmlPreview = this.rteObj.element.querySelector('#' + id);
htmlPreview.innerHTML = Marked.marked((this.rteObj.contentModule.getEditPanel()).value);
}
}
fullPreview(e) {
const id = this.rteObj.getID() + 'html-preview';
this.htmlPreview = this.rteObj.element.querySelector('#' + id);
if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
this.mdSource.classList.remove('e-active');
this.mdSplit.classList.remove('e-active');
this.mdSource.parentElement.title = 'Preview';
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
this.htmlPreview.style.display = 'none';
}
else {
this.mdSource.classList.add('e-active');
this.mdSplit.classList.add('e-active');
if (!this.htmlPreview) {
this.htmlPreview = createElement('div', { className: 'e-content' });
this.htmlPreview.id = id;
this.textArea.parentNode.appendChild(this.htmlPreview);
}
if (e.type === 'preview') {
this.textArea.style.display = 'none';
this.htmlPreview.classList.add('e-pre-source');
this.htmlPreview.style.width = '100%';
}
else {
this.htmlPreview.classList.remove('e-pre-source');
this.textArea.style.width = '50%';
this.htmlPreview.style.width = '50%';
}
this.htmlPreview.style.display = 'block';
this.htmlPreview.innerHTML = Marked.marked((this.rteObj.contentModule.getEditPanel()).value);
this.mdSource.parentElement.title = 'Code View';
}
}
render() {
return (<RichTextEditorComponent id="markdownRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor; }} height='260px' editorMode='Markdown' formatter={this.formatter} valueTemplate={this.template} toolbarSettings={this.toolbarSettings}>
<Inject services={[MarkdownEditor, Toolbar, Image, Link, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;/**
* Rich Text Editor - Markdown - Custom Format Sample
*/
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Inject, Link, MarkdownEditor, MarkdownFormatter, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as Marked from 'marked';
class App extends React.Component<{},{}> {
public rteObj: RichTextEditorComponent;
public mdSource: HTMLElement;
public mdSplit: HTMLElement;
public htmlPreview: HTMLElement;
public textArea: HTMLTextAreaElement;
// set the value to Rich Text Editor
public template: string = `The sample is configured with customized markdown syntax using the __formatter__ property. Type the content and click the toolbar item to view customized markdown syntax. For unordered list, you need to add a plus sign before the word (e.g., + list1). Or To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).`;
// Rich Text Editor items list
public items: object = ['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-icons e-md-preview"></span></button>',
tooltipText: 'Preview',
}, 'Undo', 'Redo'];
public mdsource: HTMLElement;
public mdPreview: HTMLElement;
// Rich Text Editor ToolbarSettings
public toolbarSettings: object = {
items: this.items
};
public formatter = new MarkdownFormatter({
formatTags: {
'Blockquote': '> '
},
listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
selectionTags: {'Bold': '__', 'Italic': '_'}
});
public markDownConversion(): void {
if (this.mdsource.classList.contains('e-active')) {
const id: string = (this.rteObj as any).getID() + 'html-view';
const htmlPreview: HTMLElement = (this.rteObj as any).element.querySelector('#' + id);
htmlPreview.innerHTML = Marked.marked(((this.rteObj as any).contentModule.getEditPanel()).value);
}
}
public fullPreview(e: { [key: string]: string | boolean }): void {
const id: string = this.rteObj.getID() + 'html-preview';
this.htmlPreview = this.rteObj.element.querySelector('#' + id);
if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
this.mdSource.classList.remove('e-active');
this.mdSplit.classList.remove('e-active');
this.mdSource.parentElement.title = 'Preview';
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
this.htmlPreview.style.display = 'none';
} else {
this.mdSource.classList.add('e-active');
this.mdSplit.classList.add('e-active');
if (!this.htmlPreview) {
this.htmlPreview = createElement('div', { className: 'e-content' });
this.htmlPreview.id = id;
(this.textArea as any).parentNode.appendChild(this.htmlPreview);
}
if (e.type === 'preview') {
this.textArea.style.display = 'none'; this.htmlPreview.classList.add('e-pre-source');
this.htmlPreview.style.width = '100%';
} else {
this.htmlPreview.classList.remove('e-pre-source');
this.textArea.style.width = '50%';
this.htmlPreview.style.width = '50%';
}
this.htmlPreview.style.display = 'block';
this.htmlPreview.innerHTML = Marked.marked(((this as any).rteObj.contentModule.getEditPanel()).value);
this.mdSource.parentElement.title = 'Code View';
}
}
public render() {
return (
<RichTextEditorComponent id="markdownRTE"
ref={(richtexteditor) => { this.rteObj = richtexteditor! }}
height='260px' editorMode='Markdown'
formatter= {this.formatter}
valueTemplate={this.template} toolbarSettings={this.toolbarSettings} >
<Inject services={[MarkdownEditor, Toolbar, Image, Link, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - Markdown - Custom Format Sample
*/
import { createElement } from '@syncfusion/ej2-base';
import { Image, Inject, Link, MarkdownEditor, MarkdownFormatter, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as Marked from 'marked';
function App() {
let rteObj;
let mdSource;
let mdSplit;
let htmlPreview;
let defaultRTE;
let textArea;
// set the value to Rich Text Editor
let template = `The sample is configured with customized markdown syntax using the __formatter__ property. Type the content and click the toolbar item to view customized markdown syntax. For unordered list, you need to add a plus sign before the word (e.g., + list1). Or To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).`;
// Rich Text Editor items list
let items = ['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-icons e-md-preview"></span></button>',
tooltipText: 'Preview',
}, 'Undo', 'Redo'];
let mdsource;
let mdPreview;
// Rich Text Editor ToolbarSettings
let toolbarSettings = {
items: items
};
let formatter = new MarkdownFormatter({
formatTags: {
'Blockquote': '> '
},
listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
selectionTags: { 'Bold': '__', 'Italic': '_' }
});
function markDownConversion() {
if (mdsource.classList.contains('e-active')) {
const id = rteObj.getID() + 'html-view';
const htmlPreview = rteObj.element.querySelector('#' + id);
htmlPreview.innerHTML = Marked.marked((rteObj.contentModule.getEditPanel()).value);
}
}
function fullPreview(e) {
const id = defaultRTE.getID() + 'html-preview';
htmlPreview = defaultRTE.element.querySelector('#' + id);
if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
mdSource.classList.remove('e-active');
mdSplit.classList.remove('e-active');
mdSource.parentElement.title = 'Preview';
textArea.style.display = 'block';
textArea.style.width = '100%';
htmlPreview.style.display = 'none';
}
else {
mdSource.classList.add('e-active');
mdSplit.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content' });
htmlPreview.id = id;
textArea.parentNode.appendChild(htmlPreview);
}
if (e.type === 'preview') {
textArea.style.display = 'none';
htmlPreview.classList.add('e-pre-source');
htmlPreview.style.width = '100%';
}
else {
htmlPreview.classList.remove('e-pre-source');
textArea.style.width = '50%';
htmlPreview.style.width = '50%';
}
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = Marked.marked((defaultRTE.contentModule.getEditPanel()).value);
mdSource.parentElement.title = 'Code View';
}
}
return (<RichTextEditorComponent id="markdownRTE" ref={(richtexteditor) => { rteObj = richtexteditor; }} height='260px' editorMode='Markdown' formatter={formatter} valueTemplate={template} toolbarSettings={toolbarSettings}>
<Inject services={[MarkdownEditor, Toolbar, Image, Link, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;/**
* Rich Text Editor - Markdown - Custom Format Sample
*/
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Inject, Link, MarkdownEditor, MarkdownFormatter, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as Marked from 'marked';
function App(){
let rteObj: RichTextEditorComponent;
let mdSource: HTMLElement;
let mdSplit: HTMLElement;
let htmlPreview: HTMLElement;
let textArea: HTMLTextAreaElement;
// set the value to Rich Text Editor
let template: string = `The sample is configured with customized markdown syntax using the __formatter__ property. Type the content and click the toolbar item to view customized markdown syntax. For unordered list, you need to add a plus sign before the word (e.g., + list1). Or To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).`;
// Rich Text Editor items list
let items: object = ['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-icons e-md-preview"></span></button>',
tooltipText: 'Preview',
}, 'Undo', 'Redo'];
let mdPreview: HTMLElement;
// Rich Text Editor ToolbarSettings
let toolbarSettings: object = {
items: items
};
let formatter = new MarkdownFormatter({
formatTags: {
'Blockquote': '> '
},
listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
selectionTags: {'Bold': '__', 'Italic': '_'}
});
function markDownConversion(): void {
if (mdsource.classList.contains('e-active')) {
const id: string = (rteObj as any).getID() + 'html-view';
const htmlPreview: HTMLElement = (rteObj as any).element.querySelector('#' + id);
htmlPreview.innerHTML = Marked.marked(((rteObj as any).contentModule.getEditPanel()).value);
}
}
function fullPreview(e: { [key: string]: string | boolean }): void {
const id: string = rteObj.getID() + 'html-preview';
htmlPreview = rteObj.element.querySelector('#' + id);
if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
mdSource.classList.remove('e-active');
mdSplit.classList.remove('e-active');
mdSource.parentElement.title = 'Preview';
textArea.style.display = 'block';
textArea.style.width = '100%';
htmlPreview.style.display = 'none';
} else {
mdSource.classList.add('e-active');
mdSplit.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content' });
htmlPreview.id = id;
(textArea as any).parentNode.appendChild(htmlPreview);
}
if (e.type === 'preview') {
textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
htmlPreview.style.width = '100%';
} else {
htmlPreview.classList.remove('e-pre-source');
textArea.style.width = '50%';
htmlPreview.style.width = '50%';
}
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = Marked.marked((rteObj.contentModule.getEditPanel()).value);
mdSource.parentElement.title = 'Code View';
}
}
return (
<RichTextEditorComponent id="markdownRTE"
ref={(richtexteditor) => { rteObj = richtexteditor! }}
height='260px' editorMode='Markdown'
formatter= {formatter}
valueTemplate={template} toolbarSettings={toolbarSettings} >
<Inject services={[MarkdownEditor, Toolbar, Image, Link, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;Markdown to HTML
The Rich Text Editor provides an instant preview of Markdown changes. Type or edit the text and apply formatting to view the Markdown preview.
This example demonstrates how to preview Markdown changes in the Rich Text Editor. The third-party library Marked is used to convert Markdown into HTML content.
[Class-component]
/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
class App extends React.Component {
mdSource;
mdSplit;
htmlPreview;
defaultRTE;
textArea;
value = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
componentDidMount() {
this.defaultRTE = new RichTextEditor({
actionComplete: (e) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
this.fullPreview({ mode: true, type: '' });
}
else if (!this.mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
if (this.htmlPreview) {
this.htmlPreview.style.display = 'none';
}
this.mdSplit.classList.remove('e-active');
this.mdSource.classList.remove('e-active');
}
this.markDownConversion();
}
setTimeout(() => {
this.defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
this.textArea = this.defaultRTE.contentModule.getEditPanel();
this.textArea.addEventListener('keyup', (e) => {
this.markDownConversion();
});
this.mdSource = document.getElementById('preview-code');
this.mdSource.addEventListener('click', (e) => {
this.fullPreview({ mode: true, type: 'preview' });
if (e.currentTarget.classList.contains('e-active')) {
this.defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo']);
e.currentTarget.parentElement.previousElementSibling.classList.add('e-overlay');
}
else {
this.defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo']);
e.currentTarget.parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
this.mdSplit = document.getElementById('MD_Preview');
this.mdSplit.addEventListener('click', (e) => {
if (this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.fullPreview({ mode: true, type: '' });
}
this.mdSource.classList.remove('e-active');
if (!this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor',
},
'FullScreen', '|', 'Undo', 'Redo'
]
},
valueTemplate: this.value,
});
this.defaultRTE.appendTo('#markdownPreview');
}
markDownConversion() {
if (this.mdSplit.classList.contains('e-active')) {
const id = this.defaultRTE.getID() + 'html-preview';
const htmlPreview = this.defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked((this.defaultRTE.contentModule.getEditPanel()).value);
}
}
fullPreview(e) {
const id = this.defaultRTE.getID() + 'html-preview';
this.htmlPreview = this.defaultRTE.element.querySelector('#' + id);
if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
this.mdSource.classList.remove('e-active');
this.mdSplit.classList.remove('e-active');
this.mdSource.parentElement.title = 'Preview';
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
this.htmlPreview.style.display = 'none';
}
else {
this.mdSource.classList.add('e-active');
this.mdSplit.classList.add('e-active');
if (!this.htmlPreview) {
this.htmlPreview = createElement('div', { className: 'e-content' });
this.htmlPreview.id = id;
this.textArea.parentNode.appendChild(this.htmlPreview);
}
if (e.type === 'preview') {
this.textArea.style.display = 'none';
this.htmlPreview.classList.add('e-pre-source');
this.htmlPreview.style.width = '100%';
}
else {
this.htmlPreview.classList.remove('e-pre-source');
this.textArea.style.width = '50%';
this.htmlPreview.style.width = '50%';
}
this.htmlPreview.style.display = 'block';
this.htmlPreview.innerHTML = marked((this.defaultRTE.contentModule.getEditPanel()).value);
this.mdSource.parentElement.title = 'Code View';
}
}
render() {
return (<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>);
}
}
export default App;/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
class App extends React.Component<{},{}> {
public mdSource: any;
public mdSplit: HTMLElement;
public htmlPreview: any;
public defaultRTE: RichTextEditor;
public textArea: HTMLTextAreaElement;
public value: string = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
public componentDidMount(): void {
this.defaultRTE = new RichTextEditor({
actionComplete: (e: any) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
this.fullPreview({ mode: true, type: '' });
} else if (!(this.mdSplit as any).parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
if (this.htmlPreview) { this.htmlPreview.style.display = 'none'; }
this.mdSplit.classList.remove('e-active');
this.mdSource.classList.remove('e-active');
}
this.markDownConversion();
}
setTimeout(() => {
this.defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
this.textArea = (this.defaultRTE as any).contentModule.getEditPanel();
this.textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
this.markDownConversion();
});
this.mdSource = document.getElementById('preview-code') as any;
this.mdSource.addEventListener('click', (e: MouseEvent) => {
this.fullPreview({ mode: true, type: 'preview' });
if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
this.defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.add('e-overlay');
} else {
this.defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
this.mdSplit = document.getElementById('MD_Preview') as any;
this.mdSplit.addEventListener('click', (e: MouseEvent) => {
if (this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.fullPreview({ mode: true, type: '' });
}
this.mdSource.classList.remove('e-active');
if (!this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
this.defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor',
},
'FullScreen', '|', 'Undo', 'Redo']
},
valueTemplate: this.value,
});
this.defaultRTE.appendTo('#markdownPreview');
}
public markDownConversion(): void {
if (this.mdSplit.classList.contains('e-active')) {
const id: string = this.defaultRTE.getID() + 'html-preview';
const htmlPreview: any = this.defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked(((this as any).defaultRTE.contentModule.getEditPanel()).value);
}
}
public fullPreview(e: { [key: string]: string | boolean }): void {
const id: string = this.defaultRTE.getID() + 'html-preview';
this.htmlPreview = this.defaultRTE.element.querySelector('#' + id);
if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
this.mdSource.classList.remove('e-active');
this.mdSplit.classList.remove('e-active');
this.mdSource.parentElement.title = 'Preview';
this.textArea.style.display = 'block';
this.textArea.style.width = '100%';
this.htmlPreview.style.display = 'none';
} else {
this.mdSource.classList.add('e-active');
this.mdSplit.classList.add('e-active');
if (!this.htmlPreview) {
this.htmlPreview = createElement('div', { className: 'e-content' });
this.htmlPreview.id = id;
(this.textArea as any).parentNode.appendChild(this.htmlPreview);
}
if (e.type === 'preview') {
this.textArea.style.display = 'none'; this.htmlPreview.classList.add('e-pre-source');
this.htmlPreview.style.width = '100%';
} else {
this.htmlPreview.classList.remove('e-pre-source');
this.textArea.style.width = '50%';
this.htmlPreview.style.width = '50%';
}
this.htmlPreview.style.display = 'block';
this.htmlPreview.innerHTML = marked(((this as any).defaultRTE.contentModule.getEditPanel()).value);
this.mdSource.parentElement.title = 'Code View';
}
}
public render() {
return (
<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
import { useEffect } from "react";
function App() {
useEffect(() => {
defaultRTE = new RichTextEditor({
actionComplete: (e) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
fullPreview({ mode: true, type: '' });
}
else if (!mdSplit.parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
textArea.style.display = 'block';
textArea.style.width = '100%';
if (htmlPreview) {
htmlPreview.style.display = 'none';
}
mdSplit.classList.remove('e-active');
mdSource.classList.remove('e-active');
}
markDownConversion();
}
setTimeout(() => {
defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
textArea = defaultRTE.contentModule.getEditPanel();
textArea.addEventListener('keyup', (e) => {
markDownConversion();
});
mdSource = document.getElementById('preview-code');
mdSource.addEventListener('click', (e) => {
fullPreview({ mode: true, type: 'preview' });
if (e.currentTarget.classList.contains('e-active')) {
defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo']);
e.currentTarget.parentElement.previousElementSibling.classList.add('e-overlay');
}
else {
defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo']);
e.currentTarget.parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
mdSplit = document.getElementById('MD_Preview');
mdSplit.addEventListener('click', (e) => {
if (defaultRTE.element.classList.contains('e-rte-full-screen')) {
fullPreview({ mode: true, type: '' });
}
mdSource.classList.remove('e-active');
if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {
defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor',
},
'FullScreen', '|', 'Undo', 'Redo'
]
},
valueTemplate: value,
});
defaultRTE.appendTo('#markdownPreview');
});
let mdSource;
let mdSplit;
let htmlPreview;
let defaultRTE;
let textArea;
let value = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
function markDownConversion() {
if (mdSplit.classList.contains('e-active')) {
const id = defaultRTE.getID() + 'html-preview';
const htmlPreview = defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
}
}
function fullPreview(e) {
const id = defaultRTE.getID() + 'html-preview';
htmlPreview = defaultRTE.element.querySelector('#' + id);
if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
mdSource.classList.remove('e-active');
mdSplit.classList.remove('e-active');
mdSource.parentElement.title = 'Preview';
textArea.style.display = 'block';
textArea.style.width = '100%';
htmlPreview.style.display = 'none';
}
else {
mdSource.classList.add('e-active');
mdSplit.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content' });
htmlPreview.id = id;
textArea.parentNode.appendChild(htmlPreview);
}
if (e.type === 'preview') {
textArea.style.display = 'none';
htmlPreview.classList.add('e-pre-source');
htmlPreview.style.width = '100%';
}
else {
htmlPreview.classList.remove('e-pre-source');
textArea.style.width = '50%';
htmlPreview.style.width = '50%';
}
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
mdSource.parentElement.title = 'Code View';
}
}
return (<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>);
}
export default App;/**
* Rich Text Editor - Markdown to HTML Sample
*/
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
import { useEffect } from "react";
function App() {
useEffect(() => {
defaultRTE = new RichTextEditor({
actionComplete: (e: any) => {
if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
fullPreview({ mode: true, type: '' });
} else if (!(mdSplit as any).parentElement.classList.contains('e-overlay')) {
if (e.targetItem === 'Minimize') {
textArea.style.display = 'block';
textArea.style.width = '100%';
if (htmlPreview) { htmlPreview.style.display = 'none'; }
mdSplit.classList.remove('e-active');
mdSource.classList.remove('e-active');
}
markDownConversion();
}
setTimeout(() => {
defaultRTE.toolbarModule.refreshToolbarOverflow();
}, 400);
},
created: () => {
textArea = (defaultRTE as any).contentModule.getEditPanel();
textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
markDownConversion();
});
mdSource = document.getElementById('preview-code') as any;
mdSource.addEventListener('click', (e: MouseEvent) => {
fullPreview({ mode: true, type: 'preview' });
if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.add('e-overlay');
} else {
defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', 'Undo', 'Redo']);
(e.currentTarget as any).parentElement.previousElementSibling.classList.remove('e-overlay');
}
});
mdSplit = document.getElementById('MD_Preview') as any;
mdSplit.addEventListener('click', (e: MouseEvent) => {
if (defaultRTE.element.classList.contains('e-rte-full-screen')) {
fullPreview({ mode: true, type: '' });
}
mdSource.classList.remove('e-active');
if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {
defaultRTE.showFullScreen();
}
});
},
editorMode: 'Markdown',
height: '300px',
toolbarSettings: {
items: [
'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', '|',
{
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
tooltipText: 'Preview'
},
{
template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
'<span class="e-btn-icon e-view-side e-icons"></span></button>',
tooltipText: 'Split Editor',
},
'FullScreen', '|', 'Undo', 'Redo']
},
valueTemplate: value,
});
defaultRTE.appendTo('#markdownPreview');
});
let mdSource: any;
let mdSplit: HTMLElement;
let htmlPreview: any;
let defaultRTE: RichTextEditor;
let textArea: HTMLTextAreaElement;
let value: string = `***Overview***
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.
***Key features***
- *Mode*: Provides IFRAME and DIV mode.
- *Module*: Modular library to load the necessary functionality on demand.
- *Toolbar*: Provide a fully customizable toolbar.
- *Editing*: HTML view to edit the source directly for developers.
- *Third-party Integration*: Supports to integrate third-party library.
- *Preview*: Preview the modified content before saving it.
- *Tools*: Handling images, hyperlinks, video, uploads and more.
- *Undo and Redo*: Undo/redo manager.
- *Lists*: Creates bulleted and numbered list.`;
function markDownConversion(): void {
if (mdSplit.classList.contains('e-active')) {
const id: string = defaultRTE.getID() + 'html-preview';
const htmlPreview: any = defaultRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
}
}
function fullPreview(e: { [key: string]: string | boolean }): void {
const id: string = defaultRTE.getID() + 'html-preview';
htmlPreview = defaultRTE.element.querySelector('#' + id);
if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
mdSource.classList.remove('e-active');
mdSplit.classList.remove('e-active');
mdSource.parentElement.title = 'Preview';
textArea.style.display = 'block';
textArea.style.width = '100%';
htmlPreview.style.display = 'none';
} else {
mdSource.classList.add('e-active');
mdSplit.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content' });
htmlPreview.id = id;
(textArea as any).parentNode.appendChild(htmlPreview);
}
if (e.type === 'preview') {
textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
htmlPreview.style.width = '100%';
} else {
htmlPreview.classList.remove('e-pre-source');
textArea.style.width = '50%';
htmlPreview.style.width = '50%';
}
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
mdSource.parentElement.title = 'Code View';
}
}
return (
<div id="rte-default" className='control-pane'>
<div className='control-section' id="rtePreview">
<div className="content-wrapper">
<div id="markdownPreview"/>
</div>
</div>
</div>
);
}
export default App;