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.

jQuery
JavaScript
$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            // Adds a toolbar item that allows users to insert variables
            items: [ "variable" ]
        },
        variables: {
            dataSource: [ "FirstName", "LastName", "Company" ],
            escapeChar: [ "{", "}" ]
        }
    })
})
Angular
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxHtmlEditor ... >
        <!-- Adds a toolbar item that allows users to insert variables -->
        <DxToolbar>
            <DxItem name="variable" />
        </DxToolbar>
        <DxVariables
            :data-source="variables"
            :escape-char="escapeCharacters"
        />
    </DxHtmlEditor>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxHtmlEditor, {
    DxToolbar,
    DxItem,
    DxVariables
} from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor,
        DxVariables
    },
    data() {
        return {
            variables: ['FirstName', 'LastName', 'Company'],
            escapeCharacters: ['{', '}']
        };
    }
}
</script>
React
App.js
import 'devextreme/dist/css/dx.light.css';

import HtmlEditor, {
    Variables
} from 'devextreme-react/html-editor';

const variables = ['FirstName', 'LastName', 'Company'];
const escapeCharacters = ['{', '}'];

export default function App() {
    return (
        <HtmlEditor>
            {/* Adds a toolbar item that allows users to insert variables */}
            <Toolbar>
                <Item name="variable" />
            </Toolbar>
            <Variables
                dataSource={variables}
                escapeChar={escapeCharacters}
            />
        </HtmlEditor>
    );
}

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.

    jQuery
    JavaScript
    $(function() {
        let serviceUrl = "https://url/to/my/service";
        $("#htmlEditorContainer").dxHtmlEditor({
            // ...
            variables: {
                dataSource: DevExpress.data.AspNet.createStore({
                    key: "ID",
                    loadUrl: serviceUrl + "/GetAction"
                })
            }
        })
    });
    Angular
    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 { }
    Vue
    App.vue
    <template> 
        <DxHtmlEditor ... >
            <DxVariables :data-source="store"></DxVariables>
        </DxHtmlEditor>
    </template>
    
    <script>
    import 'devextreme/dist/css/dx.light.css';
    
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import { DxHtmlEditor, DxVariables } from 'devextreme-vue/html-editor';
    
    export default {
        components: {
            DxHtmlEditor,
            DxVariables
        },
        data() {
            const serviceUrl = "https://url/to/my/service";
            const store = createStore({
                key: "ID",
                loadUrl: serviceUrl + "/GetAction"
            });
            return {
                store
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import 'devextreme/dist/css/dx.light.css';
    
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import HtmlEditor, { Variables } from 'devextreme-react/html-editor';
    
    const serviceUrl = "https://url/to/my/service";
    const store = createStore({
        key: "ID",
        loadUrl: serviceUrl + "/GetAction"
    });
    
    class App extends React.Component {
        render() {
            return (
                <HtmlEditor ... >
                    <Variables dataSource={store} />
                </HtmlEditor>
            );
        }
    }
    export default App;
  • Any other data source
    Implement a CustomStore.

NOTE
jQuery
  • 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: Get and Set Properties.
Angular
  • 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.
Vue
  • 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.
React
  • 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: Controlled Mode.

escapeChar

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

Type:

String

|

Array<String>

Default Value: ''

jQuery
JavaScript
$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        variables: {
            dataSource: [ "FirstName" ],
            escapeChar: [ "{", "}" ] // {FirstName}
            // or
            // escapeChar: "##" // ##FirstName##
        }
    })
})
Angular
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxHtmlEditor ... >
        <DxVariables
            :data-source="variables"
            :escape-char="escapeCharacters" /> <!-- {FirstName} -->
            <!-- or -->
            <!-- escape-char="##" /> --> <!-- ##FirstName## -->
    </DxHtmlEditor>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxHtmlEditor, {
    DxVariables
} from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor,
        DxVariables
    },
    data() {
        return {
            variables: ['FirstName'],
            escapeCharacters: ['{', '}']
        };
    }
}
</script>
React
App.js
import 'devextreme/dist/css/dx.light.css';

import HtmlEditor, {
    Variables
} from 'devextreme-react/html-editor';

const variables = ['FirstName'];
const escapeCharacters = ['{', '}'];

export default function App() {
    return (
        <HtmlEditor>
            <Variables
                dataSource={variables}
                escapeChar={escapeCharacters} /> {/* {FirstName} */}
                {/* or */}
                {/* escapeChar="##" /> */} {/* ##FirstName## */}
        </HtmlEditor>
    );
}