Integrated latest changes at 12-11-2025 1:30:05 PM

Author: SyncfusionBuild

ej2-javascript/rich-text-editor/import-and-export.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Content Import/Export in ##Platform_Name## Rich Text Editor control | Syncfusion
+title: Import/Export in ##Platform_Name## Rich Text Editor | Syncfusion
 description: Learn here all about Content Import/Export in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
 control: IContent Import/Export
@@ -15,7 +15,7 @@ domainurl: ##DomainURL##
 
 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](../api/rich-text-editor/toolbarSettings/#items) using the items property in toolbarSettings.
+To integrate an `ImportWord` option into the Rich Text Editor toolbar, you can add it as a custom toolbar [items](https://ej2.syncfusion.com/documentation/api/rich-text-editor/toolbarSettings#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:
 
@@ -46,7 +46,46 @@ The following example illustrates how to set up the `ImportWord` in the Rich Tex
 {% previewsample "page.domainurl/code-snippet/rich-text-editor/import-cs1" %}
 {% endif %}
 
-Here’s how to handle the server-side action for importing content from Word.
+## Secure importing with authentication
+
+The Rich Text Editor provides functionality to import Word documents with authentication for secure importing.
+
+The [wordImporting](https://ej2.syncfusion.com/documentation/api/rich-text-editor/index-default#wordimporting) event provides [UploadingEventArgs](https://ej2.syncfusion.com/documentation/api/uploader/uploadingeventargs) for secure Word file import. Use `currentRequest` to add authentication headers and `customFormData` to include extra parameters in the POST body along with the uploaded file. On the server, read headers and form data from the request to validate and process the import securely.
+
+The following example demonstrates how to configure `wordImporting` for secure importing:
+
+```ts
+
+import { RichTextEditor, Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, ImportExport } from '@syncfusion/ej2-richtexteditor';
+import { UploadingEventArgs } from '@syncfusion/ej2-inputs';
+RichTextEditor.Inject(Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, ImportExport);
+
+const hostUrl: string = 'https://services.syncfusion.com/js/production/';
+const importEditor: RichTextEditor = new RichTextEditor({
+    toolbarSettings: {
+        items: ['ImportWord']
+    },
+    insertImageSettings: {
+        saveUrl: hostUrl + 'api/RichTextEditor/SaveFile',
+        removeUrl: hostUrl + 'api/RichTextEditor/DeleteFile',
+        path: hostUrl + 'RichTextEditor/'
+    },
+    importWord: {
+        serviceUrl: hostUrl + 'api/RichTextEditor/ImportFromWord',
+    },
+    enableXhtml: true,
+    wordImporting:  onWordImport
+});
+importEditor.appendTo('#importEditor');
+function onWordImport(args: UploadingEventArgs): void {
+    let accessToken = "Authorization_token";
+    // adding authorization header
+    args.currentRequest.setRequestHeader('Authorization', accessToken)
+    // adding custom form Data
+    args.customFormData = [{'userId': '1234'}];
+}
+```
+Here’s how to handle the server-side action for importing content from Word with authentication.
 
 ```csharp
 
@@ -60,6 +99,10 @@ public class RichTextEditorController : Controller
         [Route("ImportFromWord")]
         public IActionResult ImportFromWord(IList<IFormFile> UploadFiles)
         {
+            // Read headers (e.g., Authorization)
+            var authorization = Request.Headers["Authorization"].ToString();
+            // Read custom form data (from args.customFormData)
+            var formData = Request.Form("userId").ToString();
             string HtmlString = string.Empty;
             if (UploadFiles != null)
             {
@@ -116,7 +159,7 @@ public class RichTextEditorController : Controller
 
 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](../api/rich-text-editor/toolbarSettings/#items) property.
+You can add `ExportWord` and `ExportPdf` tools to the Rich Text Editor toolbar using the toolbarSettings [items](https://ej2.syncfusion.com/documentation/api/rich-text-editor/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:
 
@@ -147,7 +190,65 @@ The following example demonstrates how to configure the `ExportWord` and `Export
 {% previewsample "page.domainurl/code-snippet/rich-text-editor/export-cs1" %}
 {% endif %}
 
-Here’s how to handle the server-side action for exporting content to PDF and Microsoft Word
+## Secure exporting with authentication
+
+The Rich Text Editor provides functionality to export Word or PDF documents with authentication for secure exporting.
+
+The [documentExporting](https://ej2.syncfusion.com/documentation/api/rich-text-editor/index-default#documentexporting) event provides `ExportingEventArgs` for secure export of Word or PDF files. Use `exportType` to identify the format, `currentRequest` to add authentication headers, and `customFormData` to send extra parameters in the POST body. On the server, read headers and custom data to validate and process the export securely.
+
+The following example demonstrates how to configure `documentExporting` for secure exporting:
+
+```ts
+import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport } from '@syncfusion/ej2-richtexteditor';
+RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport);
+
+const hostUrl: string = 'https://services.syncfusion.com/js/production/';
+const exportEditor: RichTextEditor = new RichTextEditor({
+    toolbarSettings: {
+        items: ['ExportWord', 'ExportPdf']
+    },
+    insertImageSettings: {
+        saveUrl: hostUrl + 'api/RichTextEditor/SaveFile',
+        removeUrl: hostUrl + 'api/RichTextEditor/DeleteFile',
+        path: hostUrl + 'RichTextEditor/'
+    },
+    exportWord: {
+        serviceUrl: hostUrl + 'api/RichTextEditor/ExportToDocx',
+        fileName: 'RichTextEditor.docx',
+        stylesheet: `
+        .e-rte-content {
+            font-size: 1em;
+            font-weight: 400;
+            margin: 0;
+        }
+    `
+    },
+    exportPdf: {
+        serviceUrl: hostUrl + 'api/RichTextEditor/ExportToPdf',
+        fileName: 'RichTextEditor.pdf',
+        stylesheet: `
+        .e-rte-content{
+            font-size: 1em;
+            font-weight: 400;
+            margin: 0;
+        }
+    `
+    },
+    enableXhtml: true,
+    documentExporting : onDocumentExporting
+});
+exportEditor.appendTo('#exportEditor');
+function onDocumentExporting(args: ExportingEventArgs): void {
+    const accessToken = "Authorization_token";
+    // Specify export type (e.g., 'Pdf' or 'Word')
+    args.exportType = 'Pdf';
+    // Add authentication header
+    args.currentRequest = [{ Authorization: accessToken }];
+    // Add custom form data
+    args.customFormData = [{ userId: '1234' }, { exportMode: 'secure' }];
+}
+```
+Here’s how to handle the server-side action for exporting content to PDF and Microsoft Word with authentication
 
  ```csharp
 
@@ -161,6 +262,10 @@ public class RichTextEditorController : Controller
         [Route("ExportToPdf")]
         public ActionResult ExportToPdf([FromBody] ExportParam args)
         {
+            // Read headers (e.g., Authorization)
+            var authorization = Request.Headers["Authorization"].ToString();
+            // Read custom form data (from args.customFormData)
+            var formData = args.CustomFormData;
             string htmlString = args.html;
             if (htmlString == null && htmlString == "")
             {
@@ -235,6 +340,8 @@ public class RichTextEditorController : Controller
         public class ExportParam
         {
             public string html { get; set; }
+            // For receiving custom form data
+            public List<Dictionary<string,string>> CustomFormData { get; set; }
         }
     }    
 

ej2-javascript/rich-text-editor/smart-editing/mail-merge.md

@@ -27,6 +27,8 @@ To enable mail merge functionality, the Rich Text Editor toolbar is extended wit
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
 
+{% raw %}
+
 const mailMergeEditor: RichTextEditor = new RichTextEditor({
    toolbarSettings: {
       items: [
@@ -40,6 +42,8 @@ const mailMergeEditor: RichTextEditor = new RichTextEditor({
 });
 mailMergeEditor.appendTo('#mailMergeEditor');
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -48,6 +52,8 @@ mailMergeEditor.appendTo('#mailMergeEditor');
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
 
+{% raw %}
+
 var mailMergeEditor = new ej.richtexteditor.RichTextEditor({
   toolbarSettings: {
       items: [
@@ -61,6 +67,8 @@ var mailMergeEditor = new ej.richtexteditor.RichTextEditor({
 });
 mailMergeEditor.appendTo('#mailMergeEditor');
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
@@ -74,6 +82,8 @@ The **DropDownButton** component displays a list of merge fields such as First N
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
 
+{% raw %}
+
 let insertField: DropDownButton = new DropDownButton({
    items: [
       { text: 'First Name' },
@@ -100,6 +110,8 @@ function onItemSelect(args: MenuEventArgs): void {
    );
 }
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -108,6 +120,8 @@ function onItemSelect(args: MenuEventArgs): void {
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
 
+{% raw %}
+
 var insertField = new ej.splitbuttons.DropDownButton({
   items: [
     { text: 'First Name' },
@@ -139,6 +153,8 @@ function onItemSelect(args) {
   }
 }
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
@@ -152,10 +168,12 @@ The **Mention** control provides an alternative way to insert placeholders by ty
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
 
+{% raw %}
+
 const mentionObj: Mention = new Mention({
    dataSource: mergeData,
    target: '#mailMergeEditor',
-   mentionChar: <code>&#123;&#123;</code>,
+   mentionChar: `{{`,
    fields: { text: 'text' },
    allowSpaces: true,
    popupWidth: '250px',
@@ -164,6 +182,8 @@ const mentionObj: Mention = new Mention({
 });
 mentionObj.appendTo('#mentionField');
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -172,18 +192,22 @@ mentionObj.appendTo('#mentionField');
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
 
+{% raw %}
+
 var mergeObj = new ej.dropdowns.Mention({
   dataSource: mergeData,
   fields: { text: 'Name', value: 'Field' },
   displayTemplate: '<span>{{${Field}}}</span>',
   popupWidth: '250px',
   popupHeight: '200px',
   target: mailMergeEditor.inputElement,
-  mentionChar: <code>&#123;&#123;</code> ,
+  mentionChar: `{{` ,
   allowSpaces: true,
 });
 mergeObj.appendTo('#mentionField');
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
@@ -195,7 +219,9 @@ When the **Merge Data** button is clicked, the editor content is processed to re
 {% if page.publishingplatform == "typescript" %}
 
 {% tabs %}
-{% highlight %}
+{% highlight ts tabtitle="app.ts" %}
+
+{% raw %}
 
 document.getElementById('merge_data')?.addEventListener('click', onClickHandler);
 
@@ -209,6 +235,8 @@ function replacePlaceholders(template: string, data: { [key: string]: string }):
    return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => data[key.trim()] || match);
 }
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -217,6 +245,8 @@ function replacePlaceholders(template: string, data: { [key: string]: string }):
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
 
+{% raw %}
+
 var mergeField = document.getElementById('merge_data');
 if (mergeField) {
   mergeField.addEventListener('click', onClickHandler);
@@ -242,6 +272,8 @@ function replacePlaceholders(template, data) {
   });
 }
 
+{% endraw %}
+
 {% endhighlight %}
 {% endtabs %}
 {% endif %}