Contents
- Importing Content from Microsoft Word
- Exporting Content to PDF and Microsoft Word
Having trouble getting help?
Contact Support
Contact Support
Content Import/Export in React Rich Text Editor component
27 Feb 202524 minutes to read
Importing Content from Microsoft Word
The Rich Text Editor provides functionality to import content directly from Microsoft Word documents, preserving the original formatting and structure. This feature ensures a smooth transition of content from Word to the editor, maintaining elements such as headings, lists, tables, and text styles.
To integrate an ImportWord option into the Rich Text Editor toolbar, you can add it as a custom toolbar items using the items property in toolbarSettings.
The following example illustrates how to set up the ImportWord in the Rich Text Editor to facilitate content importation from Word documents:
[Class-component]
import * as React from 'react';
import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport } from '@syncfusion/ej2-react-richtexteditor';
class App extends React.Component {
hostUrl = 'https://services.syncfusion.com/react/production/';
items = [ 'ImportWord'];
rteValue = `<h2 style="text-align: center;">Invitation to Microsoft Webinar Meet-Up</h2><p>
Dear Guest,
</p><p>
We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.
</p><h2>Event Details:</h2><table class="e-rte-table" style="width: 100%; height: 125px;">
<tbody>
<tr style="height: 20%;">
<th class="">Time:</th>
<td>10:00 AM - 12:00 PM</td>
</tr>
<tr style="height: 20%;">
<th>Duration:</th>
<td>2 hours</td>
</tr>
<tr style="height: 20%;">
<th>Platform:</th>
<td>Microsoft Teams</td>
</tr>
</tbody></table><p><br></p><h2>Agenda:</h2><ul>
<li>Introduction to Cutting-Edge Microsoft Technologies</li>
<li>Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions</li>
<li>Live Q&A Session with Industry Experts</li>
<li>Networking Opportunities with Peers and Professionals</li>
</ul><h2>Why Attend?</h2><ul>
<li>Gain insights into the latest trends and advancements in technology.</li>
<li>Interact with industry experts and expand your professional network.</li>
<li>Get your questions answered in real-time during the live Q&A session.</li>
<li>Access exclusive resources and offers available only to webinar attendees.</li>
</ul><p>
Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.
</p><p>
We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at <a href="mailto:webinar@company.com">webinar@company.com</a>.</p><p>
<br></p><p>Warm regards,</p><p>John Doe<br>Event Coordinator<br>ABC Company</p>`;
insertImageSettings = {
saveUrl: this.hostUrl + 'api/RichTextEditor/SaveFile',
removeUrl: this.hostUrl + 'api/RichTextEditor/DeleteFile',
path: this.hostUrl + 'RichTextEditor/'
};
toolbarSettings = {
items: this.items
};
importWord = {
serviceUrl: this.hostUrl + 'api/RichTextEditor/ImportFromWord',
};
render() {
return (<div className='control-pane'>
<div className='control-section' id="rteTools">
<div className='rte-control-section'>
<RichTextEditorComponent id="importDocument" importWord={this.importWord} toolbarSettings={this.toolbarSettings} insertImageSettings={this.insertImageSettings} value={this.rteValue} enableXhtml={true}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport]}/>
</RichTextEditorComponent>
</div>
</div>
</div>);
}
}
export default App;import * as React from 'react';
import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport } from '@syncfusion/ej2-react-richtexteditor';
import { ToolbarSettingsModel, ImportWordModel } from '@syncfusion/ej2-react-richtexteditor';
class App extends React.Component<{},{}> {
private hostUrl: string = 'https://services.syncfusion.com/react/production/';
private items: any = ['ImportWord']
private rteValue: string = `<h2 style="text-align: center;">Invitation to Microsoft Webinar Meet-Up</h2><p>
Dear Guest,
</p><p>
We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.
</p><h2>Event Details:</h2><table class="e-rte-table" style="width: 100%; height: 125px;">
<tbody>
<tr style="height: 20%;">
<th class="">Time:</th>
<td>10:00 AM - 12:00 PM</td>
</tr>
<tr style="height: 20%;">
<th>Duration:</th>
<td>2 hours</td>
</tr>
<tr style="height: 20%;">
<th>Platform:</th>
<td>Microsoft Teams</td>
</tr>
</tbody></table><p><br></p><h2>Agenda:</h2><ul>
<li>Introduction to Cutting-Edge Microsoft Technologies</li>
<li>Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions</li>
<li>Live Q&A Session with Industry Experts</li>
<li>Networking Opportunities with Peers and Professionals</li>
</ul><h2>Why Attend?</h2><ul>
<li>Gain insights into the latest trends and advancements in technology.</li>
<li>Interact with industry experts and expand your professional network.</li>
<li>Get your questions answered in real-time during the live Q&A session.</li>
<li>Access exclusive resources and offers available only to webinar attendees.</li>
</ul><p>
Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.
</p><p>
We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at <a href="mailto:webinar@company.com">webinar@company.com</a>.</p><p>
<br></p><p>Warm regards,</p><p>John Doe<br>Event Coordinator<br>ABC Company</p>`;
private insertImageSettings: any = {
saveUrl: this.hostUrl + 'api/RichTextEditor/SaveFile',
removeUrl: this.hostUrl + 'api/RichTextEditor/DeleteFile',
path: this.hostUrl + 'RichTextEditor/'
}
private toolbarSettings: ToolbarSettingsModel = {
items: this.items
};
private importWord: ImportWordModel = {
serviceUrl: this.hostUrl + 'api/RichTextEditor/ImportFromWord',
};
render() {
return (
<div className='control-pane'>
<div className='control-section' id="rteTools">
<div className='rte-control-section'>
<RichTextEditorComponent id="importDocument" importWord={this.importWord} toolbarSettings={this.toolbarSettings} insertImageSettings={this.insertImageSettings} value={this.rteValue} enableXhtml={true}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport]} />
</RichTextEditorComponent>
</div>
</div>
</div>
);
}
}
export default App;[Functional-component]
import * as React from 'react';
import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport } from '@syncfusion/ej2-react-richtexteditor';
function App() {
const hostUrl = 'https://services.syncfusion.com/react/production/';
const items = ['ImportWord'];
const rteValue = `<h2 style="text-align: center;">Invitation to Microsoft Webinar Meet-Up</h2><p>
Dear Guest,
</p><p>
We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.
</p><h2>Event Details:</h2><table class="e-rte-table" style="width: 100%; height: 125px;">
<tbody>
<tr style="height: 20%;">
<th class="">Time:</th>
<td>10:00 AM - 12:00 PM</td>
</tr>
<tr style="height: 20%;">
<th>Duration:</th>
<td>2 hours</td>
</tr>
<tr style="height: 20%;">
<th>Platform:</th>
<td>Microsoft Teams</td>
</tr>
</tbody></table><p><br></p><h2>Agenda:</h2><ul>
<li>Introduction to Cutting-Edge Microsoft Technologies</li>
<li>Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions</li>
<li>Live Q&A Session with Industry Experts</li>
<li>Networking Opportunities with Peers and Professionals</li>
</ul><h2>Why Attend?</h2><ul>
<li>Gain insights into the latest trends and advancements in technology.</li>
<li>Interact with industry experts and expand your professional network.</li>
<li>Get your questions answered in real-time during the live Q&A session.</li>
<li>Access exclusive resources and offers available only to webinar attendees.</li>
</ul><p>
Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.
</p><p>
We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at <a href="mailto:webinar@company.com">webinar@company.com</a>.</p><p>
<br></p><p>Warm regards,</p><p>John Doe<br>Event Coordinator<br>ABC Company</p>`;
const insertImageSettings = {
saveUrl: hostUrl + 'api/RichTextEditor/SaveFile',
removeUrl: hostUrl + 'api/RichTextEditor/DeleteFile',
path: hostUrl + 'RichTextEditor/',
};
const toolbarSettings = {
items: items,
};
const importWord = {
serviceUrl: hostUrl + 'api/RichTextEditor/ImportFromWord',
};
return (<div className='control-pane'>
<div className='control-section' id="rteTools">
<div className='rte-control-section'>
<RichTextEditorComponent
id="importDocument"
importWord={importWord}
toolbarSettings={toolbarSettings}
insertImageSettings={insertImageSettings}
value={rteValue}
enableXhtml={true}>
<Inject services={[ Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport]}/>
</RichTextEditorComponent>
</div>
</div>
</div>);
}
export default App;import * as React from 'react';
import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport } from '@syncfusion/ej2-react-richtexteditor';
import { ToolbarSettingsModel, ImportWordModel } from '@syncfusion/ej2-react-richtexteditor';
function App() {
const hostUrl: string = 'https://services.syncfusion.com/react/production/';
const items: any = ['ImportWord']
const rteValue: string = `<h2 style="text-align: center;">Invitation to Microsoft Webinar Meet-Up</h2><p>
Dear Guest,
</p><p>
We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.
</p><h2>Event Details:</h2><table class="e-rte-table" style="width: 100%; height: 125px;">
<tbody>
<tr style="height: 20%;">
<th class="">Time:</th>
<td>10:00 AM - 12:00 PM</td>
</tr>
<tr style="height: 20%;">
<th>Duration:</th>
<td>2 hours</td>
</tr>
<tr style="height: 20%;">
<th>Platform:</th>
<td>Microsoft Teams</td>
</tr>
</tbody></table><p><br></p><h2>Agenda:</h2><ul>
<li>Introduction to Cutting-Edge Microsoft Technologies</li>
<li>Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions</li>
<li>Live Q&A Session with Industry Experts</li>
<li>Networking Opportunities with Peers and Professionals</li>
</ul><h2>Why Attend?</h2><ul>
<li>Gain insights into the latest trends and advancements in technology.</li>
<li>Interact with industry experts and expand your professional network.</li>
<li>Get your questions answered in real-time during the live Q&A session.</li>
<li>Access exclusive resources and offers available only to webinar attendees.</li>
</ul><p>
Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.
</p><p>
We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at <a href="mailto:webinar@company.com">webinar@company.com</a>.</p><p>
<br></p><p>Warm regards,</p><p>John Doe<br>Event Coordinator<br>ABC Company</p>`;
const insertImageSettings: any = {
saveUrl: hostUrl + 'api/RichTextEditor/SaveFile',
removeUrl: hostUrl + 'api/RichTextEditor/DeleteFile',
path: hostUrl + 'RichTextEditor/'
}
const toolbarSettings: ToolbarSettingsModel = {
items: items
};
const importWord: ImportWordModel = {
serviceUrl: hostUrl + 'api/RichTextEditor/ImportFromWord',
};
return (
<div className='control-pane'>
<div className='control-section' id="rteTools">
<div className='rte-control-section'>
<RichTextEditorComponent id="importDocument" importWord={importWord} toolbarSettings={toolbarSettings} insertImageSettings={insertImageSettings} value={rteValue} enableXhtml={true}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport]} />
</RichTextEditorComponent>
</div>
</div>
</div>
);
}
export default App;Exporting Content to PDF and Microsoft Word
The Rich Text Editor’s export functionality allows users to convert their edited content into PDF or Word documents with a single click, preserving all text styles, images, tables, and other formatting elements.
You can add ExportWord and ExportPdf tools to the Rich Text Editor toolbar using the toolbarSettings items property.
The following example demonstrates how to configure the ExportWord and ExportPdf tools in the Rich Text Editor, facilitating the export of content into Word or PDF documents:
[Class-component]
import * as React from 'react';
import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport } from '@syncfusion/ej2-react-richtexteditor';
class App extends React.Component {
hostUrl = 'https://services.syncfusion.com/react/production/';
// Rich Text Editor items list
items = ['ExportWord', 'ExportPdf'];
rteValue = `<h2 style="text-align: center;">Invitation to Microsoft Webinar Meet-Up</h2><p>
Dear Guest,
</p><p>
We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.
</p><h2>Event Details:</h2><table class="e-rte-table" style="width: 100%; height: 125px;">
<tbody>
<tr style="height: 20%;">
<th class="">Time:</th>
<td>10:00 AM - 12:00 PM</td>
</tr>
<tr style="height: 20%;">
<th>Duration:</th>
<td>2 hours</td>
</tr>
<tr style="height: 20%;">
<th>Platform:</th>
<td>Microsoft Teams</td>
</tr>
</tbody></table><p><br></p><h2>Agenda:</h2><ul>
<li>Introduction to Cutting-Edge Microsoft Technologies</li>
<li>Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions</li>
<li>Live Q&A Session with Industry Experts</li>
<li>Networking Opportunities with Peers and Professionals</li>
</ul><h2>Why Attend?</h2><ul>
<li>Gain insights into the latest trends and advancements in technology.</li>
<li>Interact with industry experts and expand your professional network.</li>
<li>Get your questions answered in real-time during the live Q&A session.</li>
<li>Access exclusive resources and offers available only to webinar attendees.</li>
</ul><p>
Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.
</p><p>
We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at <a href="mailto:webinar@company.com">webinar@company.com</a>.</p><p>
<br></p><p>Warm regards,</p><p>John Doe<br>Event Coordinator<br>ABC Company</p>`;
insertImageSettings = {
saveUrl: this.hostUrl + 'api/RichTextEditor/SaveFile',
removeUrl: this.hostUrl + 'api/RichTextEditor/DeleteFile',
path: this.hostUrl + 'RichTextEditor/'
};
//Rich Text Editor ToolbarSettings
toolbarSettings = {
items: this.items
};
exportWord = {
serviceUrl: this.hostUrl + 'api/RichTextEditor/ExportToDocx',
fileName: 'RichTextEditor.docx',
stylesheet: `
.e-rte-content {
font-size: 1em;
font-weight: 400;
margin: 0;
}`
};
exportPdf = {
serviceUrl: 'https://ej2services.syncfusion.com/react/development/api/RichTextEditor/ExportToPdf',
fileName: 'RichTextEditor.pdf',
stylesheet: `
.e-rte-content{
font-size: 1em;
font-weight: 400;
margin: 0;
}`
};
render() {
return (<div className='control-pane'>
<div className='control-section' id="rteTools">
<div className='rte-control-section'>
<RichTextEditorComponent id="exportDocument" exportPdf={this.exportPdf} exportWord={this.exportWord} value={this.rteValue} toolbarSettings={this.toolbarSettings} enableXhtml={true} insertImageSettings={this.insertImageSettings}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport]}/>
</RichTextEditorComponent>
</div>
</div>
</div>);
}
}
export default App;import * as React from 'react';
import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport } from '@syncfusion/ej2-react-richtexteditor';
import { ToolbarSettingsModel, ExportWordModel, ExportPdfModel } from '@syncfusion/ej2-react-richtexteditor';
class App extends React.Component<{},{}> {
private hostUrl: string = 'https://services.syncfusion.com/react/production/';
// Rich Text Editor items list
private items: any = ['ExportWord', 'ExportPdf'];
private rteValue: string = `<h2 style="text-align: center;">Invitation to Microsoft Webinar Meet-Up</h2><p>
Dear Guest,
</p><p>
We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.
</p><h2>Event Details:</h2><table class="e-rte-table" style="width: 100%; height: 125px;">
<tbody>
<tr style="height: 20%;">
<th class="">Time:</th>
<td>10:00 AM - 12:00 PM</td>
</tr>
<tr style="height: 20%;">
<th>Duration:</th>
<td>2 hours</td>
</tr>
<tr style="height: 20%;">
<th>Platform:</th>
<td>Microsoft Teams</td>
</tr>
</tbody></table><p><br></p><h2>Agenda:</h2><ul>
<li>Introduction to Cutting-Edge Microsoft Technologies</li>
<li>Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions</li>
<li>Live Q&A Session with Industry Experts</li>
<li>Networking Opportunities with Peers and Professionals</li>
</ul><h2>Why Attend?</h2><ul>
<li>Gain insights into the latest trends and advancements in technology.</li>
<li>Interact with industry experts and expand your professional network.</li>
<li>Get your questions answered in real-time during the live Q&A session.</li>
<li>Access exclusive resources and offers available only to webinar attendees.</li>
</ul><p>
Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.
</p><p>
We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at <a href="mailto:webinar@company.com">webinar@company.com</a>.</p><p>
<br></p><p>Warm regards,</p><p>John Doe<br>Event Coordinator<br>ABC Company</p>`;
private insertImageSettings: any = {
saveUrl: this.hostUrl + 'api/RichTextEditor/SaveFile',
removeUrl: this.hostUrl + 'api/RichTextEditor/DeleteFile',
path: this.hostUrl + 'RichTextEditor/'
}
//Rich Text Editor ToolbarSettings
private toolbarSettings: ToolbarSettingsModel = {
items: this.items
};
private exportWord: ExportWordModel = {
serviceUrl: this.hostUrl + 'api/RichTextEditor/ExportToDocx',
fileName: 'RichTextEditor.docx',
stylesheet: `
.e-rte-content {
font-size: 1em;
font-weight: 400;
margin: 0;
}
`
};
private exportPdf: ExportPdfModel = {
serviceUrl: 'https://ej2services.syncfusion.com/react/development/api/RichTextEditor/ExportToPdf',
fileName: 'RichTextEditor.pdf',
stylesheet: `
.e-rte-content{
font-size: 1em;
font-weight: 400;
margin: 0;
}
`
};
render() {
return (
<div className='control-pane'>
<div className='control-section' id="rteTools">
<div className='rte-control-section'>
<RichTextEditorComponent id="exportDocument" exportPdf={this.exportPdf} exportWord={this.exportWord} value={this.rteValue} toolbarSettings={this.toolbarSettings} enableXhtml={true} insertImageSettings={this.insertImageSettings}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport]} />
</RichTextEditorComponent>
</div>
</div>
</div>
);
}
}
export default App;[Functional-component]
import * as React from 'react';
import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport } from '@syncfusion/ej2-react-richtexteditor';
function App() {
const hostUrl = 'https://services.syncfusion.com/react/production/';
// Rich Text Editor items list
const items = ['ExportWord', 'ExportPdf'];
const rteValue = `<h2 style="text-align: center;">Invitation to Microsoft Webinar Meet-Up</h2><p>
Dear Guest,
</p><p>
We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.
</p><h2>Event Details:</h2><table class="e-rte-table" style="width: 100%; height: 125px;">
<tbody>
<tr style="height: 20%;">
<th class="">Time:</th>
<td>10:00 AM - 12:00 PM</td>
</tr>
<tr style="height: 20%;">
<th>Duration:</th>
<td>2 hours</td>
</tr>
<tr style="height: 20%;">
<th>Platform:</th>
<td>Microsoft Teams</td>
</tr>
</tbody></table><p><br></p><h2>Agenda:</h2><ul>
<li>Introduction to Cutting-Edge Microsoft Technologies</li>
<li>Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions</li>
<li>Live Q&A Session with Industry Experts</li>
<li>Networking Opportunities with Peers and Professionals</li>
</ul><h2>Why Attend?</h2><ul>
<li>Gain insights into the latest trends and advancements in technology.</li>
<li>Interact with industry experts and expand your professional network.</li>
<li>Get your questions answered in real-time during the live Q&A session.</li>
<li>Access exclusive resources and offers available only to webinar attendees.</li>
</ul><p>
Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.
</p><p>
We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at <a href="mailto:webinar@company.com">webinar@company.com</a>.</p><p>
<br></p><p>Warm regards,</p><p>John Doe<br>Event Coordinator<br>ABC Company</p>`;
const insertImageSettings = {
saveUrl: hostUrl + 'api/RichTextEditor/SaveFile',
removeUrl: hostUrl + 'api/RichTextEditor/DeleteFile',
path: hostUrl + 'RichTextEditor/'
};
//Rich Text Editor ToolbarSettings
const toolbarSettings = {
items: items
};
const exportWord = {
serviceUrl: hostUrl + 'api/RichTextEditor/ExportToDocx',
fileName: 'RichTextEditor.docx',
stylesheet: `
.e-rte-content {
font-size: 1em;
font-weight: 400;
margin: 0;
}
`
};
const exportPdf = {
serviceUrl: 'https://ej2services.syncfusion.com/react/development/api/RichTextEditor/ExportToPdf',
fileName: 'RichTextEditor.pdf',
stylesheet: `
.e-rte-content{
font-size: 1em;
font-weight: 400;
margin: 0;
}
`
};
return (<div className='control-pane'>
<div className='control-section' id="rteTools">
<div className='rte-control-section'>
<RichTextEditorComponent id="exportDocument" exportPdf={exportPdf} exportWord={exportWord} value={rteValue} toolbarSettings={toolbarSettings} enableXhtml={true} insertImageSettings={insertImageSettings}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport]}/>
</RichTextEditorComponent>
</div>
</div>
</div>
);
}
export default App;import * as React from 'react';
import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport } from '@syncfusion/ej2-react-richtexteditor';
import { ToolbarSettingsModel, ExportWordModel, ExportPdfModel } from '@syncfusion/ej2-react-richtexteditor';
function App() {
const hostUrl: string = 'https://services.syncfusion.com/react/production/';
// Rich Text Editor items list
const items: any = ['ExportWord', 'ExportPdf'];
const rteValue: string = `<h2 style="text-align: center;">Invitation to Microsoft Webinar Meet-Up</h2><p>
Dear Guest,
</p><p>
We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.
</p><h2>Event Details:</h2><table class="e-rte-table" style="width: 100%; height: 125px;">
<tbody>
<tr style="height: 20%;">
<th class="">Time:</th>
<td>10:00 AM - 12:00 PM</td>
</tr>
<tr style="height: 20%;">
<th>Duration:</th>
<td>2 hours</td>
</tr>
<tr style="height: 20%;">
<th>Platform:</th>
<td>Microsoft Teams</td>
</tr>
</tbody></table><p><br></p><h2>Agenda:</h2><ul>
<li>Introduction to Cutting-Edge Microsoft Technologies</li>
<li>Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions</li>
<li>Live Q&A Session with Industry Experts</li>
<li>Networking Opportunities with Peers and Professionals</li>
</ul><h2>Why Attend?</h2><ul>
<li>Gain insights into the latest trends and advancements in technology.</li>
<li>Interact with industry experts and expand your professional network.</li>
<li>Get your questions answered in real-time during the live Q&A session.</li>
<li>Access exclusive resources and offers available only to webinar attendees.</li>
</ul><p>
Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.
</p><p>
We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at <a href="mailto:webinar@company.com">webinar@company.com</a>.</p><p>
<br></p><p>Warm regards,</p><p>John Doe<br>Event Coordinator<br>ABC Company</p>`;
const insertImageSettings: any = {
saveUrl: hostUrl + 'api/RichTextEditor/SaveFile',
removeUrl: hostUrl + 'api/RichTextEditor/DeleteFile',
path: hostUrl + 'RichTextEditor/'
}
//Rich Text Editor ToolbarSettings
const toolbarSettings: ToolbarSettingsModel = {
items: items
};
const exportWord: ExportWordModel = {
serviceUrl: hostUrl + 'api/RichTextEditor/ExportToDocx',
fileName: 'RichTextEditor.docx',
stylesheet: `
.e-rte-content {
font-size: 1em;
font-weight: 400;
margin: 0;
}`
};
const exportPdf: ExportPdfModel = {
serviceUrl: 'https://ej2services.syncfusion.com/react/development/api/RichTextEditor/ExportToPdf',
fileName: 'RichTextEditor.pdf',
stylesheet: `
.e-rte-content{
font-size: 1em;
font-weight: 400;
margin: 0;
}`
};
return (
<div className='control-pane'>
<div className='control-section' id="rteTools">
<div className='rte-control-section'>
<RichTextEditorComponent id="exportDocument" exportPdf={exportPdf} exportWord={exportWord} value={rteValue} toolbarSettings={toolbarSettings} enableXhtml={true} insertImageSettings={insertImageSettings}>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport]} />
</RichTextEditorComponent>
</div>
</div>
</div>
);
}
export default App;