React HtmlEditor - variables

Configures variables, which are placeholders to be replaced with actual values when processing text.

Selector: Variables
Default Value: null

A user can insert variables in the text and remove them, but never modify them.

HTML
TypeScript
  • <dx-html-editor>
  • <!-- Adds a toolbar item that allows users to insert variables -->
  • <dxo-toolbar>
  • <dxi-item name="variable"></dxi-item>
  • </dxo-toolbar>
  • <dxo-variables
  • [dataSource]="[ 'FirstName', 'LastName', 'Company' ]"
  • [escapeChar]="[ '{', '}' ]">
  • </dxo-variables>
  • </dx-html-editor>
  • import { DxHtmlEditorModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxHtmlEditorModule
  • ],
  • // ...
  • })

dataSource

Specifies a collection of variables available for a user.

Default Value: null

The following list shows how to specify the dataSource property depending on your data source:

  • Data Array
    Assign the array to the dataSource property.

  • Read-Only Data in JSON Format
    Set the dataSource property to the URL of a JSON file or service that returns JSON data.

  • OData
    Implement an ODataStore.

  • Web API, PHP, MongoDB
    Use one of the following extensions to enable the server to process data according to the protocol DevExtreme UI components use:

    Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

    app.component.ts
    app.component.html
    app.module.ts
    • import { Component } from '@angular/core';
    • import CustomStore from 'devextreme/data/custom_store';
    • import { createStore } from 'devextreme-aspnet-data-nojquery';
    •  
    • @Component({
    • selector: 'app-root',
    • templateUrl: './app.component.html',
    • styleUrls: ['./app.component.css']
    • })
    • export class AppComponent {
    • store: CustomStore;
    • constructor() {
    • let serviceUrl = "https://url/to/my/service";
    • this.store = createStore({
    • key: "ID",
    • loadUrl: serviceUrl + "/GetAction"
    • })
    • }
    • }
    • <dx-html-editor ... >
    • <dxo-variables [dataSource]="store"></dxo-variables>
    • </dx-html-editor>
    • import { BrowserModule } from '@angular/platform-browser';
    • import { NgModule } from '@angular/core';
    • import { AppComponent } from './app.component';
    •  
    • import { DxHtmlEditorModule } from 'devextreme-angular';
    •  
    • @NgModule({
    • declarations: [
    • AppComponent
    • ],
    • imports: [
    • BrowserModule,
    • DxHtmlEditorModule
    • ],
    • providers: [],
    • bootstrap: [AppComponent]
    • })
    • export class AppModule { }
  • Any other data source
    Implement a CustomStore.

NOTE
  • The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Two-Way Property Binding.

escapeChar

Specifies the special character(s) that should surround the variables.

Type:

String

|

Array<String>

Default Value: ''

HTML
TypeScript
  • <dx-html-editor>
  • <dxo-variables
  • [dataSource]="[ 'FirstName' ]"
  • [escapeChar]="[ '{', '}' ]"> <!-- {FirstName} -->
  • <!-- or -->
  • <!-- escapeChar="##"> --> <!-- ##FirstName## -->
  • </dxo-variables>
  • </dx-html-editor>
  • import { DxHtmlEditorModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxHtmlEditorModule
  • ],
  • // ...
  • })