Angular HtmlEditor - variables

Configures variables that are placeholders for values created once text is processed.

Selector: dxo-variables

Type:

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

To learn how to implement mail merge with variables, refer to this example:

View on GitHub

dataSource

Specifies a collection of variables available for a user.

Type:

Store

|

DataSource

|

DataSource Configuration

|

String

|

Array<String>

| null

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