JavaScript/jQuery HtmlEditor - variables

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

Default Value: null

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

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

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.

    JavaScript
    • $(function() {
    • let serviceUrl = "https://url/to/my/service";
    • $("#htmlEditorContainer").dxHtmlEditor({
    • // ...
    • variables: {
    • dataSource: DevExpress.data.AspNet.createStore({
    • key: "ID",
    • loadUrl: serviceUrl + "/GetAction"
    • })
    • }
    • })
    • });
  • 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: Get and Set Properties.

escapeChar

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

Type:

String

|

Array<String>

Default Value: ''

JavaScript
  • $(function(){
  • $("#htmlEditorContainer").dxHtmlEditor({
  • // ...
  • variables: {
  • dataSource: [ "FirstName" ],
  • escapeChar: [ "{", "}" ] // {FirstName}
  • // or
  • // escapeChar: "##" // ##FirstName##
  • }
  • })
  • })