React HtmlEditor - variables
Configures variables, which are placeholders to be replaced with actual values when processing text.
A user can insert variables in the text and remove them, but never modify them.
jQuery
$(function(){ $("#htmlEditorContainer").dxHtmlEditor({ toolbar: { // Adds a toolbar item that allows users to insert variables items: [ "variable" ] }, variables: { dataSource: [ "FirstName", "LastName", "Company" ], escapeChar: [ "{", "}" ] } }) })
Angular
<dx-html-editor> <!-- Adds a toolbar item that allows users to insert variables --> <dxo-toolbar> <dxi-item formatName="variable"></dxi-item> </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 ], // ... })
Vue
<template> <DxHtmlEditor ... > <!-- Adds a toolbar item that allows users to insert variables --> <DxToolbar> <DxItem format-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>
React
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 formatName="variable" /> </Toolbar> <Variables dataSource={variables} escapeChar={escapeCharacters} /> </HtmlEditor> ); }
dataSource
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.
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.tsapp.component.htmlapp.module.tsimport { 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> <DxHtmlEditor ... > <DxVariables :data-source="store"></DxVariables> </DxHtmlEditor> </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.jsimport 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.
escapeChar
jQuery
$(function(){ $("#htmlEditorContainer").dxHtmlEditor({ // ... variables: { dataSource: [ "FirstName" ], escapeChar: [ "{", "}" ] // {FirstName} // or // escapeChar: "##" // ##FirstName## } }) })
Angular
<dx-html-editor> <dxo-variables [dataSource]="[ 'FirstName' ]" [escapeChar]="[ '{', '}' ]"> <!-- {FirstName} --> <!-- or --> <!-- escapeChar="##"> --> <!-- ##FirstName## --> </dxo-variables> </dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxHtmlEditorModule ], // ... })
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>
React
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> ); }
If you have technical questions, please create a support ticket in the DevExpress Support Center.