Vue HtmlEditor - variables

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

Selector: DxVariables
Type:

dxHtmlEditorVariables

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.

Selector: data-source
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.

Selector: escape-char
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> ); }