JavaScript/jQuery HtmlEditor - variables

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

$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            // Adds a toolbar control that allows users to insert variables
            items: [ "variable" ]
        },
        variables: {
            dataSource: [ "FirstName", "LastName", "Company" ],
            escapeChar: [ "{", "}" ]
        }
    })
})

<dx-html-editor>
    <!-- Adds a toolbar control that allows users to insert variables -->
    <dxo-toolbar [items]="[ 'variable' ]"></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
    ],
    // ...
})

If you use DevExtreme ASP.NET MVC Controls, refer to the Data Binding article.

The following list shows how to specify the dataSource option depending on your data source:

• Data Array
  Assign the array to the dataSource option.

• Read-Only Data in JSON Format
  Set the dataSource option 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 widgets use:

  • DevExtreme.AspNet.Data
  • DevExtreme-PHP-Data
  • devextreme-query-mongodb

  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> 
      <dx-html-editor ... >
          <dx-variables :data-source="store"></dx-variables>
      </dx-html-editor>
  </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.