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.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>

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.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>
  • 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: Two-Way Property Binding.

escapeChar

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

Type:

String

|

Array<String>

Default Value: ''

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>