A newer version of this page is available. Switch to the current version.

variables

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

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 formatName="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 format-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 formatName="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.common.css';
    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.common.css';
    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

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 articles about changing properties in jQuery, Angular, React, and Vue.

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>
    );
}