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

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:

    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 option as shown in the articles about changing options in jQuery, Angular, React, and Vue.

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