JavaScript/jQuery 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.
- $(function(){
- $("#htmlEditorContainer").dxHtmlEditor({
- toolbar: {
- // Adds a toolbar item that allows users to insert variables
- items: [ "variable" ]
- },
- variables: {
- dataSource: [ "FirstName", "LastName", "Company" ],
- escapeChar: [ "{", "}" ]
- }
- })
- })
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.
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.
- 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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.