Update to 25.1.3+

Author: AlisherAmonulloev

ASP.NET Core/Views/Home/orig_Index.cshtml

@@ -0,0 +1,84 @@
+@using ASP_NET_Core.Models
+
+@(Html.DevExtreme().HtmlEditor()
+	.ID("editor")
+	.Height(400)
+	.Value(new JS("value"))
+	.Variables(variable => variable
+		.DataSource(new[] { "FirstName", "LastName", })
+		.EscapeChar(new[] { "{", "}" })
+	)
+	.Toolbar(toolbar => toolbar
+		.Multiline(true)
+		.Items(items =>
+		{
+			items.Add().Name(HtmlEditorToolbarItem.Undo);
+			items.Add().Name(HtmlEditorToolbarItem.Redo);
+			items.Add().Name(HtmlEditorToolbarItem.Separator);
+			items.Add().Name(HtmlEditorToolbarItem.Variable);
+			items.Add().Name(HtmlEditorToolbarItem.Separator);
+			items.Add().Name(HtmlEditorToolbarItem.Bold);
+			items.Add().Name(HtmlEditorToolbarItem.Italic);
+			items.Add().Name(HtmlEditorToolbarItem.Strike);
+			items.Add().Name(HtmlEditorToolbarItem.Underline);
+			items.Add().Name(HtmlEditorToolbarItem.Separator);
+			items.Add().Widget(w => w.Button().Text("Convert HtmlEditor variables").OnClick("convertVariableOnClick"));
+		})
+	)
+)
+
+@(Html.DevExtreme().TextBox()
+	.ID("first")
+	.Label("FirstName - Default: 'John'")
+	.LabelMode(EditorLabelMode.Floating)
+)
+
+@(Html.DevExtreme().TextBox()
+	.ID("last")
+	.Label("LastName - Default: 'Smith'")
+	.LabelMode(EditorLabelMode.Floating)
+)
+
+<script>
+const value = `<p>This is a demo to illustrate how to parse and convert variables. To get started, input several variables into the editor, type the variable's values in the TextBoxes below, and click the "Convert HtmlEditor variables" button.</p>`;
+const DX_VARIABLE_CLASS = 'dx-variable';
+const DATA_VAR_VALUE_ATTR = 'data-var-value';
+
+/*
+value: dxHtmlEditor.value
+variableMap: object = Must contain `key: value` pairs of variable content
+	{
+		'FirstName': 'John',
+		'LastName': 'Smith'
+	}
+*/
+
+function replaceVariables (value, variablesMap) {
+	const parser = new DOMParser();
+  const doc = parser.parseFromString(value, 'text/html');
+  const variables = doc.querySelectorAll(`.${DX_VARIABLE_CLASS}`);
+	
+  variables.forEach(variable => {
+    const variableValue = variablesMap[variable.getAttribute(DATA_VAR_VALUE_ATTR)];
+    variable.outerHTML = variableValue;
+  });
+	
+  return doc.body.innerHTML.toString();
+}
+
+function convertVariableOnClick(e) {
+	const htmlEditor = $("#editor").dxHtmlEditor("instance");
+	const firstName = $("#first").dxTextBox("instance").option("value") || "John";
+	const lastName = $("#last").dxTextBox("instance").option("value") || "Smith";
+
+	const valueWithReplacedVariables = replaceVariables(
+		htmlEditor.option("value"),
+		{
+			"FirstName": firstName,
+			"LastName": lastName
+		}
+	);
+
+	htmlEditor.option("value", valueWithReplacedVariables);
+}
+</script>

Angular/src/app/orig_app.component.html

@@ -0,0 +1,22 @@
+<div class="default-style">
+  <dx-html-editor #editor [value]="initialValue" [height]="400">
+    <dxo-toolbar [multiline]="true">
+      <dxi-item name="undo"></dxi-item>
+      <dxi-item name="redo"></dxi-item>
+      <dxi-item name="separator"></dxi-item>
+      <dxi-item name="variable"></dxi-item>
+      <dxi-item name="separator"></dxi-item>
+      <dxi-item name="bold"></dxi-item>
+      <dxi-item name="italic"></dxi-item>
+      <dxi-item name="strike"></dxi-item>
+      <dxi-item name="underline"></dxi-item>
+      <dxi-item name="separator"></dxi-item>
+      <dxi-item widget="dxButton"
+        [options]="{ text: 'Convert HtmlEditor variables', onClick: convertVariableOnClick }"></dxi-item>
+    </dxo-toolbar>
+    <dxo-variables [dataSource]="[ 'FirstName', 'LastName' ]" [escapeChar]="[ '{', '}' ]">
+    </dxo-variables>
+  </dx-html-editor>
+  <dx-text-box [(value)]="firstName" label="FirstName - Default: 'John'" labelMode="floating"></dx-text-box>
+  <dx-text-box [(value)]="lastName" label="LastName - Default: 'John'" labelMode="floating"></dx-text-box>
+</div>

Angular/src/app/orig_app.component.scss

@@ -0,0 +1,4 @@
+.default-style {
+  margin: 50px 50px;
+  width: 90vh;
+}

Angular/src/app/orig_app.component.ts

@@ -0,0 +1,36 @@
+import { Component, ViewChild } from '@angular/core';
+import { DxHtmlEditorComponent } from "devextreme-angular/ui/html-editor";
+import { replaceVariables } from "./replace-variables";
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  @ViewChild("editor", { static: false }) htmlEditor!: DxHtmlEditorComponent;
+
+  title = 'Angular';
+  initialValue: string = `<p>This is a demo to illustrate how to parse and convert variables. To get started, input several variables into the editor, type the variable's values in the TextBoxes below, and click the "Convert HtmlEditor variables" button.</p>`;
+  firstName: string = "";
+  lastName: string = "";
+
+  convertVariableOnClick() {
+    const firstName = (this.firstName.length > 0) ? this.firstName : "John";
+    const lastName = (this.lastName.length > 0) ? this.lastName : "Smith";
+    let value: string = this.htmlEditor?.instance.option("value");
+    
+    value = replaceVariables(value,
+      {
+        "FirstName": firstName,
+        "LastName": lastName
+      }
+    );
+
+    this.htmlEditor?.instance.option("value", value);
+  }
+
+  constructor() {
+    this.convertVariableOnClick = this.convertVariableOnClick.bind(this);
+  }
+}

Angular/src/app/orig_replace-variables.ts

@@ -0,0 +1,34 @@
+const DX_VARIABLE_CLASS = 'dx-variable';
+const DATA_VAR_VALUE_ATTR = 'data-var-value';
+
+/**
+ * Contains `key: value` pairs of variables for HtmlEditor.
+ * { 'FirstName': 'John', 'LastName': 'Smith' }
+ */
+type Variable = {
+  [key: string]: string;
+}
+
+/**
+ * This method parses HTML string and swaps variables with real values
+ * @param value Value must come from HtmlEditor's value property
+ * @param variablesMap Must contain `key: value` pairs of variable content. e.g. `{ 'FirstName': 'John', 'LastName': 'Smith' }`
+ * @returns Processed HTML string. Assign this value back to HtmlEditor's value property
+ */
+export function replaceVariables(value: string, variablesMap: Variable): string {
+  const parser = new DOMParser();
+
+  let replaceVariables = (value: string, variablesMap: Variable) => {
+    const doc = parser.parseFromString(value, 'text/html');
+    const variables = doc.querySelectorAll(`.${DX_VARIABLE_CLASS}`);
+
+    variables.forEach(variable => {
+      const variableValue = variablesMap[variable.getAttribute(DATA_VAR_VALUE_ATTR) || ''];
+      variable.outerHTML = variableValue;
+    });
+
+    return doc.body.innerHTML.toString();
+  }
+
+  return replaceVariables(value, variablesMap);
+}

HtmlEditor - Mail merge.png

@@ -1,54 +1,72 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/340354634/25.1.2%2B)
-[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1129779)
+![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/633913710/22.2.6%2B)
+[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1162966)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
 <!-- default badges end -->
-# DevExtreme Examples Template
+# HtmlEditor for DevExtreme - How to implement mail merge with variables
 
-This is the repository template for creating new examples. 
+The HtmlEditor component supports [variables](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/variables/). This example demonstrates how to implement mail merge with variables.
 
-![Example image](images/image-template.png)
+The application contains HtmlEditor and two TextBoxes. Type values in the TextBoxes to see them merged with HtmlEditor text.
 
-Use **DevExtreme _Product_ - _Task_** template for a title. 
+![HtmlEditor - Mail merge](/HtmlEditor%20-%20Mail%20merge.png)
 
-Describe the solved task in this section.
+The core implementation for mail merge can be found within the `replaceVariables(value, variablesMap)` utility method. The method accepts two parameters: HtmlEditor's [value](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#value) and an object map. These parameters are used to parse the value, then to find and replace the variables based on the map object.
 
-Put a screenshot/gif that illustrates the result here.
+```
+const DX_VARIABLE_CLASS = 'dx-variable';
+const DATA_VAR_VALUE_ATTR = 'data-var-value';
 
-Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details. 
+/*
+value: dxHtmlEditor.value
+variableMap: object = Must contain `key: value` pairs of variable content.
+    {
+        'FirstName': 'John',
+        'LastName': 'Smith'
+    }
+*/
+const replaceVariables = (value, variablesMap) => {
+    const parser = new DOMParser();
+
+    replaceVariables = (value, variablesMap) => {
+        const doc = parser.parseFromString(value, 'text/html');
+        const variables = doc.querySelectorAll(`.${DX_VARIABLE_CLASS}`);
+
+        variables.forEach(variable => {
+            const variableValue = variablesMap[variable.getAttribute(DATA_VAR_VALUE_ATTR)];
+            variable.outerHTML = variableValue;
+        });
+
+        return doc.body.innerHTML.toString();
+    }
+
+    return replaceVariables(value, variablesMap);
+};
+```
 
 ## Files to Review
 
+- **jQuery**
+    - [index.js](jQuery/src/index.js)
 - **Angular**
     - [app.component.html](Angular/src/app/app.component.html)
     - [app.component.ts](Angular/src/app/app.component.ts)
-- **React**
-    - [App.tsx](React/src/App.tsx)
 - **Vue**
-    - [App.vue](Vue/src/App.vue)
     - [Home.vue](Vue/src/components/HomeContent.vue)
-- **jQuery**
-    - [index.html](jQuery/src/index.html)
-    - [index.js](jQuery/src/index.js)
-- **ASP.NET Core**    
+- **React**
+    - [App.tsx](React/src/App.tsx)
+- **NetCore**    
     - [Index.cshtml](ASP.NET%20Core/Views/Home/Index.cshtml)
 
 ## Documentation
 
-- link
-- link
-- ...
-
-## More Examples
-
-- link
-- link
-- ...
+- [Getting Started with HtmlEditor](https://js.devexpress.com/Documentation/Guide/UI_Components/HtmlEditor/Getting_Started_with_HtmlEditor/)
+- [HtmlEditor - Variables](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/variables/)
 <!-- feedback -->
 ## Does this example address your development requirements/objectives?
 
-[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=devextreme-examples-template&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=devextreme-examples-template&~~~was_helpful=no)
+[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=devextreme-htmleditor-mail-merge-with-variables&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=devextreme-htmleditor-mail-merge-with-variables&~~~was_helpful=no)
 
 (you will be redirected to DevExpress.com to submit your response)
 <!-- feedback end -->