JavaScript/jQuery HtmlEditor - mentions
Configures mentions.
dataSource
Provides data for the suggestion list.
Depending on your data source, specify this property as described in the following list. The data source can provide string
values or objects. In the latter case, also specify the displayExpr and valueExpr.
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({ // ... mentions: [{ 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 ... > <dxi-mention [dataSource]="store"></dxi-mention> </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 ... > <DxMention :data-source="store"></DxMention> </DxHtmlEditor> </template> <script> import 'devextreme/dist/css/dx.light.css'; import CustomStore from 'devextreme/data/custom_store'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import { DxHtmlEditor, DxMention } from 'devextreme-vue/html-editor'; export default { components: { DxHtmlEditor, DxMention }, 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.light.css'; import CustomStore from 'devextreme/data/custom_store'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import HtmlEditor, { Mention } 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 ... > <Mention dataSource={store} /> </HtmlEditor> ); } } export default App;
Any other data source
Implement a CustomStore.
jQuery
- 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.
Angular
- 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: Two-Way Property Binding.
Vue
- 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: Two-Way Property Binding.
React
- 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: Controlled Mode.
displayExpr
Specifies the data field whose values should be displayed in the suggestion list.
The current mention's data object.
The displayed value.
Set this property to the name of a data field that provides displayed values...
displayExpr: "name"
... or to a function that returns the displayed value:
displayExpr: function(item) { // "item" can be null return item && 'ID: ' + item.id + ', Name: ' + item.name; }
Do not change the default value if the data source contains primitives.
See Also
marker
Specifies the prefix that a user enters to activate mentions. You can use different prefixes with different dataSources.
minSearchLength
Specifies the minimum number of characters that a user should type to trigger the search.
See Also
searchExpr
Specifies one or several data fields to search.
// Search a single data field searchExpr: "name" // Search several data fields searchExpr: ["firstName", "lastName"]
searchTimeout
Specifies the delay between when a user stops typing and when the search is executed.
See Also
valueExpr
Specifies which data field provides unique values to the template's id
parameter.
Alternatively, you can specify the key in the store assigned to the dataSource.