Angular HtmlEditor - variables

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

Selector: dxo-variables
Default Value: null

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

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.

    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
  • 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: ''

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